Tablesorter Zebra not working after deleting a row

问题:

$(function() {

  // NOTE: $.tablesorter.theme.bootstrap is ALREADY INCLUDED in the jquery.tablesorter.widgets.js
  // file; it is included here to show how you can modify the default classes
  $.tablesorter.themes.bootstrap = {
    // these classes are added to the table. To see other table classes available,
    // look here: http://getbootstrap.com/css/#tables
    table        : 'table table-bordered table-striped',
    caption      : 'caption',
    // header class names
    header       : 'bootstrap-header', // give the header a gradient background (theme.bootstrap_2.css)
    sortNone     : '',
    sortAsc      : '',
    sortDesc     : '',
    active       : '', // applied when column is sorted
    hover        : '', // custom css required - a defined bootstrap style may not override other classes
    // icon class names
    icons        : '', // add "icon-white" to make them white; this icon class is added to the <i> in the header
    iconSortNone : 'bootstrap-icon-unsorted', // class name added to icon when column is not sorted
    iconSortAsc  : 'glyphicon glyphicon-chevron-up', // class name added to icon when column has ascending sort
    iconSortDesc : 'glyphicon glyphicon-chevron-down', // class name added to icon when column has descending sort
    filterRow    : '', // filter row class; use widgetOptions.filter_cssFilter for the input/select element
    footerRow    : '',
    footerCells  : '',
    even         : '', // even row zebra striping
    odd          : '', // odd row zebra striping
    sortMultiSortKey: 'shiftKey',
   
  };
    
    $('#resetsort').click(function(e) {
    $("#receipts").trigger('sortReset').trigger('applyWidgets');
    return false;
  });
    
    
  // call the tablesorter plugin and apply the uitheme widget
  $("#receipts").tablesorter({
    // this will apply the bootstrap theme if "uitheme" widget is included
    // the widgetOptions.uitheme is no longer required to be set
    theme : "blue",
 
    widthFixed: true,
   

    headerTemplate : '{content} {icon}', // new in v2.7. Needed to add the bootstrap icon!

    // widget code contained in the jquery.tablesorter.widgets.js file
    // use the zebra stripe widget if you plan on hiding any rows (filter widget)
    widgets : [ "uitheme", "filter", "zebra" ],

    widgetOptions : {
      // using the default zebra striping class name, so it actually isn't included in the theme variable above
      // this is ONLY needed for bootstrap theming if you are using the filter widget, because rows are hidden
      zebra : ["even", "odd"],

      // reset filters button
      filter_reset : ".reset",

      // extra css class name (string or array) added to the filter element (input or select)
      filter_cssFilter: "form-control",

      // set the uitheme widget to use the bootstrap theme class names
      // this is no longer required, if theme is set
      // ,uitheme : "bootstrap"

    }
  })
  .tablesorterPager({

    // target the pager markup - see the HTML block below
    container: $(".ts-pager"),

    // target the pager page select dropdown - choose a page
    cssGoto  : ".pagenum",

    // remove rows from the table to speed up the sort of large tables.
    // setting this to false, only hides the non-visible rows; needed if you plan to add/remove rows with the pager enabled.
    removeRows: false,

    // output string - default is '{page}/{totalPages}';
    // possible variables: {page}, {totalPages}, {filteredPages}, {startRow}, {endRow}, {filteredRows} and {totalRows}
    output: '{startRow} - {endRow} / {filteredRows} ({totalRows})'

  });

});
 
function yeah() {
    return confirm('Are you sue you want to delete?');
    $("#receipts").trigger('applyWidgets');
    return false;
}    

Hi,

Newbie here running Tablesorter also with Filter & Sort. Everything working perfectly (including reset buttons). As a bit of background, Im using a DotNet Nuke site with a module that delivers the rows of data.

Part of each row is a hyperlink that fires deleting a row. It also includes a section where I can insert some JavaScript.

Problem is when I delete a row, the zebra widget doesn't work. (All rows are white)

Other part of pressing the delete hyperlink is that Are you sure message come up.

My understanding is best approach here is to create a function since 2 actions need to be performed.

Function Yeah is my attempt. The page also has a resetsort button which works fine.

Ive tried putting my function just below the resetsort button but that didnt have any effect.

Thanks in advance for any assistance in getting this function going.

回答1:

The sortReset method should update the widgets automatically after being applied, so I'm not sure why it isn't happening in this case.

Anyway, when a "sortReset" is triggered, some processing needs to occur, so using "applyWidgets" immediately after won't works because there needs to be a delay.

The "sortReset" trigger does include a callback, so try this code:

$("#receipts").trigger('sortReset', [function(){
  $('#receipts').trigger('applyWidgets');
}]);

I'll try to figure out why this isn't happening internally when I get some free time.