checkbox column checking from an external function.

transporter_ii

Poked around searching and nothing is jumping out at me. I'm downloading json using Alpine.js and passing the data to a DataTables constructor, which builds the table just fine. I'm adding a checkbox column dynamically. I'm just looking for some directions I might head in here, not really actual code.

What are some options if I wanted to get another array of data, loop it, and auto-check the checkbox in the DataTable if the value exists in the DataTable?

So far, one option I have thought of is to do it all server side, adding a column that could be used with a rowcallback function to check it if needs to be checked. Then download this and let it check the checkboxes when it builds (rebuilds) the table.

But what about downloading the array of data and looping it client side to search an already drawn table?

Like I said, I did do some research on this before asking, but nothing really jumped out at me as the way to proceed. I thought maybe someone might have done something like this before that could get me headed in the right direction.

Thanks,

kthorngren

One option, if the downloaded array, contains the rowId then use that to fetch each row using the row-selector of string #ID. Use that row as the row parameter for cell().node() for the checkbox column. Then use jQuery or Javascript methods to check or uncheck the box as appropriate.

Another option is to use rows().every() with the row-selector as a function to see if the row matches the downloaded array. In the loop use cell().node() the same as above.

If you want to build a simple test case showing an example of your checkbox column and an example of the downloaded array then we can help with more specific suggestions.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

transporter_ii

Thanks. That kind of gives me some directions to head in, and was more useful than some of the things I pulled up while searching around for solutions.

transporter_ii

I did get this working by comparing two C# List<object> on the server. I added an "IsChecked" in the DataTable data json, and set this to true if my main list matched a value in the secondary list. This was very easy using LINQ.

I then used the rowcallback function in the DataTable to check for this bit and select the row if IsChecked = true. This went relatively quick and worked on pretty much the first try.

Note: I'm using the dataTables.select.js plugin.

What didn't work. This shows up high in the searches as a way to select a row using the rowcallback function:

"rowCallback": function (row, data, index) {

let isChecked = data.IsChecked;

if (isChecked) {
   $(row).find('input[type="checkbox"]').prop('checked', true);
   $(row).addClass('selected');
 }

},

This does indeed look like it works, but it doesn't actually "select" the row, it just looks selected.

What finally worked was this:

"rowCallback": function (row, data, index) {

let isChecked = data.IsChecked;

if (isChecked) {   
    var api = this.api();
    // console.log(api.rows(index).data());
    api.rows(index).select();  
}    

},

It may not be the best way, but it does work. Getting an array of selected items like this:

let tblArry = table.DataTable().rows({ selected: true }).data().toArray();

will actually work. It will not work on my first example, because it doesn't see anything as being actually selected, despite the checkbox being checked.

Just leaving this here because the non-working example seems to show up more in searches.

kthorngren

That is true. To select a row using the Select extension the user will need to click the defined element(s) or the row().select() or rows().select() APIs will need to be used. Just adding the class select doesn't trigger the Select extension to select the row.

Kevin