CODEWITHSUNDEEP
phpjqueryhtmlajaxtablesorter
GotBatteries
GotBatteries

Reputation: 1386

Jquery table sorter fails to sort certain columns after ajax call

I'm struggling with this one:

  1. I have html table that I sort using jquery tablesorter.
  2. I fetch the whole table with ajax from php-script when "Search"-button is pressed.
  3. I have search-options that are passed to php-code when "Searh"-button is pressed.
  4. I remove the whole table when new search is done, and append the new table to the document.
  5. I call tablesorter after search and appending is done.
  6. Some of the data in the column I'm trying to sort, are just: '-' to mark unnamed and some are names of companies.

Problem:

  1. when all search-options are default, meaning that all rows are fetched, tablesorter works beautifully. If I give one search-option, no matter what it is, tablesorter fails to sort certain columns.
  2. Search-options affect only on what rows are fetched to the table, and nothing else.
  3. What makes this weird is the fact that in my local testing WAMP-server this works normally every time, but in remote server it acts like this.
  4. Even more weird is the fact that if I choose more than one search-option, it works again.
  5. The '-' -marks doesn't seem to have any negative effect on the sorting.
  6. Total of three columns start acting this way, and all of them have only textual data.
  7. Columns are not all next to each other.
  8. Other columns that have text, numbers or whatnot, work normally.

Code for fetching the table:

$.ajax({
        url:"includes/getfromdb.php",
        type: "POST",
        data: $("#usersearchform").serialize(),
        success:function(result){
            $("#custresults").empty(); // container for the results
            $("#custresults").append(result);
            $("#customertable").tablesorter();
        },
        error: function(err) {
            alert(err);
        }
    });

The fact that this works on my WAMP-server and not in the code's final resting place, the remote server, might mean that there is some config-problem or something alike..? Or what do you think SO?

I don't know what other details I could give right now, so I'll add more if necessary.

Update 17.9.14-08.16 More details. The php-generated table without data, only the structure:

<div id="custresults" class="results">

<table id="customertable" class="tablesorter">
    <thead>
        <tr class="nohower">
            <th class="smalltd header"></th>
            <th class="header"></th>
            <th class="header"></th>
            <th class="header"></th>
            <th class="header"></th>
            <th class="header"></th>
            <th class="header"></th>
            <th class="header"></th>
            <th class="header"></th>
            <th class="header"></th>
            <th class="header"></th>
        </tr>
    </thead>
    <tbody></tbody>
</table>

</div>

There is ofcourse more in tbody. tr:s and td:s. Normal structure there. I have already tried triggering the update, but it doesn't work for me. I think it is because the whole table gets removed and then created again, instead of just updating it.

Upvotes: 1

Views: 1004

Answers (2)

GotBatteries
GotBatteries

Reputation: 1386

Ok I just figured this one out.

The data that is on the server, has '-' in some of the columns as the first item in that column. The tablesorter sees this as a minus or something, because the debugger identifies that column as digits and therefore cannot sort the column that has text in it. Silly of me that I didn't notice that on the debugger before. Thank you for using your time with this one.

Update: I didn't do anything to the table sorter itself, but instead got rid of the '-' -characters that existed in the data, since it was only a design flaw from my part and I was able to alter the incoming data easily.

Upvotes: 1

Mottie
Mottie

Reputation: 86413

I could provide better help if you could share some of the resulting HTML.

From guessing, I would suspect that #custresults is the id of the tbody. So if you are only replacing the contents of the tbody, you shouldn't be re-initializing tablesorter. Instead, trigger an update event:

// initialize tablesorter outside of the ajax
$("#customertable").tablesorter();

$.ajax({
    url:"includes/getfromdb.php",
    type: "POST",
    data: $("#usersearchform").serialize(),
    success:function(result){
        $("#custresults").empty(); // container for the results
        $("#custresults").append(result);
        // update tablesorter cache
        $("#customertable").trigger('update');
    },
    error: function(err) {
        alert(err);
    }
});

Upvotes: 0

Related Questions