Problems with checkbox placement

Rawland_Hustle

Hi!

I'm using the Select extension and I'm having problems with placement of the checkboxes. As it is now, the class "select-checkbox" gets added to a column with index 0, which is already occupied by the data "organisation". Therefore they get overlapped as in the attached image.

I guess I have to add another column somehow. When I add a column like this {"title": ""}, I get "Requested unknown parameter '0' for row 0, column 0".

I'd really appreciate any help in this. Thank you!

var serviceProducersTable = $('#serviceProducersTable').DataTable( {
        "data": serviceProducers,
        "dom": "Bfrtip",
        "paging": false,
        "select": { "style": "multi",
                    "selector": "td:first-child"},
        "columns": [
                    { "data": "organisation"},
                    { "data": "hsaId", "title": "HSA-id" },
                    {  "data": "systemName", "title": "Beskrivning"},
                    {
                        "data": "logicalAddressees",
                        "title": "Tidböcker(st)",
                        "render": function ( data ) {
                            return "<a href='#' class='ClickableCell'>" + data.length + "</a>";
                        }
                    },
                    {
                        "data": "serviceContracts",
                        "title": "Nybokning",
                        "render": function ( data ) {
                            if (data.some(item => item.namespace === "urn:riv:crm:scheduling:MakeBookingResponder:1") == true) {
                                return okIcon;
                            }
                            else {
                                return "";
                            }
                        }
                    },
                    {
                        "data": "serviceContracts",
                        "title": "Ombokning",
                        "render": function ( data ) {
                            if (data.some(item => item.namespace === "urn:riv:crm:scheduling:UpdateBookingResponder:1") == true) {
                                return okIcon;
                            }
                            else {
                                return "";
                            }
                        }
                    },
                    {
                        "data": "serviceContracts",
                        "title": "Avbokning",
                        "render": function ( data ) {
                            if (data.some(item => item.namespace === "urn:riv:crm:scheduling:CancelBookingResponder:1") == true) {
                                return okIcon;
                            }
                            else {
                                return "";
                            }
                        }
                    }
                    ],
        "buttons": [
                    {
                        "text": "Statistik",
                        "action": function () {
                            $("#serviceProducersDiv").hide();
                            drawStatisticsTable();
                        }
                        
                    },
                    {
                        "text": "Tidböcker",
                        "action": function () {
                            $("#serviceProducersDiv").hide();
                            drawLogicalAddresseesTable();
                        }
                        
                    }
                ],
        "rowGroup": {
                    dataSrc: "organisation"
                },
        "order": [[ 1, "asc" ]],
        "columnDefs": [
                    {
                        "targets": [ 1 ],
                        "visible": false,
                    },
                    {
                        "orderable": false,
                        "className": "select-checkbox",
                        "targets":   [ 0 ]
                    }
                ]

    });

kthorngren

You will need to add a column to your table. This example shows a column with a blank header in the HTML tab.

Then you can use { data: null } for that column plus the select-checkbox init you already have.

Kevin

Rawland_Hustle

I generate my column headers with DataTables. I.e. my initial HTML doesn't include any <thead> like the example does.

If I include { "data": null } in my js, the first column will contain the string "[object Object]" and the checkbox as in the attached image. Updated js below. What's wrong with it?

var serviceProducersTable = $('#serviceProducersTable').DataTable( {
        "data": serviceProducers,
        "dom": "Bfrtip",
        "paging": false,
        "select": { "style": "multi",
                    "selector": "td:first-child"},
        "columns": [
                    { "data": null },
                    { "data": "organisation"},
                    { "data": "hsaId", "title": "HSA-id" },
                    {  "data": "systemName", "title": "Beskrivning"},
                    {
                        "data": "logicalAddressees",
                        "title": "Tidböcker(st)",
                        "render": function ( data ) {
                            return "<a href='#' class='ClickableCell'>" + data.length + "</a>";
                        }
                    },
                    {
                        "data": "serviceContracts",
                        "title": "Nybokning",
                        "render": function ( data ) {
                            if (data.some(item => item.namespace === "urn:riv:crm:scheduling:MakeBookingResponder:1") == true) {
                                return okIcon;
                            }
                            else {
                                return "";
                            }
                        }
                    },
                    {
                        "data": "serviceContracts",
                        "title": "Ombokning",
                        "render": function ( data ) {
                            if (data.some(item => item.namespace === "urn:riv:crm:scheduling:UpdateBookingResponder:1") == true) {
                                return okIcon;
                            }
                            else {
                                return "";
                            }
                        }
                    },
                    {
                        "data": "serviceContracts",
                        "title": "Avbokning",
                        "render": function ( data ) {
                            if (data.some(item => item.namespace === "urn:riv:crm:scheduling:CancelBookingResponder:1") == true) {
                                return okIcon;
                            }
                            else {
                                return "";
                            }
                        }
                    }
                    ],
        "buttons": [
                    {
                        "text": "Statistik",
                        "action": function () {
                            $("#serviceProducersDiv").hide();
                            drawStatisticsTable();
                        }
                        
                    },
                    {
                        "text": "Tidböcker",
                        "action": function () {
                            $("#serviceProducersDiv").hide();
                            drawLogicalAddresseesTable();
                        }
                        
                    }
                ],
        "rowGroup": {
                    dataSrc: "organisation"
                },
        "order": [[ 1, "asc" ]],
        "columnDefs": [
                    {
                        "targets": [ 1 ],
                        "visible": false,
                    },
                    {
                        "orderable": false,
                        "className": "select-checkbox",
                        "targets":   [ 0 ]
                    }
                ]

    });

kthorngren

You can try adding this to that column:
"defaultContent": ""

Kevin

Rawland_Hustle

That did it! Thanks a lot!