How to add row with 1st column checked

vince1210

            tblTest = $('#tblTest).DataTable({
                ajax: {
                    url: "myapi/test"
                },
                columns: [
                    {
                        data: "c1", title: "Can Access",
                        defaultContent: '<input type="checkbox" name="chkbx">',
                    },
                    { data: "field_1", title: "Field 1" },
                    { data: "field_2", title: "Field 2" }
                ],
            });

That loads my table just how I want it to be. field_1 and field_2 are the only fields that are in the data returned by the api call. Now I want to be enter data in 2 new textboxes, click on a button and have that data be added into my table with the 1st column checked.

            tblTest.row.add(
                [
                    {
                        "c1": "",
                        "field_1": $('#field1').val(),
                        "field_2": $('#field2').val()
                    }
                ]
            ).draw(false);

I've tried that, I've tried where I left out the "c1" when adding the row.

Everything I try results in this error:

DataTables warning: table id=tblTest - Requested unknown parameter 'field_1' for row 1, column 1.

kthorngren

The first problem is row.add() only adds one row so it does not expect the row data to be in an array. Try this instead:

tblTest.row.add(
        {
            "c1": "",
            "field_1": $('#field1').val(),
            "field_2": $('#field2').val()
        }
).draw(false);

have that data be added into my table with the 1st column checked.

For existing rows how do you determine if the checkbox is checked?

This Editor example shows one way to set the checkbox state based on a value in the row data. You can ignore the Editor config if you are not using Editor.

Kevin

vince1210

Thank you Kevin. That led me in the right direction.