triggering update after removing rows in tablesorter

Question

I have read the old thread (here) about updating table after rows being removed. The general approach is using .trigger('update').trigger("appendCache").trigger("applyWidgets"). But that doesn't work as the rows will come back on sorting. In the example , it only has the addition of editable widget. Can anyone tell me why the trigger doesn't work?

var options = {
        theme: 'default',
        widgets: ['editable'],
        widgetOptions : {
          editable_columns       : [0,1,2],      
          editable_enterToAccept : true,          
          editable_autoAccept    : true,          
          editable_autoResort    : false,         
          editable_validate      : null,         
          editable_noEdit        : 'no-edit',     
          editable_editComplete  : 'editComplete'
       }
}
$('.tablesorter2').tablesorter(options).children('tbody').on('editComplete','td', function(event, config){
    var $this = $(this),
        tr = $this.parent('tr'),
        $allRows = config.$tbodies.children('tr'), 
        tid = tr.data('tid'),
        input="",
        name = $(this).data('name'),
        newContent = $(this).text();
        input = '<input value="'+newContent+'" name="'+name+'[]" type="hidden">';

        $this.find('.j_input').html(input);
    });

$('button').click(function(){
     $('input:checked').closest('tr').remove();
     $('tablesorter2').trigger('update').trigger("appendCache").trigger("applyWidgets");
});

HTML:

<button>Del</button>
<table class="tablesorter2">
    <thead>
    <tr data-tid='12'>
        <th>Name</th>
        <th>Age</th>
        <th>Conditions</th>
        <th>Notes</th>
        <th>Del</th>
    </tr>
    </thead>
    <tbody>
        <tr data-tid='13'>
            <td><div>Peter</div></td>
            <td contenteditable="true" data-name='age'>18<span class='j_input'></span></td>
            <td contenteditable="true" data-name='conditions'>Good<span class='j_input'></span></td>
            <td contenteditable="true" data-name='notes'>...<span class='j_input'></span></td>
            <td><input type='checkbox'/></td>
        </tr>
         <tr>
            <td>Tom</td>
            <td data-name='age'>12<span class='j_input'></span></td>
            <td contenteditable="true" data-name='conditions'>Good<span class='j_input'></span></td>
            <td contenteditable="true" data-name='notes'>On medication<span class='j_input'></span></td>
            <td><input type='checkbox'/></td>
        </tr>
    </tbody></table>

Table sorter "caches" the content on load, so you have to rebind `tablesort` after the `ajax` call, see: http://stackoverflow.com/questions/3210933/jquery-tablesorter-plugin-does-not-work-after-ajax-call — Victory, Aug 30 '14 at 09:45

score 2 · Answer 1 · answered Sep 03 '14 at 05:51

The problem with the code above is that tablesorter2 didn't have a period . in front so the selector was broken. Also, you only need to trigger an update.

$('button').click(function(){
     $('input:checked').closest('tr').remove();
     $('.tablesorter2').trigger('update');
});

Here is a working demo.

triggering update after removing rows in tablesorter

1 Answers1