使用jquery数据表选择单个复选框

Question

在jquery数据表中，应选中单个复选框。

这个链接工作正常。

但上面的链接是使用jquery.dataTables 1.10.16版本。 我正在使用jquery.dataTables 1.9.4 。

使用jquery.dataTables 1.9.4而不是jquery.dataTables 1.10.16可以实现与上面给出的示例中列出的功能相同的功能吗？

Answer 1

在您提供链接的同一页面中，有许多关于使用“单一检查”选项的说明。

在列出的附件的末尾，您可以看到referanced .js文件

https://cdn.datatables.net/select/1.2.5/js/dataTables.select.min.js

在您的页面中，您应该在dataTable.js之后添加此文件referance。

我认为，jquery的版本并不重要。 重要的文件是“dataTables.select.js”！

其次，您必须更新您的dataTable制造商代码，如下面的示例;

$(document).ready(function() {
    $('#example').DataTable( {
        columnDefs: [ {
            orderable: false,
            className: 'select-checkbox',
            targets:   0
        } ],
        select: {
            style:    'os',
            selector: 'td:first-child' // this line is the most importan!
        },
        order: [[ 1, 'asc' ]]
    } );
} );

更新 ：

为什么不尝试编写自己的选择器功能？

例如;

$(document).ready(function() {
    $('#example').DataTable( {
            /// put your options here...
        } );

    $('#example').find("tr").click(function(){ CheckTheRow(this); });
} );

function CheckTheRow(tr){
    if($(tr).find("td:first").hasClass("selected")) return;

    // get the pagination row count
    var activePaginationSelected = $("#example_length").find("select").val();

    // show all rows
    $("#example_length").find("select").val(-1).trigger("change");

    // remove the previous selection mark
    $("#example").find("tr").each(function(i,a){
         $(a).find("td:first").removeClass("selected");
         $(a).find("td:first").html("");
     });

     // mark the picked row
     $(tr).find("td:first").addClass("selected");
     $(tr).find("td:first").html("<i class='fa fa-check'></i>");

     // re turn the pagination to first stuation
     $("#example_length").find("select")
                         .val(activePaginationSelected).trigger("change");

}

Answer 2

遗憾的是，遗留数据表不支持或具有该选择扩展名。

解决方法：

1. 在'mRender'回调中创建复选框元素。
2. 将操作绑定到复选框。 （这可以在fnRowCallback内部或外部完成，就像我在下面的小提琴中的例子一样

https://jsfiddle.net/Rohith_KP/dwcatt9n/1/

 $(document).ready(function() {
  var userData = [
    ["1", "Email", "Full Name", "Member"],
    ["2", "Email", "Full Name", "Member"]
  ];

  var table = $('#example').DataTable({
    'data': userData,
    'columnDefs': [{
      'targets': 0,
      'className': 'dt-body-center',
      'mRender': function(data, type, full, meta) {
        return '<input type="checkbox" value="' + $('<div/>').text(data).html() + '">';
      }
    }],
    'order': [1, 'asc']
  });

  $('#example tr').click(function() {
    if ($(this).hasClass('row_selected'))
      $(this).removeClass('row_selected');
    else
      $(this).addClass('row_selected');
  });
});

另外，我建议您升级数据表版本。 然后您可以使用该选择扩展名。

Answer 3

使用jquery.dataTables 1.9.4而不是jquery.dataTables 1.10.16可以实现与上面给出的示例中列出的功能相同的功能吗？

是。

但是，不使用Select Extension，因为它至少需要1.10.7版本。

对于1.9.4，可能的解决方案是：

$(document).ready(function() {
  $('#example').find("td input[type='checkbox']").click(function() {
    selectRow(this);
  });

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

  function selectRow(clickedCheckBox) {
    var currentPage = table.fnPagingInfo().iPage;

    // Being unchecked
    if (!$(clickedCheckBox).is(':checked')) {
      $(clickedCheckBox).removeAttr('checked');
      getRow(clickedCheckBox).removeClass('selected');
      return;
    }

    var selectEntries = $("#example_length").find("select");
    var showEntriesCount = selectEntries.val();
    var totalRows = table.fnGetData().length;

    // If show entries != totalRows append total rows opiton that can be selected
    if (totalRows != showEntriesCount)
      selectEntries.append($('<option>', {
        value: totalRows,
        text: totalRows
      }));

    // Display all rows
    selectEntries.val(totalRows).trigger("change");

    // Removes all checked attribute from all the rows
    $("#example").find("td input[type='checkbox']").each(function(value, key) {
      getRow(key).removeClass('selected');
      $(key).removeAttr('checked');
    });

    // Check the clicked checkBox
    $(clickedCheckBox).prop('checked', true);
    getRow(clickedCheckBox).addClass('selected');

    // Re set the show entries count
    selectEntries.val(showEntriesCount).trigger("change");

    // If added, Remove the additional option added to Show Entries
    if (totalRows != showEntriesCount)
      selectEntries.find("[value='" + totalRows + "']").remove();

    // Go to the page on which the checkbox was clicked
    table.fnPageChange(currentPage);
  }

  function getRow(element) {
    return $(element).parent().parent();
  }
});

---

以上将需要fnPagingInfo将用户带回初始页面。 我没有在大型数据集上测试解决方案，在150行的表上测试它，但也应该在更大的数据集上正常工作。

---

的jsfiddle

Answer 4

您是否尝试过下面的代码，我检查过它工作正常，您需要更新样式和脚本：您需要更新最新的样式和脚本以实现最新功能。 使用jquery数据表选择单个复选框