We are pleased to introduce jQuery DataTables Checkboxes extension that makes it easy to add a checkbox columns to a table.
Example
Example below shows a data table using client-side processing mode where data is received from the server using Ajax.
Please visit dedicated jQuery DataTables Checkboxes page to download the code, view examples and documentation.
Wow! Thank you very much for this article ! Handling checkbox in server side datatable is always tricky, and your solution is really easy and clear.
Than you for the very helpful tutorial, the best I found on that topic. I’ve a question though, regarding Ajax call on form submit .
I’m trying to pass the call on form submit like below, but it always gets skipped,
$.ajax({ type: "POST", url: "delete.php", data: {ids: rowId, uid: uid}, success: function() { alert(done); }, error: function() { alert("something went wrong"); }, async: false });I even tried placing the above code within
table.rowsfunction since therowIdis not available outside, same result, the call is ignored.Use the code below to retrieve and send IDs of selected row via Ajax. See this jsFiddle for code and demonstration.
var data = []; // Iterate over all selected rows table.rows({ selected: true }).every(function(index){ // Get and store row ID data.push(this.data()[0]); }); // Submit data via Ajax $.ajax({ type: "POST", url: "delete.php", data: data }); // Prevent actual form submission e.preventDefault();Thanks for the post. It is really the easiest way to understand how datatables work with select plugin and its API.
Awesome example. The only problem I’m having is that the first time the
id[](array of hidden inputs) gets items duplicated.I noticed this and then did a
e.preventDefault()andconsole.log(id)and did multiple form submits. From 2nd to nth submit, items were not duplicated.Thank you very helpful, but I have a problem. I’m working in the server-side mode and when I change the page I lose the selection.
Any idea?
Thanks for pointing that out, I recently discovered that as well, see this post. Unfortunately Select extension doesn’t retain selection on page changes while in server-side processing mode. For a solution that works in server-side processing mode please see jQuery DataTables – Row selection using checkboxes article. In the meantime I will work on the solution to make Seleсt extension retain selection between page changes.
Thank you for the insight. 😉
Did you work on that problem? I am facing the same problem
With jQuery DataTables Checkboxes plug-in selection is retained between page changes, please see Server-side processing example for a demonstration.
Hi everyone I have 2 problems.
First is that for me the
selectanddeselectis not a function:// Handle click on "Select all" control $('#example thead').on('click', 'input[type="checkbox"]', function(e) { if (this.checked) { table.rows({ page: 'current' }).select(); } else { table.rows({ page: 'current' }).deselect(); } e.stopPropagation(); });Second:
I would like to ask, how can I get only the salary data for the selected rows? Only the amount, the value without the column and ID information.
Make sure you include Select extension along with jQuery DataTables (http://cdn.datatables.net/s/dt/dt-1.10.10,se-1.1.0/datatables.min.jsand http://cdn.datatables.net/s/dt/dt-1.10.10,se-1.1.0/datatables.min.css).
I’ve got:
http://code.jquery.com/jquery-latest.min.js
http://cdn.datatables.net/1.10.11/js/jquery.dataTables.js
http://cdn.datatables.net/1.10.11/css/jquery.dataTables.css
And it doesn’t work. But your previous version of thes arcicle : http://www.gyrocode.com/articles/jquery-datatables-checkboxes/ works just great.
Could you answer my secound question?
How can I get only the salary data for the selected rows? Only the amount, the value without the column and ID information.
You’re not including Select extension, that’s why
select()doesn’t work. Previous article didn’t use Select extension. To get data for salary only, you can use something liketable.column(6, { selected: true }).data().Yep. I had to add from the select section from this link: https://datatables.net/download/release
Thanks for the help.
Hey, I took your base .js and added server side support. You can see the diff here:https://github.com/rinkside/jquery-datatables-checkboxes/commit/2c5b61cf03422690a9728757299df4e0551bd06a
Brian, thanks for your comment, I will take a look at the code. However my plug-in worked fine in server-side processing mode as well.
In my tests on server side, if you clicked “select all”, it would only select all for that page. If you paged to the next page, those wouldn’t be selected. For my purpose, the select all needed to select all rows on all pages.
There are two aspects of your code which don’t appear to work with server side. Brian has covered off the first, which is being able to select all rows, not just those visible when you click on the Select All option. His amendment works, and I have combined your 1.0.1 with his amendment and I can get this to work, whilst retaining the change you made to 1.0.1.
But the second problem remains, and it is this. If I call up the first 10 records, and select 2 of them, the “select-info” div is populated with “2 records selected”. But when I go to the second page (ie records 11-20), the select-info div is now blank again, although if I navigate back to records 1-10, the two I selected are still marked as selected. But if you want to select multiple records over multiple screens this is a big problem as you have no idea how many you have selected. Furthermore, If you click on the “Select All” the count in the info-select is only the number of records on the page when you clocked “Select All”.
Your otherwise wonderful solution just needs tweaking to enable this functionality to work for serverSide, as it clearly does when using non serverSide JSON data.
Bill, thanks for your detailed comment. I will review the code and will get back to you.
Hi Micheal,
I just wanted to thank you very much for this code and this article you have written. I really love using jQuery DataTables and this enhancement will make it a better library to use!
Regards,
James
Thanks, James!
Hi,
Great addon to DataTables. I would like to know how I can mark some checkboxes as selected when the page loads?
Regards,
Frederik
Frederik, that is a really good question. You may need to provide a state of each checkbox in a separate data field. See this example for demonstration on how each checkbox could be selected based on data in another field. Please note that I have updated the add-on to 1.0.1 in order to make this possible in
initCompletecallback. I will think on how this could be simplified further.This is perfect! Works just as I wanted it to. Thanks a lot for the help! 🙂
This is not working for me. Can you upload complete source code with table..
Please visit dedicated jQuery DataTables Checkboxes page for more examples and documentation.
it beter to use the code in jfiddle (http://jsfiddle.net/gyrocode/5bmx7ejw/)
how to combine with bootstrap?
See Bootstrap 3 styling example on DataTables website.
Hi how about enabling and disabling submit button according to checkboxes status? So when I didn’t select any submit button will be disabled and when I select atleast one, it will be enabled. Can it be done?
How set checkboxes checked by default on load when using server-side processing mode?
See this thread and the example mentioned.
It doesn’t work when using server-side processing mode. Checkboxes only in first page are checked.
Due to complexity involved selecting rows on all pages using selectAllPages option in server-side processing mode is currently not possible, please see Known Limitations.
$p=I('post.start'); $draw = I('post.draw'); $length=I('post.length'); $count=$m->count(); $list=$m->limit($p.','.$length)->order('id desc')->select();A page has ten items.
How can I see the script.php code?
There is no
script.php. You need to write a script in any language of your choice to process the selected checkboxes.When I select submit button I want to see all data in selected row, not only id number. Example: “1”,”Tiger Nixon”,”System Architect”,”Edinburgh”, “5421”, “2011/04/25″,”$320,800” … Can it be done? Thanks…
If the data is read-only and is coming from the server, you can retrieve the rest of the fields by using ID only. Otherwise if you want to allow editing of the fields, you need to use
inputelements, something like in this example.How to combine your checkbox datatables with this http://www.daterangepicker.com/ ?
My row is selected/deselected when I click anywhere on the row. But I have two columns that have hyperlinks.
How to avoid to modify row selection when we click on a hyperlink from these cells ?
my solution is not working when we have the dataTables.select.js Extension.
Can someone help me to find a solution to not update row selection when we click on a cell that have a link inside ?
the final solution is to update the dataTables.select.js file and add the below code in the enableMouseSelection feature inside the .on( ‘click.dtSelect’, selector, function ( e ) {..}
// Ignore clicks on hyperlink
if (e.target.tagName == “A”) {
return;
}
Updating the plug-in is always a bad idea. Use something like shown below to prevent click event to propagate to parent elements.
$('#example tbody').on('click', 'a', function(e){ e.stopPropagation(); });Hi all! Thanks for plugin, but it is not worked, when data is array of objects (in your example – data is array of array) See https://jsfiddle.net/snqw56dw/273/ (sorry for errors on page render, but https://github.com/gyrocode/jquery-datatables-checkboxes/issues/3 is reproduced successfully – check some rows on first page, switch to next page – result – all checkboxes are checked) Please, make universal plugin
Denis, you need to specify data property names with
columns.dataoptions, see jsfiddle.net/snqw56dw/274/.Great thanks, you’re right! Main fix is to map column with checkbox to row id:
columns: [ {data : 'id'}, ... ], select: { style: 'multi' }, columnDefs: [ { targets: 0, checkboxes: { selectRow: true } }, ... ]Thanks to quick answer! Your plugin is universal, my bad 🙂
Рад помочь!
Btw, does plugin possible can save all checked data (not only id) ? Is exists more easy way than
var datatable = $("table").DataTable({
....
createdRow: function (row, data, index) {
window.loadedData[data.id] = data;
},
...
});
var allCheckedData = lodash.map(datatable.column(0).checkboxes.selected(), function(id){return window.loadedData[id]})
П.С. Благодарю за помощь, Михаил!
Can you please provide server-side selection examples? I have problem if i using
checkboxesinsidecolumnDefs, the checkboxes appear but the ‘selected rows’ not changing when the rows are selected, always only showed 1 row selected.Please see Examples page.
OMG i didn’t realize if those checkboxes used an ID to identify the uniqueness of each row . and hey thanks so so much for this awesome plugin 🙂 .
also is it possible to use the saved selected rows with Print/PDF plugin? im trying to, but it doesn’t load the selected row from another page to show on exported datas. any help would be appreciated
Nice plugin!
BTW can i see all my selected rows on serverside, all-in one page? thanks
Hi,
I like your plugin, but I have an issue when having quite a few rows (1000 or so). When using the “select all”, it takes too long for all the checkboxes to be checked. Is this a known issue, and/or can it be solved?
Yes, it’s not yet very optimized yet. You can try to implement row selection yourself, see this article. I will try to work on optimization in the near future.