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

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

chandhuchandhu Posts: 19Questions: 6Answers: 0
edited September 10 in Free community support

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 :smile:

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.

This question has an accepted answers - jump to answer

Answers

  • rf1234rf1234 Posts: 2,991Questions: 87Answers: 421
    edited September 9

    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.

  • kthorngrenkthorngren Posts: 21,336Questions: 26Answers: 4,953
    edited September 9

    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

  • chandhuchandhu Posts: 19Questions: 6Answers: 0

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

  • allanallan Posts: 63,510Questions: 1Answers: 10,471 Site admin

    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

  • chandhuchandhu Posts: 19Questions: 6Answers: 0

    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
    });
    }

  • kthorngrenkthorngren Posts: 21,336Questions: 26Answers: 4,953
    edited September 10

    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

  • chandhuchandhu Posts: 19Questions: 6Answers: 0

    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.

  • kthorngrenkthorngren Posts: 21,336Questions: 26Answers: 4,953
    Answer ✓

    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 :smile:

    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

  • chandhuchandhu Posts: 19Questions: 6Answers: 0

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

Sign In or Register to comment.