I'm using Tabulator.js v4.2.7 and I have a checkbox column to select rows. This column header has a checkbox to select/deselect all rows.
This is working fine. But after clicking header checkbox all rows will be selected and if I uncheck any row checkbox then header checkbox is not getting unchecked.
Example, if I have 5 rows and if I click header checkbox the all 5 rows will be selected and now if I uncheck 2nd row checkbox remaining 4 rows will still be selected and header checkbox needs to be unchecked. But header checkbox is not getting unchecked.
Here is my code for checkbox column:
{
title: 'Select <br/> All <br/> <input type="checkbox" class="select-all-row" aria-label="select all rows" />',
field: 'IsSelected',
formatter: function(cell, formatterParams, onRendered) {
return '<input type="checkbox" class="select-row" aria-label="select this row" />';
},
width: 50,
headerSort: false,
headerFilter: false,
cssClass: 'text-center',
frozen: true,
tooltips: false,
resizable: false,
cellClick: function(e, cell) {
var $element = $(cell.getElement());
var $chkbox = $element.find('.select-row');
if (cell.getData().IsSelected) {
cell.getRow().deselect();
} else {
cell.getRow().select();
}
$chkbox.prop('checked', !cell.getData().IsSelected);
cell.getData().IsSelected = !cell.getData().IsSelected;
},
headerClick: function(e, column) {
if (column.getTable().getSelectedRows().length !== column.getTable().getDataCount()) {
$('.select-row,.select-all-row').prop('checked', true);
column.getTable().selectRow();
} else {
$('.select-row,.select-all-row').prop('checked', false);
column.getTable().deselectRow();
}
}
}
please assist on where I'm doing wrong.
Thanks,
Abdul
After analyzing for few hours I found where I was wrong. I resolved by setting the cell.getData().IsSelected
for all cells in the column on header click and also added logic to uncheck header checkbox in cell click based on count. Also I have replaced Jquery code with vanilla javascript Here is the answer:
Here is the working snippet
var tabledata = [{ id: 1, name: "Oli Bob", progress: 12, location: "United Kingdom", gender: "male", rating: 1, col: "red", dob: "14/04/1984", car: 1, lucky_no: 5, lorem: "Lorem ipsum dolor sit amet, elit consectetur adipisicing " }, { id: 2, name: "Mary May", progress: 1, location: "Germany", gender: "female", rating: 2, col: "blue", dob: "14/05/1982", car: true, lucky_no: 10, lorem: "Lorem ipsum dolor sit amet, elit consectetur adipisicing " }, { id: 3, name: "Christine Lobowski", progress: 42, location: "France", gender: "female", rating: 0, col: "green", dob: "22/05/1982", car: "true", lucky_no: 12, lorem: "Lorem ipsum dolor sit amet, elit consectetur adipisicing " }, { id: 4, name: "Brendon Philips", progress: 100, location: "USA", gender: "male", rating: 1, col: "orange", dob: "01/08/1980", car: false, lucky_no: 18, lorem: "Lorem ipsum dolor sit amet, elit consectetur adipisicing " }, { id: 5, name: "Margret Marmajuke", progress: 16, location: "Canada", gender: "female", rating: 5, col: "yellow", dob: "31/01/1999", car: false, lucky_no: 33, lorem: "Lorem ipsum dolor sit amet, elit consectetur adipisicing " }, { id: 6, name: "Frank Harbours", progress: 38, location: "Russia", gender: "male", rating: 4, col: "red", dob: "12/05/1966", car: 1, lucky_no: 2, lorem: "Lorem ipsum dolor sit amet, elit consectetur adipisicing " }, { id: 7, name: "Jamie Newhart", progress: 23, location: "India", gender: "male", rating: 3, col: "green", dob: "14/05/1985", car: true, lucky_no: 63, lorem: "Lorem ipsum dolor sit amet, elit consectetur adipisicing " }, { id: 8, name: "Gemma Jane", progress: 60, location: "China", gender: "female", rating: 0, col: "red", dob: "22/05/1982", car: "true", lucky_no: 72, lorem: "Lorem ipsum dolor sit amet, elit consectetur adipisicing " }, { id: 9, name: "Emily Sykes", progress: 42, location: "South Korea", gender: "female", rating: 1, col: "maroon", dob: "11/11/1970", car: false, lucky_no: 44, lorem: "Lorem ipsum dolor sit amet, elit consectetur adipisicing " }, { id: 10, name: "James Newman", progress: 73, location: "Japan", gender: "male", rating: 5, col: "red", dob: "22/03/1998", car: false, lucky_no: 9, lorem: "Lorem ipsum dolor sit amet, elit consectetur adipisicing " }, { id: 11, name: "Oli Bob", progress: 12, location: "United Kingdom", gender: "male", rating: 1, col: "red", dob: "14/04/1984", car: 1, lucky_no: 5, lorem: "Lorem ipsum dolor sit amet, elit consectetur adipisicing " }, { id: 12, name: "Mary May", progress: 1, location: "Germany", gender: "female", rating: 2, col: "blue", dob: "14/05/1982", car: true, lucky_no: 10, lorem: "Lorem ipsum dolor sit amet, elit consectetur adipisicing " }, { id: 13, name: "Christine Lobowski", progress: 42, location: "France", gender: "female", rating: 0, col: "green", dob: "22/05/1982", car: "true", lucky_no: 12, lorem: "Lorem ipsum dolor sit amet, elit consectetur adipisicing " }, { id: 14, name: "Brendon Philips", progress: 100, location: "USA", gender: "male", rating: 1, col: "orange", dob: "01/08/1980", car: false, lucky_no: 18, lorem: "Lorem ipsum dolor sit amet, elit consectetur adipisicing " }, { id: 15, name: "Margret Marmajuke", progress: 16, location: "Canada", gender: "female", rating: 5, col: "yellow", dob: "31/01/1999", car: false, lucky_no: 33, lorem: "Lorem ipsum dolor sit amet, elit consectetur adipisicing " }, { id: 16, name: "Frank Harbours", progress: 38, location: "Russia", gender: "male", rating: 4, col: "red", dob: "12/05/1966", car: 1, lucky_no: 2, lorem: "Lorem ipsum dolor sit amet, elit consectetur adipisicing " }, { id: 17, name: "Jamie Newhart", progress: 23, location: "India", gender: "male", rating: 3, col: "green", dob: "14/05/1985", car: true, lucky_no: 63, lorem: "Lorem ipsum dolor sit amet, elit consectetur adipisicing " }, { id: 18, name: "Gemma Jane", progress: 60, location: "China", gender: "female", rating: 0, col: "red", dob: "22/05/1982", car: "true", lucky_no: 72, lorem: "Lorem ipsum dolor sit amet, elit consectetur adipisicing " }, { id: 19, name: "Emily Sykes", progress: 42, location: "South Korea", gender: "female", rating: 1, col: "maroon", dob: "11/11/1970", car: false, lucky_no: 44, lorem: "Lorem ipsum dolor sit amet, elit consectetur adipisicing " }, { id: 20, name: "James Newman", progress: 73, location: "Japan", gender: "male", rating: 5, col: "red", dob: "22/03/1998", car: false, lucky_no: 9, lorem: "Lorem ipsum dolor sit amet, elit consectetur adipisicing " }, { id: 21, name: "Oli Bob", progress: 12, location: "United Kingdom", gender: "male", rating: 1, col: "red", dob: "14/04/1984", car: 1, lucky_no: 5, lorem: "Lorem ipsum dolor sit amet, elit consectetur adipisicing " }, { id: 22, name: "Mary May", progress: 1, location: "Germany", gender: "female", rating: 2, col: "blue", dob: "14/05/1982", car: true, lucky_no: 10, lorem: "Lorem ipsum dolor sit amet, elit consectetur adipisicing " }, { id: 23, name: "Christine Lobowski", progress: 42, location: "France", gender: "female", rating: 0, col: "green", dob: "22/05/1982", car: "true", lucky_no: 12, lorem: "Lorem ipsum dolor sit amet, elit consectetur adipisicing " }, { id: 24, name: "Brendon Philips", progress: 100, location: "USA", gender: "male", rating: 1, col: "orange", dob: "01/08/1980", car: false, lucky_no: 18, lorem: "Lorem ipsum dolor sit amet, elit consectetur adipisicing " }, { id: 25, name: "Margret Marmajuke", progress: 16, location: "Canada", gender: "female", rating: 5, col: "yellow", dob: "31/01/1999", car: false, lucky_no: 33, lorem: "Lorem ipsum dolor sit amet, elit consectetur adipisicing " }, { id: 26, name: "Frank Harbours", progress: 38, location: "Russia", gender: "male", rating: 4, col: "red", dob: "12/05/1966", car: 1, lucky_no: 2, lorem: "Lorem ipsum dolor sit amet, elit consectetur adipisicing " }, { id: 27, name: "Jamie Newhart", progress: 23, location: "India", gender: "male", rating: 3, col: "green", dob: "14/05/1985", car: true, lucky_no: 63, lorem: "Lorem ipsum dolor sit amet, elit consectetur adipisicing " }, { id: 28, name: "Gemma Jane", progress: 60, location: "China", gender: "female", rating: 0, col: "red", dob: "22/05/1982", car: "true", lucky_no: 72, lorem: "Lorem ipsum dolor sit amet, elit consectetur adipisicing " }, { id: 29, name: "Emily Sykes", progress: 42, location: "South Korea", gender: "female", rating: 1, col: "maroon", dob: "11/11/1970", car: false, lucky_no: 44, lorem: "Lorem ipsum dolor sit amet, elit consectetur adipisicing " }, { id: 30, name: "James Newman", progress: 73, location: "Japan", gender: "male", rating: 5, col: "red", dob: "22/03/1998", car: false, lucky_no: 9, lorem: "Lorem ipsum dolor sit amet, elit consectetur adipisicing " }, { id: 31, name: "Oli Bob", progress: 12, location: "United Kingdom", gender: "male", rating: 1, col: "red", dob: "14/04/1984", car: 1, lucky_no: 5, lorem: "Lorem ipsum dolor sit amet, elit consectetur adipisicing " }, { id: 32, name: "Mary May", progress: 1, location: "Germany", gender: "female", rating: 2, col: "blue", dob: "14/05/1982", car: true, lucky_no: 10, lorem: "Lorem ipsum dolor sit amet, elit consectetur adipisicing " }, { id: 33, name: "Christine Lobowski", progress: 42, location: "France", gender: "female", rating: 0, col: "green", dob: "22/05/1982", car: "true", lucky_no: 12, lorem: "Lorem ipsum dolor sit amet, elit consectetur adipisicing " }, { id: 34, name: "Brendon Philips", progress: 100, location: "USA", gender: "male", rating: 1, col: "orange", dob: "01/08/1980", car: false, lucky_no: 18, lorem: "Lorem ipsum dolor sit amet, elit consectetur adipisicing " }, { id: 35, name: "Margret Marmajuke", progress: 16, location: "Canada", gender: "female", rating: 5, col: "yellow", dob: "31/01/1999", car: false, lucky_no: 33, lorem: "Lorem ipsum dolor sit amet, elit consectetur adipisicing " }, { id: 36, name: "Frank Harbours", progress: 38, location: "Russia", gender: "male", rating: 4, col: "red", dob: "12/05/1966", car: 1, lucky_no: 2, lorem: "Lorem ipsum dolor sit amet, elit consectetur adipisicing " }, { id: 37, name: "Jamie Newhart", progress: 23, location: "India", gender: "male", rating: 3, col: "green", dob: "14/05/1985", car: true, lucky_no: 63, lorem: "Lorem ipsum dolor sit amet, elit consectetur adipisicing " }, { id: 38, name: "Gemma Jane", progress: 60, location: "China", gender: "female", rating: 0, col: "red", dob: "22/05/1982", car: "true", lucky_no: 72, lorem: "Lorem ipsum dolor sit amet, elit consectetur adipisicing " }, { id: 39, name: "Emily Sykes", progress: 42, location: "South Korea", gender: "female", rating: 1, col: "maroon", dob: "11/11/1970", car: false, lucky_no: 44, lorem: "Lorem ipsum dolor sit amet, elit consectetur adipisicing " }, { id: 40, name: "James Newman", progress: 73, location: "Japan", gender: "male", rating: 5, col: "red", dob: "22/03/1998", car: false, lucky_no: 9, lorem: "Lorem ipsum dolor sit amet, elit consectetur adipisicing " }, { id: 41, name: "Oli Bob", progress: 12, location: "United Kingdom", gender: "male", rating: 1, col: "red", dob: "14/04/1984", car: 1, lucky_no: 5, lorem: "Lorem ipsum dolor sit amet, elit consectetur adipisicing " }, { id: 42, name: "Mary May", progress: 1, location: "Germany", gender: "female", rating: 2, col: "blue", dob: "14/05/1982", car: true, lucky_no: 10, lorem: "Lorem ipsum dolor sit amet, elit consectetur adipisicing " }, { id: 43, name: "Christine Lobowski", progress: 42, location: "France", gender: "female", rating: 0, col: "green", dob: "22/05/1982", car: "true", lucky_no: 12, lorem: "Lorem ipsum dolor sit amet, elit consectetur adipisicing " }, { id: 44, name: "Brendon Philips", progress: 100, location: "USA", gender: "male", rating: 1, col: "orange", dob: "01/08/1980", car: false, lucky_no: 18, lorem: "Lorem ipsum dolor sit amet, elit consectetur adipisicing " }, { id: 45, name: "Margret Marmajuke", progress: 16, location: "Canada", gender: "female", rating: 5, col: "yellow", dob: "31/01/1999", car: false, lucky_no: 33, lorem: "Lorem ipsum dolor sit amet, elit consectetur adipisicing " }, { id: 46, name: "Frank Harbours", progress: 38, location: "Russia", gender: "male", rating: 4, col: "red", dob: "12/05/1966", car: 1, lucky_no: 2, lorem: "Lorem ipsum dolor sit amet, elit consectetur adipisicing " }, { id: 47, name: "Jamie Newhart", progress: 23, location: "India", gender: "male", rating: 3, col: "green", dob: "14/05/1985", car: true, lucky_no: 63, lorem: "Lorem ipsum dolor sit amet, elit consectetur adipisicing " }, { id: 48, name: "Gemma Jane", progress: 60, location: "China", gender: "female", rating: 0, col: "red", dob: "22/05/1982", car: "true", lucky_no: 72, lorem: "Lorem ipsum dolor sit amet, elit consectetur adipisicing " }, { id: 49, name: "Emily Sykes", progress: 42, location: "South Korea", gender: "female", rating: 1, col: "maroon", dob: "11/11/1970", car: false, lucky_no: 44, lorem: "Lorem ipsum dolor sit amet, elit consectetur adipisicing " }, { id: 50, name: "James Newman", progress: 73, location: "Japan", gender: "male", rating: 5, col: "red", dob: "22/03/1998", car: false, lucky_no: 9, lorem: "Lorem ipsum dolor sit amet, elit consectetur adipisicing " }, ]; var table = new Tabulator("#example-table", { data: tabledata, columns: [{ title: 'Select <br/> All <br/> <input type="checkbox" class="select-all-row" aria-label="select all rows" />', field: 'IsSelected', formatter: function(cell, formatterParams, onRendered) { return '<input type="checkbox" class="select-row" aria-label="select this row" />'; }, width: 50, headerSort: false, headerFilter: false, cssClass: 'text-center', frozen: true, tooltips: false, resizable: false, cellClick: function(e, cell) { var element = cell.getElement(); var chkbox = element.querySelector('.select-row'); if (cell.getData().IsSelected) { cell.getRow().deselect(); document.querySelector('.select-all-row').checked = false; } else { cell.getRow().select(); if (cell.getColumn().getTable().getSelectedRows().length === cell.getColumn().getTable().getDataCount()) { document.querySelector('.select-all-row').checked = true; } } chkbox.checked = !cell.getData().IsSelected; cell.getData().IsSelected = !cell.getData().IsSelected; }, headerClick: function(e, column) { if (column.getTable().getSelectedRows().length !== column.getTable().getDataCount()) { document.querySelectorAll('.select-row,.select-all-row').forEach(cb => cb.checked = true); column.getTable().selectRow(); } else { document.querySelectorAll('.select-row,.select-all-row').forEach(cb => cb.checked = false); column.getTable().deselectRow(); } column.getCells().forEach(cell => cell.getData().IsSelected = !cell.getData().IsSelected); } }, { title: "Name", field: "name", width: 200 }, { title: "Progress", field: "progress", width: 100, align: "right", sorter: "number" }, { title: "Gender", field: "gender", width: 100 }, { title: "Rating", field: "rating", align: "center", width: 80 }, ], });
<link href="https://cdnjs.cloudflare.com/ajax/libs/tabulator/4.2.7/css/tabulator.min.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/tabulator/4.2.7/js/tabulator.min.js"></script> <div id="example-table"></div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.