Adding a checkbox header in datatable

agarn

Adding a checkbox header in datatable and once all of them are selected/unselected, send ids to DB. People want to unselect 1-2 records after select all checkbox is clicked.
I am able to select all checkboxes but how to fetch ids?
http://live.datatables.net/sodunewu/1/edit

kthorngren

I'm not sure what your goals are but you aren't taking advantage of the Select Extension and its APIs like this example:
https://datatables.net/extensions/select/examples/api/get.html

You also included the configuration, in column 7, for the Gyrocode checkboxes plugin but you haven't included the library so the config is not helping.

When you check the Select All checkbox and go to page 2 the rows aren't checked. This is because the rows aren't in the DOM. Only the page being displayed is in the DOM at the time of checking Select All.

This can be re-written to use the Select API and/or the Gyrocode plugin to make things easier. You can use the rowId option to configure the column contaiing the row ID then use row().id() or rows().ids() to get the row IDs. Using the API example you can get the selected row IDs with table.rows( { selected: true } ).ids();.

Kevin

agarn

Hi Kevin,

Thanks a lot for responding and I have a few questions for you:
1) Your example shows that a user would have to select each row individually. In real time application my table has 500 rows. Selecting each individual row wouldn't be feasible. Can I use select extension to select all the rows at once?
I am trying to use
oTable.columns([7]).select();
but that changes column on all pages to blue instead of marking checkbox as checked.

2) I am using pagination in datatable to display only 25 records out of 500 on each page. Will select()/deselect() API methods work on all pages?

Nikita

kthorngren

You will want to select by rows. Try oTable.rows().select();.

EDIT: Here is an example:
https://datatables.net/extensions/select/examples/api/select.html

Kevin

agarn

Hi Kevin,

I tried using the example that you have shared but row selection is limited to first page only.
https://datatables.net/extensions/select/examples/api/select.html

Thanks,
Nikita

kthorngren

Using Select All in the example selects all rows on all pages. Are you seeing something different? Maybe you can update your example to show the problem.

Kevin

agarn

Hi Kevin,

The test example that I posted is a bit different in terms of data being fetched by SQL server. I am using server-side processing in my datatable.
"bServerSide": true,

Is that the reason the select extension doesn't work on the next page? If so, do I have any alternatives?

Thanks,
Nikita

kthorngren

Yes because the only rows in the client is the page being displayed. You may be interested in this example which shows how to retain the selected rows when going to other pages:
https://datatables.net/examples/server_side/select_rows.html

That doesn't solve your problem but I think you can just add another conditional in the if statement on line 9. Check to see if the select all checkbox is selected, something like this:

if ( $.inArray(data.DT_RowId, selected) !== -1 || $('#select-all').prop('checked') ) {

Change #select-all to match your select all checkbox.

Kevin

agarn

Thanks Kevin. Got it.