删除行后，Tablesorter Zebra无法正常工作

Question

 $(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; } 

嗨，

新手在这里运行Tablesorter也使用Filter＆Sort。 一切都很完美（包括重置按钮）。 作为一个背景，我使用DotNet Nuke站点和一个提供数据行的模块。

每行的一部分是一个触发删除行的超链接。 它还包括一个我可以插入一些JavaScript的部分。

问题是当我删除一行时，zebra小部件不起作用。 （所有行都是白色的）

按删除超链接的其他部分是您确定消息是否出现。

我的理解是这里最好的方法是创建一个函数，因为需要执行2个动作。

功能是的，是我的尝试。 该页面还有一个重置按钮，工作正常。

我已经尝试将我的功能放在resetsort按钮下面，但没有任何效果。

预先感谢您提供此功能的任何帮助。

Answer 1

sortReset方法应该在应用后自动更新小部件，所以我不确定为什么在这种情况下不会发生这种情况。

无论如何，当触发“sortReset”时 ，需要进行一些处理，因此之后立即使用“applyWidgets”将无效，因为需要延迟。

“sortReset”触发器包含回调，因此请尝试以下代码：

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

我会试着弄清楚为什么当我得到一些空闲时间时，这不会发生在内部。