【问题标题】:Datatables 1.10 "Check all" via jqueryDatatables 1.10通过jquery“检查所有”
【发布时间】:2014-05-13 17:10:07
【问题描述】:

我知道这可能看起来很原始,但我一整天都在尝试实现它,可能是因为我无法完全理解如何使用 API,我使用的是 DataTables 1.10.0,我有一个具有分页功能的表,每一行都有一个复选框,我需要一个“检查所有按钮”来检查所有页面中的所有复选框,问题是它只检查当前页面中的复选框,并离开其他页面未选中,这应该很容易,但我想不通!我找到的答案使用“fnGetNodes”,这似乎已被弃用,并且不被 1.10 版使用

编辑:这是我的标记

        <table class="table table-striped table-bordered table-hover" id="numbers_table">
                <thead>
                    <tr>
                        <th><input type="checkbox" id="checkall" title="Select all" onClick="toggle(this)"/></th>
                        <th>Number</th>
                        <th>Company</th>
                        <th>Tags</th>
                    </tr>
                </thead>
                <tbody>
                    <% _.each(array, function (value) { %>
                    <tr>
                        <td><input type='checkbox' name='numbers[]' value='<%=value.id%>'/></td>
                        <td><%= value.number %></td>
                        <td><%= value.company %></td>
                        <td><%= value.tags %></td>
                    </tr>
                    <% }) %>
                </tbody>
            </table>

    <button type="button" class="btn btn-primary" id="checkall2">SELECT ALL</button>

<script>

$(document).ready(function() {

    $('#numbers_table').dataTable({
        //"bPaginate": false,
        "aoColumnDefs": [
      { "bSortable": false, "aTargets": [ 0 ] }
    ] 
        });

    $("#checkall2").click(function() { // a button with checkall2 as its id
        $(':checkbox').prop('checked', true); // all checkboxes, you can narrow with a better selector
    });
});
</script>

【问题讨论】:

  • 请提供更多细节,例如您使用的实际代码。
  • @LaughDonor 我添加了代码^

标签: jquery datatables


【解决方案1】:

这应该适合你

var table = $('#numbers_table').DataTable();

    $('#checkall').click(function () {
        $(':checkbox', table.rows().nodes()).prop('checked', this.checked);
    });

【讨论】:

  • 如何在我选择的行上应用 css?
  • table.rows() 怎么可能抛出这个异常:Uncaught TypeError: table.rows is not a function at &lt;anonymous&gt;:2:7 at Object.InjectedScript._evaluateOn (&lt;anonymous&gt;:895:140) at Object.InjectedScript._evaluateAndWrap (&lt;anonymous&gt;:828:34) at Object.InjectedScript.evaluate (&lt;anonymous&gt;:694:21)
【解决方案2】:

试试这个代码:

var table = $('#numbers_table').DataTable();

var cells = table
    .cells( ":checkbox" )
    .nodes();

$( cells ).prop('checked', true);

Source.

【讨论】:

  • 同意,不知道为什么选择了这个答案。也许在以前的版本中它是正确的,我没有时间检查。就目前而言,这不是解决方案。
【解决方案3】:

如果不起作用,请尝试使用 api() 关键字:

$('#YourCheckBoxId').on('click', function () {
    var rows = YourDatatableVariable.api().rows({ 'search': 'applied' }).nodes();
    $('input[type="checkbox"]', rows).prop('checked', this.checked);
});

【讨论】:

    【解决方案4】:

    这真的没那么难,但是没有看到你的标记我只能提供一个通用的例子 -

    $('input[value="Check All"]').click(function() { // a button with Check All as its value
        $(':checkbox').prop('checked', true); // all checkboxes, you can narrow with a better selector
    });
    

    【讨论】:

    • 我已经实现了类似的代码,问题是由datatables分页引起的,选择器适用于当前页面中在表格中查看的元素,其他页面中的复选框保持未选中
    • 您必须将逻辑添加到分页逻辑中,因为在您点击分页链接之前不会加载数据。
    • “分页逻辑”不是我的,datatables 是一个插件,他们有一个成熟的 API,我已经找到了这个问题的答案,但显然它使用了旧版本的 API 函数,例如“ fnGetNodes",我似乎在当前 API 中找不到这些答案中使用的函数
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2015-02-03
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多