数据表全选复选框

Posted

技术标签:

【中文标题】数据表全选复选框【英文标题】：Datatables Select All Checkbox 【发布时间】：2017-07-23 01:36:19 【问题描述】：

全选的演示并没有真正起作用。 https://datatables.net/extensions/select/examples/initialisation/checkbox.html

在通过columnDef 属性创建全选复选框后，实现全选复选框的最佳方法是什么？

【问题讨论】：

【参考方案1】：

这应该适合你：

let example = $('#example').DataTable(
    columnDefs: [
        orderable: false,
        className: 'select-checkbox',
        targets: 0
    ],
    select: 
        style: 'os',
        selector: 'td:first-child'
    ,
    order: [
        [1, 'asc']
    ]
);
example.on("click", "th.select-checkbox", function() 
    if ($("th.select-checkbox").hasClass("selected")) 
        example.rows().deselect();
        $("th.select-checkbox").removeClass("selected");
     else 
        example.rows().select();
        $("th.select-checkbox").addClass("selected");
    
).on("select deselect", function() 
    ("Some selection or deselection going on")
    if (example.rows(
            selected: true
        ).count() !== example.rows().count()) 
        $("th.select-checkbox").removeClass("selected");
     else 
        $("th.select-checkbox").addClass("selected");
    
);

我已经添加到 CSS 中：

table.dataTable tr th.select-checkbox.selected::after 
    content: "✔";
    margin-top: -11px;
    margin-left: -4px;
    text-align: center;
    text-shadow: rgb(176, 190, 217) 1px 1px, rgb(176, 190, 217) -1px -1px, rgb(176, 190, 217) 1px -1px, rgb(176, 190, 217) -1px 1px;

工作JSFiddle，希望对您有所帮助。

【讨论】：

并确保为其他有问题的人使用 DataTable 而不是 dataTable。 jsfiddle.net/annoyingmouse/yxLrLr8o 不适用于 select.dataTables.css 的最新 1.2.5 版本有什么线索可以让它工作吗？ 我看了一眼 css，它发生了一些变化，也许提出另一个问题而不是添加评论？ @annoyingmouse 我遇到了同样的问题......即使 TH 元素具有“select-checkbox”类，复选框也不会显示。可能缺少什么？有一些差异。首先，我从 Ajax 获取数据，另一个，当看到渲染表时，我可以看到 2 个 div。一个是“dataTables_scrollHeadInner”类，另一个是“dataTables_scrollBody”。两个内容都有相同的标题行。 @annoyingmouse 没关系...我认为这是选择插件中的错误。请看这篇文章：datatables.net/forums/discussion/53372/…。我已经报告了这个错误并根据你的发布了我的解决方案。【参考方案2】：

您可以为 jQuery 数据表使用 Checkboxes 扩展名。

var table = $('#example').DataTable(
   'ajax': 'https://api.myjson.com/bins/1us28',
   'columnDefs': [
      
         'targets': 0,
         'checkboxes': 
            'selectRow': true
         
      
   ],
   'select': 
      'style': 'multi'
   ,
   'order': [[1, 'asc']]
);

有关代码和演示，请参阅 this example。

有关more examples 和documentation，请参见Checkboxes 项目页面。

【讨论】：

这是一款出色的数据表插件，API 编写良好。我推荐它比标记为“已接受”的第一个答案更好 请注意，这个库有一行代码可以停止目标复选框上点击事件的传播。因此，如果您想将 click 事件用于目标复选框，例如在复选框单击时显示按钮，则要么使用另一个事件，如“更改”，要么创建自定义事件。 这只是说1 row selected不管我选择了多少行还是全选？？？？此外，如果我选择一行，它会自动选择全选。 仅供参考，如果您必须使用 HTML (DOM)，则每行必须有一个行索引，因为第一个 是 <td>1<\td> 而不仅仅是空白 <td><\td>。这是在您的文档中提到的容易实现的目标！ :) @BrianWiley，Known Limitation 部分的文档中提到了它，但我猜没有人阅读它。 【参考方案3】：

您可以通过按钮使用dataTable本身提供的this option。

dom: 'Bfrtip',
 buttons: [
      'selectAll',
      'selectNone'
 ]'

这是一个示例代码

var tableFaculty = $('#tableFaculty').DataTable(
    "columns": [
        
            data: function (row, type, set) 
                return '';
            
        ,
        data: "NAME"
    ],
    "columnDefs": [
        
            orderable: false,
            className: 'select-checkbox',
            targets: 0
        
    ],
    select: 
        style: 'multi',
        selector: 'td:first-child'
    ,
    dom: 'Bfrtip',
    buttons: [
        'selectAll',
        'selectNone'
    ],
    "order": [[0, 'desc']]
);

【讨论】：

【参考方案4】：

我使用 fontawesome 简单地实现了这个功能，还利用了 Select Extension，这包括全选、取消选择某些项目、取消全选。 https://codepen.io/pakogn/pen/jJryLo

HTML：

