How to get Selected Rows in the Datatable that uses ajax call

chandhu

I am using a jQuery datatable and uses ajax call to load data into the table. I am able to select the rows by clicking on the rows of the datatable. But on a button click, i am not able to get the selected rows. The code is shown below

var excludeTable = LoadTableExclude();

$('#btnRight').click(function () {
                var selectedRows = excludeTable.rows({ selected: true }).data().toArray(); // here i am getting "undefined"
                var ids = selectedRows.map(row => row.siteCode); // siteCode is the id value of the data object
                
                if (ids.length === 0) {
                    alert("Please select rows to move.");
                    return;
                }
}); // I always get "Please select row to move" message.

How to get selected rows in the button click ???

Edited by Allan - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

rf1234

var selectedRows = excludeTable.rows({ selected: true }).data().toArray(); // here i am getting "undefined"

The reason is probably that your Data Table doesn't exist because it wasn't initialized correctly. You may also have not installed the "select" extension.

Here is something similar from my own code that works like a charm:

action: function ( e, dt, button, config ) {
 var selected = dt.rows( {selected: true} ).data().toArray();
 var contractIdArray = selected.map(function(a){return a.contract.id;});
 ....

https://datatables.net/extensions/select/

Another reason might be that you attach the event handler to '#btnRight' prior to finalizing data table initialization. If '#btnRight' is a data tables button (see buttons extension) it won't exist before initialization will be finished.

kthorngren

var excludeTable = LoadTableExclude();

What is returned from the LoadTableExclude()? Looks it is expected to be the Datatable API but the error indicates otherwise.

If you still need help please post a test case replicating the error so we can understand your code flow to help debug.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

chandhu

Hi @rf1234 Could you please clearly specify the answer more clearly. I didnt understand it. Please.

allan

If you could answer Kevin's question we will hopefully be able to provide further assistance.

Please provide a link to a test case as required in the forum rules.

Allan

chandhu

Hi @Kevin Here is the LoadTableExclude code in cshtml

function LoadTableExclude() {
return $('#excludeTable').DataTable({
ordering: true,
paging: false,
searching: false,
serverSide: true,
filter: true,
ajax: {
url: '/DOOR_MANAGEMENT/LoadExclude',
type: 'GET',
datatype: 'json'
},
columns: [
{ data: 'siteCode', title: 'Site Code', autoWidth: true, searchable: true },
{ data: 'legacyDoor', title: 'Legacy Door', autoWidth: true },
{ data: 'siteType', title: 'Site Type', autoWidth: true },
{ data: 'siteCountry', title: 'Site Country', autoWidth: true },
{ data: 'buyingGroup', title: 'Buying Group', autoWidth: false, orderable: false },
{ data: 'settingName', title: 'Setting Name', autoWidth: true }
],
select: {
style: 'multi'
},
paging: false
});
}

kthorngren

Your code snippets work in this test case.
https://live.datatables.net/yaroyala/45/edit

As Allan mentioned we will need to see the problem to help debug. Please post a link to your page or test case replicating the issue. Fell free to update my test case.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

chandhu

Hi @Kevin I am working on ASP.Net Core MVC C# app. The live example that you shared above is PHP. I think so. And it is working as well. But in my case it is not working. I am not able to get the correct selected rows on a button click.

kthorngren

var selectedRows = excludeTable.rows({ selected: true }).data().toArray(); // here i am getting "undefined"

This is the client side issue. It has nothing to do with the server environment nor the fact that the data is fetched via ajax. The error is likely due to your client side code structure and flow.

The first step is to use the browser's debugger, with a breakpoint on that statement, to determine what is undefined. You didn't post the error message which would provide more details for us. My guess is excludeTable is undefined because var excludeTable = LoadTableExclude(); is not defined in a scope that var selectedRows = excludeTable.rows({ selected: true }).data().toArray(); has access to. But that is just a guess

For us to help debug we will need to see a page that shows the error. This way we can trace through to see where the undefined is coming from.

Possibly you can do something as simple as getting the API instance inside the click event, like this:

$('#btnRight').click(function () {
                var excludeTable = $('#excludeTable').DataTable();
                var selectedRows = excludeTable.rows({ selected: true }).data().toArray(); // here i am getting "undefined"
                var ids = selectedRows.map(row => row.siteCode); // siteCode is the id value of the data object
                 
                if (ids.length === 0) {
                    alert("Please select rows to move.");
                    return;
                }
}); // I always get "Please select row to move" message.

Kevin

chandhu

Hi @Kevin. Really you are amazing. Thanks. It worked.