Checkbox problem when datatable draws each time

Checkbox problem when datatable draws each time

kumamarikumamari Posts: 24Questions: 9Answers: 1
edited October 2017 in DataTables

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'
        }

This question has an accepted answers - jump to answer

Answers

  • kthorngrenkthorngren Posts: 20,141Questions: 26Answers: 4,735

    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

  • kumamarikumamari Posts: 24Questions: 9Answers: 1
    edited October 2017

    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?

  • kthorngrenkthorngren Posts: 20,141Questions: 26Answers: 4,735

    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

  • kumamarikumamari Posts: 24Questions: 9Answers: 1

    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
                }
    
  • kthorngrenkthorngren Posts: 20,141Questions: 26Answers: 4,735
    Answer ✓

    Did you add the select extension?

    Kevin

  • kumamarikumamari Posts: 24Questions: 9Answers: 1
    edited October 2017

    Yeah, that extension is added.

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

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

This discussion has been closed.