Select with checkboxes not working properly

Select with checkboxes not working properly

Mark2024Mark2024 Posts: 6Questions: 1Answers: 0

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

Answers

  • colincolin Posts: 15,177Questions: 1Answers: 2,590

    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

  • Mark2024Mark2024 Posts: 6Questions: 1Answers: 0

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

  • allanallan Posts: 61,972Questions: 1Answers: 10,160 Site admin

    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

  • Mark2024Mark2024 Posts: 6Questions: 1Answers: 0

    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.

  • allanallan Posts: 61,972Questions: 1Answers: 10,160 Site admin

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

    Allan

  • Mark2024Mark2024 Posts: 6Questions: 1Answers: 0
    edited April 8

    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.

  • Mark2024Mark2024 Posts: 6Questions: 1Answers: 0

    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:

  • allanallan Posts: 61,972Questions: 1Answers: 10,160 Site admin

    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

  • Mark2024Mark2024 Posts: 6Questions: 1Answers: 0

    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

  • allanallan Posts: 61,972Questions: 1Answers: 10,160 Site admin

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

    Allan

  • DavisDS85DavisDS85 Posts: 2Questions: 1Answers: 0
    edited April 30

    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.

  • colincolin Posts: 15,177Questions: 1Answers: 2,590

    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

Sign In or Register to comment.