How to fix 'Requested unknown parameter '6' for row 0, column 6'

By FoxLearn 2/16/2024 9:36:29 AM   96
This post shows you how to fix 'Requested unknown parameter '6' for row 0, column 6' when using jquery.datatable.net

For example:

<table id="dynamic-table" class="table table-striped table-bordered table-hover">
    <thead>
            <tr>
                <th class="center">
                    <label class="pos-rel">
                        <input type="checkbox" class="ace" />
                        <span class="lbl"></span>
                    </label>
                </th>
                <th>Customer ID</th>
                <th>Company Name</th>
                <th>Contact Name</th>
                <th>Address</th>
                <th>City</th>
                <th></th>
            </tr>
     </thead>
</table>

Adding checkboxes to jquery datatable

Javascript

var myTable =
                $('#dynamic-table')
                    .DataTable({
                        bAutoWidth: false,
                        "processing": false, // for show progress bar
                        "serverSide": false, // for process server side
                        "filter": true, // this is for disable filter (search box)
                        "ajax": {
                            "url": "/Customer/LoadData",
                            "type": "GET",
                            "contentType": "application/json",
                            "datatype": "json",
                            "dataSrc": "data"
                        },                    
                        "aoColumnDefs": [
                            {
                                "bSortable": false, "aTargets": [0], "class":"center", "mRender": function (data, type, full) {
                                    return '<label class="pos-rel"><input type="checkbox" class="ace" /><span class="lbl"></span></label>';
                                }
                            },
                                { "data": "customerID", "aTargets": [1] },
                                { "data": "companyName", "aTargets": [2] },
                                { "data": "contactName", "aTargets": [3] },
                                { "data": "address", "aTargets": [4] },
                                { "data": "city", "aTargets": [5] },
                            {
                                "bSortable": false, "aTargets": [6]
                            }
                            ],                       

                        select: {
                            style: 'multi'
                        }
                    });

When you loading data, you will get an error as shown below.

DataTables warning: table id=dynamic-table - Requested unknown parameter '6' for row 0, column 6. For more information about this error, please see http://datatables.net/tn/4

To solve the problem, you should define all column.

Modify your aoColumnDefs configuration as show below.

"aoColumnDefs": [
                            {
                                "bSortable": false, "aTargets": [0], "class":"center", "mRender": function (data, type, full) {
                                    return '<label class="pos-rel"><input type="checkbox" class="ace" /><span class="lbl"></span></label>';
                                }
                            },
                                { "data": "customerID", "aTargets": [1] },
                                { "data": "companyName", "aTargets": [2] },
                                { "data": "contactName", "aTargets": [3] },
                                { "data": "address", "aTargets": [4] },
                                { "data": "city", "aTargets": [5] },
                            {
                                "bSortable": false, "aTargets": [6], "mRender": function (data, type, row) {
                                    return '<a class="glyphicon glyphicon-pencil" href="/Country/Edit/' + row.customerID + '">Edit</a><a class="glyphicon glyphicon-remove" href="/Country/Delete/' + row.customerID + '">Delete</a>';
                                }
                            }
                            ],