<table id="example" class="display" style="width:100%">
    <thead>
        <tr>
            <th>
                <button style="border: none; background: transparent; font-size: 14px;" id="MyTableCheckAllButton">
                <i class="far fa-square"></i>  
                </button>
            </th>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Salary</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td></td>
            <td>Tiger Nixon</td>
            <td>System Architect</td>
            <td>Edinburgh</td>
            <td>61</td>
            <td>$320,800</td>
        </tr>
        <tr>
            <td></td>
            <td>Garrett Winters</td>
            <td>Accountant</td>
            <td>Tokyo</td>
            <td>63</td>
            <td>$170,750</td>
        </tr>
        <tr>
            <td></td>
            <td>Ashton Cox</td>
            <td>Junior Technical Author</td>
            <td>San Francisco</td>
            <td>66</td>
            <td>$86,000</td>
        </tr>
        <tr>
            <td></td>
            <td>Cedric Kelly</td>
            <td>Senior javascript Developer</td>
            <td>Edinburgh</td>
            <td>22</td>
            <td>$433,060</td>
        </tr>
        <tr>
            <td></td>
            <td>Airi Satou</td>
            <td>Accountant</td>
            <td>Tokyo</td>
            <td>33</td>
            <td>$162,700</td>
        </tr>
        <tr>
            <td></td>
            <td>Brielle Williamson</td>
            <td>Integration Specialist</td>
            <td>New York</td>
            <td>61</td>
            <td>$372,000</td>
        </tr>
        <tr>
            <td></td>
            <td>Herrod Chandler</td>
            <td>Sales Assistant</td>
            <td>San Francisco</td>
            <td>59</td>
            <td>$137,500</td>
        </tr>
        <tr>
            <td></td>
            <td>Rhona Davidson</td>
            <td>Integration Specialist</td>
            <td>Tokyo</td>
            <td>55</td>
            <td>$327,900</td>
        </tr>
        <tr>
            <td></td>
            <td>Colleen Hurst</td>
            <td>Javascript Developer</td>
            <td>San Francisco</td>
            <td>39</td>
            <td>$205,500</td>
        </tr>
        <tr>
            <td></td>
            <td>Sonya Frost</td>
            <td>Software Engineer</td>
            <td>Edinburgh</td>
            <td>23</td>
            <td>$103,600</td>
        </tr>
        <tr>
            <td></td>
            <td>Jena Gaines</td>
            <td>Office Manager</td>
            <td>London</td>
            <td>30</td>
            <td>$90,560</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <th></th>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Salary</th>
        </tr>
    </tfoot>
</table>

Javascript：

$(document).ready(function() 
    let myTable = $('#example').DataTable(
        columnDefs: [
            orderable: false,
            className: 'select-checkbox',
            targets: 0,
        ],
        select: 
            style: 'os', // 'single', 'multi', 'os', 'multi+shift'
            selector: 'td:first-child',
        ,
        order: [
            [1, 'asc'],
        ],
    );

    $('#MyTableCheckAllButton').click(function() 
        if (myTable.rows(
                selected: true
            ).count() > 0) 
            myTable.rows().deselect();
            return;
        

        myTable.rows().select();
    );

    myTable.on('select deselect', function(e, dt, type, indexes) 
        if (type === 'row') 
            // We may use dt instead of myTable to have the freshest data.
            if (dt.rows().count() === dt.rows(
                    selected: true
                ).count()) 
                // Deselect all items button.
                $('#MyTableCheckAllButton i').attr('class', 'far fa-check-square');
                return;
            

            if (dt.rows(
                    selected: true
                ).count() === 0) 
                // Select all items button.
                $('#MyTableCheckAllButton i').attr('class', 'far fa-square');
                return;
            

            // Deselect some items button.
            $('#MyTableCheckAllButton i').attr('class', 'far fa-minus-square');
        
    );
);

【讨论】：

我在这里尝试了所有的答案，以及网上其他地方的一些答案。这是唯一的解决方案，它 (a) 正确地保持每行上复选框的状态与该行的选定状态同步； (b) 在标题中提供了正确的不确定状态； (c) 即使在对表应用过滤器时也保持正确的状态。太棒了！【参考方案5】：

@annoyingmouse 给出的The solution 对我有用。

但要使用标题单元格中的复选框，我还必须修复 select.dataTables.css。 似乎他们使用了：

table.dataTable tbody th.select-checkbox

而不是：

table.dataTable thead th.select-checkbox

所以我不得不将它添加到我的 css 中：

table.dataTable thead th.select-checkbox 
  position: relative;

table.dataTable thead th.select-checkbox:before,
table.dataTable thead th.select-checkbox:after 
  display: block;
  position: absolute;
  top: 1.2em;
  left: 50%;
  width: 12px;
  height: 12px;
  box-sizing: border-box;

table.dataTable tbody td.select-checkbox:before,
table.dataTable thead th.select-checkbox:before 
  content: ' ';
  margin-top: -6px;
  margin-left: -6px;
  border: 1px solid black;
  border-radius: 3px;

【讨论】：

我正在经历同样的情况。我正在使用 table-sm css 类，它导致标题对齐问题。你用过 table-sm 吗？ 不，我不使用 table-sm。【参考方案6】：

