Datatable Select All ServerSide and Get Data recordsFiltered

Invincible1

Hello everybody,

Sorry for english

For the past few days, I have been facing some issues with Datatable. In my script, I want to be able to select all the rows in my table (not just those present on the DOM) when I click on the checkbox in the header of my table.
However, it is only the lines in the DOM that are selected.
And also I wish to be able to recover all the data of the selected lines when I click on the checkbox of the header.

Here is my script:

$(document).ready(function () {
            var rows_selected = [];
            var tableChildRows = $('#dt-fact').DataTable({
                processing: true,
                serverSide: true,
                ajax: {
                    url: "{!! route('fact.indexed') !!}",
                    data: function (d) {
                        d.datedeb = $('input[name=datedeb]').val();
                        d.datefin = $('input[name=datefin]').val();
                        d.ssvg = $('select[name=ss]').val();
                    },
                },
                columnDefs: [{
                    orderable: false,
                    className: 'select-checkbox',
                    targets: 0,
                }],
                
                select: {
                    style: 'multi',
                    selector: 'td:first-child',
                },

                order: [[1, 'asc']],
                
                rowCallback: function(row, data, dataIndex) {
                    var rowId = data.DT_RowId;
                    if($.inArray(rowId, rows_selected) !== -1) {
                        $(row).addClass('selected');
                    }
                },
                
                columns: [
                    { orderable: false, data: null, defaultContent: '', searchable: false },
                    { class: "details-control", orderable: false, data: "", defaultContent: "", searchable: false },
                    { data: 'DT_RowData.data-scrpteur.nom', name: 'player.nom', class: 'font-18' },
                    { data: 'DT_RowData.data-num', name: 'player.num' },
                    { data: 'DT_RowData.data-dat', name: 'player.dat',  orderable: true },
                    { data: 'DT_RowData.data-ech', name: 'player.ech',  orderable: true },
                    { data: 'DT_RowData.data-prime', name: 'player.prime',  orderable: true },
                    { data: 'DT_RowData.data-player.svg.ssnom', name: 'player.svg.ssnom', class: "text-left" },
                ],
            });

$('.dt-fact tbody').on('click', 'tr td.select-checkbox', function(e) {
                var $row = $(this).closest('tr');
                var data = tableChildRows.row($row).data();
                var rowId = data.DT_RowId;
                var index = $.inArray(rowId, rows_selected);
                if(index === -1) {
                    rows_selected.push(rowId);
                    if($row.hasClass('selected')) {} else { $row.addClass('selected'); }
                } else {
                    rows_selected.splice(index, 1);
                    if($row.hasClass('selected')) { $row.removeClass('selected'); }
                }
            });

            $('thead input[name="select_all"]', tableChildRows.table().container()).on('click', function(e) {
                if(this.checked) {
                    $('.dt-fact tbody tr').addClass('selected');
                } else {
                    $('.dt-fact tbody tr').removeClass('selected');
                    rows_selected = [];
                }
                e.stopPropagation();
            });

Thanks for the help

colin

Yep, because you're using serverSide, only the records currently being displayed are known to DataTables. That's unavoidable, I'm afraid. If you have less than 10-20k records, you may not need the serverSide as the client is optimised.

Colin

Invincible1

I have over 50K records. What other method can you advise me?

kthorngren

You could keep the checkbox state in the server DB. You can use the select and deselect events to send updates to the server via an Ajax request. You would also create a function to fetch the selected rows from the server.

Kevin