Плагин DataTables / Checkboxes - Как вернуть количество проверенных флажков - PullRequest
Новая
       19

Плагин DataTables / Checkboxes - Как вернуть количество проверенных флажков

0 голосов
/ 20 сентября 2019

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

Библиотека: https://datatables.net/

Плагин: https://www.gyrocode.com/projects/jquery-datatables-checkboxes/

HTML: 

<table id="myTable" width="100%">
    <thead>
        <tr>
            <th></th>
            <th>ID</th>
            <th>Name</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td></td>
            <td>01</td>
            <td>Alpha</td>
        </tr>
        <tr>
            <td></td>
            <td>02</td>
            <td>Bravo</td>
        </tr>
        <tr>
            <td></td>
            <td>03</td>
            <td>Charlie</td>
        </tr>
        <tr>
            <td></td>
            <td>04</td>
            <td>Delta</td>
        </tr>
        <tr>
            <td></td>
            <td>05</td>
            <td>Echo</td>
        </tr>
    </tbody>
</table>

JS: 

resultsTable = $("#myTable").DataTable({
    "columnDefs": [
        {
            "targets" : 0,
            "checkboxes": true,
            "orderable": false
        }
    ],
    "select": {
        "style": "multi"
    },
    "order": [[3, 'asc']]
});

Таблица отображается хорошо, с флажками в теле и thead.Я могу написать простую функцию onChange вне инициализации DataTable, но она обнаруживает только флажки, отмеченные или не отмеченные на видимой странице таблицы.

resultsTable.on('change', 'input[type="checkbox"]', function(e){
    var numChecked = $("#results-table").find("input[type='checkbox']:checked").length;
    console.log(numChecked);
});

Как или ГДЕ можно написать функцию, которая будет срабатывать при изменении флажка, а затем возвращать количество ОБЩИХ флажков в проверенной таблице?

1 Ответ

0 голосов
/ 20 сентября 2019

Почти везде, я считаю.До тех пор, пока вы регистрируете событие в своем переключателе флажков (щелчок, изменение и т. Д.)

JS: 

var selectedBoxes = []

$('body').on('click', "#results-table input[type='checkbox']", function(e) {
  if(e.target.checked){
    // add `e.target.value` to selectedBoxes
  }
  return selectedBoxes.length;
})

Поскольку изменение страницы с таблицами данных не обновляет страницу - массив selectedBoxes должен хранитьего состояние при переключении страниц с данными.Удовлетворит ли что-то подобное выше ваших потребностей?Извините, если мои навыки работы с JS немного заржавели, а код не с нуля с точки зрения стиля:)

...