Bug with checkbox selection and search

Maxilboss93

Hello,
I have a problem with a jquery datatable serverside with checkbox,
this is my code:

var oTable = $tableAllievi2.DataTable({
        "scrollY": "200px",
        "scrollCollapse": true,
        "processing": true,
        "serverSide": true,
        "paging": true,
        "info": false,
        "aLengthMenu": [
            [10, 25, 50, 75, 100, 250, 500, -1],
            [10, 25, 50, 75, 100, 250, 500, "All"]
        ],
        'columnDefs': [
            {
                'targets': 0,
                'checkboxes': {
                    'selectRow': true
                }
            }
        ],
        'select': {
            'style': 'multi'
        },
        "pageLength": 25,
        //"pagingType": "numbers",
        "responsive": false,
        "autoWidth": false,
        "language": {
            "sEmptyTable": "Nessun dato presente nella tabella",
            "sInfo": "",
            "sInfoEmpty": "",
            "sInfoFiltered": "(filtrati da _MAX_ elementi totali)",
            "sInfoPostFix": "",
            "sInfoThousands": ".",
            "sLengthMenu": options,
            "sLoadingRecords": "Caricamento...",
            "sProcessing": "Elaborazione...",
            "sSearch": "",
            "sSearch[value]": "",
            "searchPlaceholder": "Cerca allievo...",
            "sZeroRecords": "La ricerca non ha portato alcun risultato.",
            "oPaginate": {
                "sFirst": "Inizio",
                "sPrevious": '<img  height="35" class="arrow_sx">',
                "sNext": '<img  height="35" class="arrow_dx">',
                "sLast": "Fine"
            },
            "oAria": {
                "sSortAscending": ": attiva per ordinare la colonna in ordine crescente",
                "sSortDescending": ": attiva per ordinare la colonna in ordine decrescente"
            },
        },
        "ajax": {
            "url": "#",
            "data": { "listato": listato, "id_sedeCliente: id_sedeCliente},


                      MY CODE [...]                      
                return json_data.rows;
            },

        },
        "columns": [
            { responsivePriority: 1, "data": "__rank", className: "dt-center id" },
            { responsivePriority: 1, "data": "Allievo", className: "dt-center myAnag" },
        ],
        "rowId": '__rank',
        "createdRow": function (row, data, dataIndex) {
            $(row).css({
                "font-size": "14px",
                "line-height": "1.4"
            });
        },
        'stateSave': false         
    });

Table have only 2 columns, 1 for checkbox and 1 for name,
The problem is that when i try to use the input-search, and after try to select a row , after i remove search name i have a bug, the row selected is the first and not the name that i had selected in search.

How can I keep the row selection I have in the search even after exiting the search?

allan

"rowId": '__rank',

Should be enough. Can you link to your page so I can debug it please?

Thanks,
Allan

kthorngren

I'm not sure I understand how to recreate the issue. I built a simple server side processing test case with select to help my understanding:
https://live.datatables.net/zibamato/1/edit

If I understand correctly these are the steps to recreate the issue:

1. Enter the search term london
2. Select Bruno Nash
3. Clear the search term

In the test case Bruno Nash remains selected. But your issue is another row becomes selected. Is this correct?

Based on this configuration:

                'checkboxes': {
                    'selectRow': true
                }

You are using the Gyrocode checkboxes plugin. Here is the SSP example for this plugin.

This plugin provides some enhancements to the Datatables Select extension. One of these enhancements is better support when using server side processing. The plugin will keep track of rows selected when using server side processing. Without the plugin the selected rows will become unselected when they are removed from the page. You can see this with my test case by selecting a row on page 1, go to page 2 then back to page 1. The row is no longer selected.

Can you recreate the issue with my test case? If you can please provide the exact steps to see the problem.

If not then please contact the Gyrocode checkboxes plugin by using the Report a Bug button.

Kevin

kthorngren

"rowId": '__rank',

As Allan mentioned this should be enough. Make sure __rank has unique values.

Kevin

Maxilboss93

Yes, these is my problem and I use Gyrocode checkboxes plugin.

I have this in my table for configuration:

'columnDefs': [
            {
                'targets': 0,
                'checkboxes': {
                    'selectRow': true
                }
            }
        ],
        'select': {
            'style': 'multi'
        },

https://live.datatables.net/zibamato/6/edit

But with your code I haven' t the problem

kthorngren

You haven't added the Gyrocode Checkboxes JS library. See their example. Can you recreate the problem with it?

Kevin

Maxilboss93

Yes, sure, i use it

kthorngren

Yes, we have established that you use it. Please answer these questions:

1. Can you recreate the problem with the Gyrocode example?
2. Does __rank contain unique values?

Kevin

Maxilboss93

you're right, I was convinced __RANK was a unique key but when I did the search the second one got the same __rank as the first record.
In my testArea i add a uniqueID and now the problem is solved.
Thanks' a lot

kesarteraa

Can you recreate the issue with my test case? If you can please provide the exact steps to see the problem.