Question

我正在开发一个项目，它通过datatables jquery插件显示数据。在数据表的第一列中，我特意设置了一个复选框，一个bootstrap squaredFour复选框。因此，所有行中的第一列都有复选框。下一个任务是能够删除所有已检查的行。我在顶部有一个删除按钮，如果至少有一个选中的行，它会被激活。一旦用户点击删除按钮，他就应该能够删除该行。

我不明白，出于某种原因，我无法选择多行。一旦我选中了一个复选框，它就会被选中，如果我尝试选中其他复选框，则选中的复选框将被取消选中。所有这一切只发生在第一个复选框上。这是因为引导程序吗？

这是复选框的代码。我把它作为表数据返回，

  $('#example').DataTable({
    "processing": true,
        "serverSide": true,
            "sPaginationType": "full_numbers",
           // "ajax": "http://localhost:9080/dataTable/tests/user.php"
                "ajax" : {
                    "url" : "http://localhost:9080/swetha/swetha_gmail_to_bbe/trunk/public/" + "swethasemail/mail-ajax/get-data-table/format/json/",
                    "dataType": "json"
                },
                "columnDefs": [{
                        "targets": 0,
                        "orderable": false,
                        "className": "dt-body-center",
                        "render": function(data, type, full, meta){
                             return '<div class="squaredFour "><input type="checkbox" value="None" id="squaredFour" name="check" /><label for="squaredFour"></label></div>';
                         },

                }],

在上面的代码中，它返回一个填充在数据表中的td字段中的复选框。 The checkboxes on the user interface

请为我建议一个解决方案。或者，如果有任何其他可能性在datatable上实现复选功能以进行多重删除，请告诉我。

Answer 1

根据评论中的建议，您可以查看数据表扩展名：https://datatables.net/extensions/select/examples/initialisation/multi.html

或者，这是我如何运作的：

"columns": [
    {
        data: "approved", 
        render: function ( data, type, full, meta ) {
            return '<input type="checkbox" id="' + full.id + '"/>&nbsp;';
        }
    },
],

请注意，每个输入都有唯一的ID。

Datatables squaredFour复选框多重删除功能

1 个答案: