row(index).deselect() or rows({ selected: true }).deselect(); not working
row(index).deselect() or rows({ selected: true }).deselect(); not working

in DataTables 2
I am using,
- Included libraries:
- DataTables 2.2.0, Editor 2.4.0, Buttons 3.2.0, Responsive 3.0.3, Select 3.0.0
The following code does not deselect the row but the check box is cleared.
For the table option I have
` select: {
style: 'os',
selector: 'td:first-child'
},`
On click of the check box
` $('#invoiceTable tbody').on('click', '.selectPost', function (el) {
// var allData = invoiceTable.rows().data();
let data = invoiceTable.row($(this).closest('tr')).data();
let index = invoiceTable.row($(this).closest('tr')).index();
let bank = ltgObj('sale.controlID').val();
debugger;
if (bank === '') {
this.checked = false;
// invoiceTable.rows({ selected: true }).deselect();
invoiceTable.row(index).deselect();
ltgObj('sale.controlID').addClass('is-invalid');`
The class is updated and the checkbox is cleared but the row remains selected/highlighted and the footer shows one selected row. tried both rows and row option
Sorry but test case is difficult as no public access.
Thanks.
This question has an accepted answers - jump to answer
Answers
I also have serverSide: true, If that is relevant.
Can you try Select 3.1.0, the current release, please? I think what you are describing has been fixed.
Allan
Updated from builder
* Included libraries:
* DataTables 2.3.4, Editor 2.5.0, Buttons 3.2.5, Select 3.1.0, StateRestore 1.4.2
and jQuery v3.7.1
Same result I am afraid. The class is added to the bank select and the row checkbox cleared but row remains selected.
Paul.
I built a test case based on your code snippets:
https://live.datatables.net/herazaqi/1/edit
Using
invoiceTable.row(index).deselect()
seems to work as expected. Select a row then click on the Firstname column (I added the classselectPost
to this column.I made some guesses of what your solution is. Used the select checkbox option but you may be referring to a different checkbox. Server side processing shouldn't matter - the test case shows this. The test case uses DT 2.2.0 and Select 3.0.0. You may consider upgrading to the latest versions.
Please update the test case to replicate the issue or post a link to a test case showing the problem so we can help debug.
Kevin
Looks like you two made some posts while I was creating the test case
Kevin
Thanks for reply. The test case is not quite the same. I am trying to clear the row after it has been selected with the same click. Ie click the checkbox but if bank condition false then clear the select. Your example clears with a separate click.
Does that make sense ?
Is the problem caused because I am using
For the checkbox and not render.select(), ?
That's why we ask for a test case to understand your specific code flow. I updated the test case:
https://live.datatables.net/herazaqi/4/edit
I added the
select
anddeselect
events so you can see the order of the events. You can see your click event fires before theselect
so you are deselecting the row before the Select extension event fires and selects the row.One option is to move your code into the
select
event or use setTimeout() to delay the use ofrow().deselect()
. Using theselect
event is probably better but here is an example with setTimeout():https://live.datatables.net/fivodiza/1/edit
Kevin