根据Francisco Daniel 的回答，我修改了一些 Jquery 代码，这里是我的版本。我删除了一些多余的代码并使用“fa”而不是“far”作为图标。由于我无法理解它的用途，因此我还删除了“远法减号”。

-- 已编辑--

我为按钮图标添加了“绘制”事件，以便在重新绘制或重新加载表格时进行更新。因为我注意到当我尝试使用“myTable.ajax.reload()”重新加载表格时，按钮图标没有改变。

https://codepen.io/john-kenneth-larbo/pen/zXeYpz

$(document).ready(function() 
    let myTable = $('#example').DataTable(
        columnDefs: [
            orderable: false,
            className: 'select-checkbox',
            targets: 0,
        ],
        select: 
            style: 'os', // 'single', 'multi', 'os', 'multi+shift'
            selector: 'td:first-child',
        ,
        order: [
            [1, 'asc'],
        ],
    );

       myTable.on('select deselect draw', function () 
        var all = myTable.rows( search: 'applied' ).count(); // get total count of rows
        var selectedRows = myTable.rows( selected: true, search: 'applied' ).count(); // get total count of selected rows

        if (selectedRows < all) 
            $('#MyTableCheckAllButton i').attr('class', 'fa fa-square-o');
         else 
            $('#MyTableCheckAllButton i').attr('class', 'fa fa-check-square-o');
        

    );

    $('#MyTableCheckAllButton').click(function () 
        var all = myTable.rows( search: 'applied' ).count(); // get total count of rows
        var selectedRows = myTable.rows( selected: true, search: 'applied' ).count(); // get total count of selected rows


        if (selectedRows < all) 
            //Added search applied in case user wants the search items will be selected
            myTable.rows( search: 'applied' ).deselect();
            myTable.rows( search: 'applied' ).select();
         else 
            myTable.rows( search: 'applied' ).deselect();
        
    );
);
<table id="example" class="display" style="width:100%">
    <thead>
        <tr>
            <th>
                <button style="border: none; background: transparent; font-size: 14px;" id="MyTableCheckAllButton">
                <i class="far fa-square"></i>  
                </button>
            </th>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Salary</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td></td>
            <td>Tiger Nixon</td>
            <td>System Architect</td>
            <td>Edinburgh</td>
            <td>61</td>
            <td>$320,800</td>
        </tr>
        <tr>
            <td></td>
            <td>Garrett Winters</td>
            <td>Accountant</td>
            <td>Tokyo</td>
            <td>63</td>
            <td>$170,750</td>
        </tr>
        <tr>
            <td></td>
            <td>Ashton Cox</td>
            <td>Junior Technical Author</td>
            <td>San Francisco</td>
            <td>66</td>
            <td>$86,000</td>
        </tr>
        <tr>
            <td></td>
            <td>Cedric Kelly</td>
            <td>Senior Javascript Developer</td>
            <td>Edinburgh</td>
            <td>22</td>
            <td>$433,060</td>
        </tr>
        <tr>
            <td></td>
            <td>Airi Satou</td>
            <td>Accountant</td>
            <td>Tokyo</td>
            <td>33</td>
            <td>$162,700</td>
        </tr>
        <tr>
            <td></td>
            <td>Brielle Williamson</td>
            <td>Integration Specialist</td>
            <td>New York</td>
            <td>61</td>
            <td>$372,000</td>
        </tr>
        <tr>
            <td></td>
            <td>Herrod Chandler</td>
            <td>Sales Assistant</td>
            <td>San Francisco</td>
            <td>59</td>
            <td>$137,500</td>
        </tr>
        <tr>
            <td></td>
            <td>Rhona Davidson</td>
            <td>Integration Specialist</td>
            <td>Tokyo</td>
            <td>55</td>
            <td>$327,900</td>
        </tr>
        <tr>
            <td></td>
            <td>Colleen Hurst</td>
            <td>Javascript Developer</td>
            <td>San Francisco</td>
            <td>39</td>
            <td>$205,500</td>
        </tr>
        <tr>
            <td></td>
            <td>Sonya Frost</td>
            <td>Software Engineer</td>
            <td>Edinburgh</td>
            <td>23</td>
            <td>$103,600</td>
        </tr>
        <tr>
            <td></td>
            <td>Jena Gaines</td>
            <td>Office Manager</td>
            <td>London</td>
            <td>30</td>
            <td>$90,560</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <th></th>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Salary</th>
        </tr>
    </tfoot>
</table>

【讨论】：

fa-minus-square 字形是您显示indeterminate state 的方式，也称为“mixed state”。这是复选框的常见状态，并且在一组表行的全选复选框中特别有意义。参照。 Gmail.

以上是关于数据表全选复选框的主要内容，如果未能解决你的问题，请参考以下文章

如何使用表中的全选复选框获取所有数据？

android实现下拉列表与复选框结合的功能，全选功能

超实用多选框 checkbox 功能——全选不选反选等功能的数据驱动 JS 实现

vue 实现 全选功能

AJAX实现弹窗显示详情，全选和批量删除

如果选中 CheckAll 则全选，如果未选中则使用 jQuery 从 Gridview 中取消全选