删除行

时间:2016-10-27 03:37:55

标签: function tablesorter zebra-striping



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

您好,

新手在这里使用Filter&amp;运行Tablesorter分类。一切都很完美(包括重置按钮)。作为一个背景,我使用DotNet Nuke站点和一个提供数据行的模块。

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

问题是当我删除一行时,斑马小部件不起作用。 (所有行都是白色的)

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

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

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

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

提前感谢您提供有关此功能的任何帮助。

1 个答案:

答案 0 :(得分:0)

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

无论如何,当触发"sortReset"时,需要进行一些处理,因此使用&#34; applyWidgets&#34;在获胜之后立即因为需要延迟而立即行动。

&#34; sortReset&#34;触发器确实包含一个回调,所以请尝试以下代码:

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

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