Select only sends selected rows from current page

metadev

Hello.

Recently I upgraded Datatables from v1.10.19 to v1.13.4 and jQuery from v1.11.1 to v3.7.0. Consequently, I had to remove checkboxes plugin selection functionality and replace it with row selection.

I am storing the selected rows using the .selected Bootstrap class. However, the selected rows from the current page only are sent and the rows from other pages are not included (I am using client-side pagination). For example, if I select two rows from page 1 and two rows from page 2, and when I am on page 2 at the time when I click on the button with id #viewSelected, only the two selected rows from page 2 are logged in the console.

This was working fine when I was using checkbox (plugin) selection. Here is the relevant code.

function loadDetailDataTable(data, show) {
    let selectedTable;

    selectedTable = $('#tabNpsSelectedDetails').DataTable({
        destroy: true,
        paging: true,
        responsive: true,
        select: {
            style: 'multi',
        },
        scrollY: 400,
        scrollCollapse: true,
        autoWidth: false,
        data: data,
        columns: [...],
        "columnDefs": [...],
        select: {
            style: 'multi',
        },
        "order": [...],
        "lengthMenu": [...]
    });
    
    $('#viewSelected').on('click', async function(e) {
        let arr = [];

        $('#notifModal').modal('show');
        let table = $('#tabNpsSelectedDetails');
        let rows = $('tr.selected');
        let rowData = selectedTable.rows(rows).data();

        $.each($(rowData), function(key, value) {
            arr.push({
                ein: value['ein'],
                month: value['sal_month'],
                year: value['sal_year']
            });
        })

        if (arr.length > 0) {
            $('#notifModalConfirm').show();
            $('#modalConfirmBtn').show();
            $('#notifModalTitle').text("Submit selected employees?");
            $('#notifModalBodyText').html("Are you sure you want to view details for selected employees?");
            $('#modalConfirmBtn').html("Confirm");

            $('#modalConfirmBtn').on('click', async function() {
                let selectedList = await xmlHTTP_send_post(qry_file_name, "&action_code=SEND_SELECTED_ARRAY&rows_selected=" + JSON.stringify(arr));
                let parsed = await JSON.parse(selectedList);
                if (parsed.status == "success") {
                    console.log(JSON.stringify({
                        message: 'Selected lists',
                        data: parsed,
                    }, null, 2));
                    $('#notifModal').modal('hide');
                    return parsed;
                } else {
                    alert('An error occured. Please try again');
                    $('#notifModal').modal('hide');
                    return;
                }
            });
        }
    }
}

Am I missing something here? What am I doing wrong? Thank you for reading.

colin

We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Colin

allan

I can actually answer this one from just the code:

 let rows = $('tr.selected');

is selecting only the rows which are in the document at the time that code is run. DataTables removes the rows that it doesn't need for the current display to help improve performance.

See the Select API integration for details on how to address this.

You would basically fix it by doing:

 let rowData = selectedTable.rows({selected: true}).data();

Allan

metadev

@allan Thank you. This was the reason.