Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    Regular Coder
    Join Date
    Dec 2002
    Location
    Seattle, WA
    Posts
    116
    Thanks
    1
    Thanked 0 Times in 0 Posts

    [jQuery] - problem with tablesorter and dynamic table content

    Hello,

    So I have this table where the <tbody> is initially blank. Then when
    the document is ready I call a function that runs an AJAX query for
    the table content.

    The initial content is sorted awesomely! But when I call my function
    again with different parameters to get new content, things start to go
    wrong. The table fills with the new content just fine, but clicking
    on a header column to sort reverts the table content back to what it
    was when the page first loaded.

    As you can see below, I have some logic in there to call
    the .trigger("update") any time the content is updated. It just
    doesn't seem to be doing the trick. It's like tablesorter never
    figures out that there is new content it should be sorting with.

    Has anyone ever encountered this? Is there a solution or have I
    simply encountered a bug? I really hope someone has something I could
    try. Below it the relevant code for your perusal.

    ------------------------------------------------------------
    The initial table looks like this:
    ------------------------------------------------------------
    Code:
    314 <table id="issue_table" cellspacing="1">
    315     <thead>
    316         <tr>
    317             <th>category</th>
    318             <th>name</th>
    319             <th>description</th>
    320             <th>active</th>
    321             <th>viewable</th>
    322             <th>end user viewable</th>
    323             <th>OST bucket</th>
    324         </tr>
    325     </thead>
    326     <tfoot>
    327         <tr>
    328             <td colspan="7"><input type="button" id="save_issues" value="save changes" /></td>
    329         </tr>
    330     </tfoot>
    331     <tbody>
    332     </tbody>
    333 </table>
    ------------------------------------------------------------
    The bulk of the function work happens within the success section of
    the AJAX call. The success part looks like this:
    ------------------------------------------------------------
    Code:
    143         success:    function(data) {
    144             var issue_data = eval( "("+data+")" );
    145
    146             var issue_table = $j("#issue_table");
    147
    148             // Clear out whatever's in the table body
    149             var tbody = $j("#issue_table tbody");
    150             tbody.empty();
    151
    152             $j.each( issue_data, function() {
    153                 var issue_string =  "<tr style=\"background-color:#EFF8FF\">";
    <snip> code that constructs an entire TR as a string</snip>
    167
    168                 tbody.append( issue_string );
    169             });
    170
    171             // Sort the table
    172             if( update ) {
    173                 issue_table.trigger("update");
    174                 var sorting = [[0,0]];
    175                 issue_table.trigger("sorton", [sorting]);
    176             } else {
    177                 issue_table.tableSorter({
    178                     debug:          true,
    179                     sortColumn:     'name',
    180                     sortClassAsc:   'issue_header_asc',
    181                     sortClassDesc:  'issue_header_desc',
    182                     headerClass:    'issue_header'
    183                 });
    184             }
    185
    186         }

  • #2
    oaj
    oaj is offline
    New to the CF scene
    Join Date
    Apr 2009
    Posts
    1
    Thanks
    0
    Thanked 1 Time in 1 Post
    I have the same problem.
    After I remove the old rows, the sorting doesnt work. It seems to me that the table does not like to be empty so I first append and then delete the old rows.
    I tried different things and ended up with this:

    $("#bookings tbody tr").addClass("delete");
    $("#bookings tbody").append(html);
    $("#bookings").trigger("update");
    $("#bookings").trigger("appendCache");
    $("#bookings").trigger("sorton",[[[2,1],[0,0]]]);
    $("#bookings tbody tr.delete").remove();
    $("#bookings").trigger("update");

    , not so pretty, but it works in my case.

  • Users who have thanked oaj for this post:

    misterx (04-12-2009)


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •