Checkbox problem when datatable draws each time

kumamari

I'm trying to prevent my datatable selecting each checkbox on each row every time I draw on my datatable. I have a checkbox in my first column and on each row. When I edit on my datatable, it selects all checkboxes in each row, I create (same thing). I would like to prevent each checkbox on each row from being selected whenever I edit my data in my table.

Here is the code I believe is relevant to this issue. How do I achieve this?

        columnDefs: [
            {
                width: '5%',
                targets: 0,
                checkboxes: {
                    selectRow: true,
                    selectCallback: function(nodes,selected) {
                        //nodes[0].childNodes[0].checked = false;
                        //console.log(selected);
                    },
                    selectAll: false
                }
            }
        ],
        colResize: {
            tableWidthFixed: false,
            handleWidth: 10
        },
        fixedColumns: true,
        searching: true,
        language: {
            "emptyTable": "No items have been created."
        },
        select:  {
            style: 'multi'
        }

kthorngren

Looks like you are using the Gyrocode Checkboxes Plugin. You state you are editing all the checkboxes are selected. Is this after you submit the edited data?

Are you using the Datatables Editor? If so do you have code to update the checkboxes when there are changes? I'm not sure what is needed when using the Gyrocode plugin with the Editor. Maybe the Gyrocode docs have the steps needed.

Here is a Datatables Editor example using checkboxes. It doesn't use the Gyrocode plugin.

You aren't showing the full Datatables init code nor the editor code. Do you have a rowCallback that is setting the checkbox state?

Can you post a link to your page or provide a test case with the issue so we can help troubleshoot?

Kevin

kumamari

I am editing only one row, right. Then after I submit the edited data, every row is selected and each checkbox is selected. Yeah, I am using that plugin. Yes, I am using the Datatables Editor.

I've now disabled that Gyro plugin and fixed the select all issue.

Here is my current editor code for my first column. I've taken some code from the datatables example you provided and integrated it into my own.

Editor

editor = new $.fn.dataTable.Editor( {
        ajax:  '/itemCreation/getRecords.php',
        table: '#scratchTable',
        display: 'lightbox',
        fields: [ {
            label:     "Active:",
            name:      "active",
            type:      "checkbox",
            separator: "|",
            options:   [
                { label: '', value: 1 }
            ]
        }

Datatables

columns: [
            {
                data:   "active",
                render: function ( data, type, row ) {
                    if ( type === 'display' ) {
                        return '<input type="checkbox" class="editor-active">';
                    }
                    return data;
                },
                className: "dt-body-center"
            },

It selects and it can edit appropriately and I don't have the previous issue involving every checkbox being selected but I can't toggle the checkbox to a checked or not checked state when selecting. See anything?

kthorngren

Is the checkbox part of the data or for row selection?

If the checkbox is for selecting rows then this example is more appropriate:
https://editor.datatables.net/examples/inline-editing/columns.html

The above is if the data is displayed as a checkbox.

Kevin

kumamari

The checkbox is for row selection. That row's data when selected can be brought up in the editor. I can highlight the row now and bring up the data but I want a checkbox to signal a highlighted row. When I add this code it gives me an empty column with no checkbox.

            columns:  [{
                data: null,
                defaultContent: '',
                className: 'select-checkbox',
                orderable: false
            }

kthorngren

Did you add the select extension?

Kevin

kumamari

Yeah, that extension is added.

        select:  {
            style: 'multi',
            selector: 'td:first-child'
        }

EDIT: I forgot to include the css declaration. Thanks for your help!