Select with checkboxes not working properly

Mark2024

I just stared using DataTables. Thanks for the great component.
I want to use select with checkboxex, multi style. I want selected with checboxes to be highlighted and only them.
I have problems:

1-Header checkbox "select all" is not appearing
2-I tried several variations of styles, but all have problems.
2.1) if I use "multi", I see 2 select groups: A ) with checkboxes; B ) higlighted. And they are not the same. Select returns highlighted members
2.2) If I use "api", highlight is not working and select returns nothing
2.3) If I use "os", only one is highlighted, multiple checkgoxes selected and select returns only hightlited.
3) button selectNone does not uncheck checkboxes

Code fragments

select: {
    style: 'os',
    selector: 'td:first-child',
    headerCheckbox: true,
    className: 'bg-warning'
},

columns: [
 {   //0

     orderable: false,
     visible: true,
     render: DataTable.render.select(),
     width: "50px",
 },
 
 layout: {
    top1Start: {
        buttons:
            [
                'selectNone',
                {
                    text: 'Get selected data',
                    action: function () {
                        let myRows = myTable.rows({ selected: true });
                        let data = myRows.data();
                        let ids = myPluck(data, 'id');
                        let idsString = ids.toArray().join(',');

                        alert('Selected:'+idsString);
                    }
                },
                {
                    text: 'Deselect',
                    action: function () {
                        let myRows = myTable.rows({ selected: true });
                        myRows.deselect();
                    }
                }
            ]
    }

colin

It's working as expected here, so there must be something wrong with your initialisation.

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

Mark2024

I tried but that environment does not reproduce it. I am using Bootstrap. Here are some screenshots:

allan

Can you link to a test case showing the issue, as Colin requested, please? Our examples appear to be working correctly (although I have recently committed some fixes for when Select is used with Ajax loaded data and the select all checkbox was used), so we'd really need to see it not working to be able to debug it and resolve the issue.

Allan

Mark2024

I tried to set up that online environment but it does not reproduce it. I am using AJAX in C#. I can email you C# project to demo it, a small simple project.

allan

Are you able to host your compiled C# project somewhere so I can checkout the client-side please?

Allan

Mark2024

No, sorry. I can send you the project and you just run it. Asp.Net8, MVC. It has only 2 pages. No database setup, it uses a mock database file, and it is self-contained.

Mark2024

I got your REPRO.
Here it is: https://live.datatables.net/purupodi/1/

The code is:

var myTable = new DataTable('#example',{
 //processing-Feature control the processing indicator.
processing: true,
//paging-Enable or disable table pagination.
paging: true,
//info-Feature control table information display field
info: true,
//ordering-Feature control ordering (sorting) abilities in DataTables.
ordering: true,
//searching-Feature control search (filtering) abilities
searching: true,
//search.return-Enable / disable DataTables' search on return.
search: {
    return: true
},


//order-Initial order (sort) to apply to the table.
order: [[2, 'asc']],            

//serverSide-Feature control DataTables' server-side processing mode.
serverSide: true,

  ajax: {
    url: '/ssp/objects.php',
    type: 'post'
  },
  
  columns: [
    { data: 'first_name' , orderable: false,  render: DataTable.render.select(),},
    { data: 'last_name' },
    { data: 'position' },
    { data: 'office' },
    { data: 'start_date' },
    { data: 'salary' },
  ],

//
select: {
    style: 'os',
    selector: 'td:first-child',
    headerCheckbox: true
},
 
layout: {
    top1Start: {
        buttons:
            [
                'selectNone',
                {
                    text: 'Get selected data',
                    action: function () {
                        let myRows = myTable.rows({ selected: true });
                        let data = myRows.data();
                        let ids = myPluck(data, 'last_name');
                        let idsString = ids.toArray().join(',');

                        alert('Selected:'+idsString);
                    }
                },
                {
                    text: 'Deselect',
                    action: function () {
                        let myRows = myTable.rows({ selected: true });
                        myRows.deselect();
                    }
                }
            ]
    }
}
  
  
});


    function myPluck(array, key) {
        return array.map(function (obj) {
            return obj[key];
        });
    }

Here are some pictures:

allan

Thank you!

1-Header checkbox "select all" is not appearing

This appears to be related to the use of serverSide. Disabling that makes the checkbox. I'll need to look into that.

2.3) If I use "os", only one is highlighted, multiple checkgoxes selected and select returns only hightlited.
3) button selectNone does not uncheck checkboxes

I think these have been resolved in the nightly: https://live.datatables.net/ginocane/1/edit . It appears to work okay there?

Allan

Mark2024

Right, when I use nightly build for select, it looks like that part works. Just please make the release so I can download the new "select" for my app

allan

I'll be doing the release later this week, all being well

Allan

DavisDS85

I'm having similar issues with the Checkbox not showing in the header when Using Jquery-UI and Editor.

var table = $('#notification_table').DataTable({
            ajax: {
                type: "GET",
                url: REST.URL + 'assignment?from=' + from + '&to=' + to,
                beforeSend: function (xhr) {
                    xhr.setRequestHeader('X-WP-Nonce', REST.Nonce);
                },
                "dataSrc": function ( json ) {
                    console.log(json);
                    return json.data;
                }
            },
            searching: false,
            ordering: false,
            paging: false,
            autoWidth: false,
            columns: [
                {
                    data: null,
                    render: DataTable.render.select()
                },
                {
                    data: 'assignment_name', 
                    className: 'dt-left',
                    width: '15%'
                },
                {
                    data: 'name', 
                    className: 'dt-left',
                    width: '20%'
                },
                {
                    data: 'address', 
                    className: 'dt-left',
                    width: '40%'
                },
                {
                    data: 'acknowledged', 
                    className: 'dt-left',
                    width: '20%', 
                }
            ],
            columnDefs: [{
                "defaultContent": "",
                "targets": "_all"
            }],
            select: {
                style: 'multi+shift',
                selector: 'td:first-child',
                headerCheckbox: true
            },
            order: [[1, 'asc']]
          });

I've tried adding headerCheckbox: true and without, but in both cases it doesn't show up in the header. I also notice that using render: DataTable.render.select() causes the checkbox to duplicate the check mark.

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

colin

select.headerCheckbox is a new feature that came out with the DT2, so it would be worth checking to make sure you have the most recent sources. If you look at this example here, ensure you have the necessary files listed on the Javascript and CSS tabs beneath the table. Could you report back and let us know, please.

Colin