Флажки Jquery DataTable

Question

Я использую jquery datatable с двумя столбцами флажков с флажком checkall для каждого столбца в заголовке таблицы.Я перебираю все флажки в datatable для каждого события изменения в флажке, чтобы убедиться, что флажок checkAll установлен / снят, что приводит к задержке, когда пользователь проверяет флажок.

Ниже приведен фрагмент кода.Пожалуйста, дайте мне знать, если есть другой способ сделать это, чтобы улучшить производительность.

ntfcTable.$('.ntfcInd')
            .change(
                    function() {
                        let counterNtfcCh = 0;
                        for (let i = 0; i < ntfcTableNodes.length; i++) {
                            if (ntfcTable.$('input[type="checkbox"][id="ntfcInd[' + i + ']"]').is(":checked") === true) {
                                counterNtfcCh++;
                            }
                        }
                        counterNtfcCh === ntfcTableNodes.length ? ntfcCheckAll.prop("checked", true)
                                : ntfcCheckAll.prop("checked", false);
                        checkBoxState = true;
                    });

Answer 1

Вместо того, чтобы циклически проверять флажки, вы можете просто проверить длину отмеченных флажков следующим образом:

alert($('input[type="checkbox"]:checked').length);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" name="vehicle" value="Bike"> I have a bike<br>
  <input type="checkbox" name="vehicle" value="Car" checked> I have a car<br><input type="checkbox" name="vehicle" value="Bike"> I have a bike<br>
  <input type="checkbox" name="vehicle" value="Car" checked> I have a car<br><input type="checkbox" name="vehicle" value="Bike"> I have a bike<br>
  <input type="checkbox" name="vehicle" value="Car" checked> I have a car<br><input type="checkbox" name="vehicle" value="Bike"> I have a bike<br>
  <input type="checkbox" name="vehicle" value="Car" checked> I have a car<br><input type="checkbox" name="vehicle" value="Bike"> I have a bike<br>
  <input type="checkbox" name="vehicle" value="Car" checked> I have a car<br>

Или для вашего случая это так:

if(ntfcTable.$('input[type="checkbox"]:checked').length == ntfcTableNodes.length) 

Answer 2

Несмотря на то, что вопрос помечен как «отвеченный» для тех, кто может столкнуться с той же проблемой, решение, для которого OP запросил, в основном, сводится к одной приятной и аккуратной строчке:

const ifAllChecked = col => dataTable.rows().nodes().toArray().every(row => $(row).find(`td:eq(${col}) [type="checkbox"]`).is(':checked'));

Ниже приводится краткое описание ДЕМО того, как это можно сделать:

//define source data
const srcData = [
	{city: 'Kyiv', visited: true, enjoyed: true},
	{city: 'Istanbul', visited: true, enjoyed: true},
	{city: 'Moscow', visited: true, enjoyed: false},
	{city: 'Nicosia', visited: true, enjoyed: true},
	{city: 'New York', visited: false, enjoyed: false},
	{city: 'Cairo', visited: true, enjoyed: true}
];
//define datatables object
const dataTable = $('#mytable').DataTable({
  sDom: 'tp',
  pageLength: 3,
  data: srcData,
  columns: [
    {title: 'city', data: 'city'},
    {
      title: 'visited',
      data: 'visited',
      render: (data, type, row, meta) => `<input type="checkbox" colindex="${meta.col}" ${data ? 'checked' : ''} style="float:right;margin-right:28px" class="regularchckbx"></input>`
    },
    {
      title: 'enjoyed',
      data: 'enjoyed',
      render: (data, type, row, meta) => `<input type="checkbox" colindex="${meta.col}" ${data ? 'checked' : ''} style="float:right;margin-right:28px" class="regularchckbx"></input>`
    },
  ]
});
//essential part of the solution OP was looking for
const ifAllChecked = col => dataTable.rows().nodes().toArray().every(row => $(row).find(`td:eq(${col}) [type="checkbox"]`).is(':checked'));
//put 'check all' checkboxes into header
$(dataTable.columns([1,2]).header()).append(`<input type="checkbox" class="allchecked" style="float:right;margin-right:20px"></input>`);
//set initial header checkboxes state
[1, 2].forEach( col => dataTable.column(col).header().querySelector('[type="checkbox"]').checked = ifAllChecked(col));
//listen for changes and adjust 'check-alls'
$('#mytable').on('click', '.regularchckbx', function(){
	dataTable.column($(this).attr('colindex')).header().querySelector('[type="checkbox"]').checked = ifAllChecked($(this).attr('colindex'));
});
//check/uncheck all
$('.allchecked').on('click', function(){
	let col = dataTable.column($(this).closest('th')).index();
	let state = this.checked;
	dataTable.rows().every(function(){
		this.node().querySelector(`[colindex="${col}"]`).checked = state;
	});
});

<!doctype html>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
    <script type="application/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script type="application/javascript" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
  </head>
  <body>
    <table id="mytable"></table>
  </body>
</html>

Answer 3

Надеюсь, это поможет.Я предполагаю, что ntfcTable является объектом jQuery.Вам не нужно искать ntfcTable каждый раз, когда вы просматриваете таблицу.Первая строка захватит все флажки в таблице.У объектов jQuery есть свойство length, поэтому они могут быть зациклены.Это должно работать, пока вы не добавляете и не убираете флажки на лету.

var ntfcTableNodes = ntfcTable.$('input[type="checkbox"]');
ntfcTableNodes.change(
                    function() {
                        let counterNtfcCh = 0;

                        for (let i = 0; i < ntfcTableNodes.length; i++) {
                            let checkNode = ntfcTableNodes[i];
                            if ( checkNode.is(":checked") === true ) {counterNtfcCh++;}
                        }
                        counterNtfcCh === ntfcTableNodes.length ? ntfcCheckAll.prop("checked", true)
                                : ntfcCheckAll.prop("checked", false);
                        checkBoxState = true;
                    });