如何在具有分页功能的表格排序器中取消选中所有复选框

How to uncheck all the checkbox in tablesorter with pagination functionality

本文关键字:取消 复选框 排序 分页 功能 表格      更新时间:2023-09-26

我被这个折磨了好一阵子。

由于表排序器分页将从表中完全删除不可见的行,以便更快地排序。我无法让每行中的复选框按我的意愿工作。

这是我的jsfiddle ->http://jsfiddle.net/NcqfY/3/

单击变量触发器以显示表

基本上我想做的是获取所有选定行的 id 并将它们推送到数组selectedID 中。创建报告时清空selectedID数组(或单击"创建报告"按钮)。因此,在我单击按钮后,我希望表中的所有复选框都应该取消选中。我正在使用以下代码:

$('table.tablesorter tbody tr').find('input[type=checkbox]').prop('checked', false); // I can only uncheck the boxes in current page

但是,我只能取消选中当前页面中的框,不包括不可见的页面。这真的让我很难为所选行获取正确的 ID。

任何人都可以帮助我,将不胜感激!

你的部分 JavaScript 中有一些错误:

$('table.tablesorter tbody').on("click", "tr", function(event) {
    if (event.target.type != 'checkbox') {
        $(':checkbox', this).trigger('click');
        var id = $(this).attr('id');
        if (selectedID.indexOf(id) == -1) {
            selectedID.push(id);
        } else {
            var index = selectedID.indexOf(id);
            selectedID.splice(index, 1);
        }
    }
});

我为您更正了它们,它似乎工作正常:
!== --> !=
=== --> ==
var id = $(this).attr('id') --> var id = $(this).attr('id');

编辑:以上对我不起作用,所以我认为这是问题所在,但要回答您的问题:

$($(".tablesorter")[0].config.rowsCopy).each(function() {
    $(this).find('input[type=checkbox]').prop('checked', false);
});

这将取消选中表格中的所有复选框,甚至是隐藏的复选框

根据 tablesort 的寻呼机的文档,您可以这样做:

var t = $('table')
// disabling the pager will restore all table rows 
t.trigger('disable.pager'); 
// ---do your thing---
// restore pager 
t.trigger('enable.pager');

这似乎有效,前提是您不省略寻呼机的大小选择器(如果这样做,它会抛出错误)。

我已经更新了你的JSFiddle:jsfiddle.net/NcqfY/6/