Column index

Joe Strauss

I created the following DataTable which works fine:

var table = $('#table_id').DataTable( {
            ajax : 
            {
                url: "ajax.php",
                type: "GET",
                data: {
                    foo: bar
                },
                dataSrc: function(json) {
                    return json;
                }       
            },
            columns: [
                { data: "col1" },
                { data: "col2" },
                { data: "col3" },
                { data: "col4" },
                { data: "col5" },
                { data: "col6" }
            ],
            colReorder: true,
            order: [[2, "desc"]]
        } );

However, I would like to have column indexing so I used the following code from the site:

var t = $('#table_id').DataTable( {
                "columnDefs": [ {
                    "searchable": false,
                    "orderable": false,
                    "targets": 0
                } ],
                "order": [[ 1, 'asc' ]]
            } );

I got an error because the amount of columns i have did not match : > Cannot set property 'nTf' of undefined
so I added an empty first column

columns: [
          {},
          {data:"col1"}, ...

This makes the table load but only after I get three warnings for a request for parameter '0' that failed. I am failing how to understand column indexing. How do I implement it?

Btw, my html is implemented by the following:

$("#panel").html(
            `<table id="table_id" class="display stripe table-bordered">
                <thead>
                    <tr>
                        <th></th> 
                        <th>COL1</th> 
                        <th>COL2</th> 
                        <th>COL3</th> 
                        <th>COL4</th> 
                        <th>COL5</th> 
                        <th>COL6</th> 
                    </tr>
                </thead>
                <tfoot>
                    <tr>
                        <th></th> 
                        <th>COL1</th> 
                        <th>COL2</th> 
                        <th>COL3</th> 
                        <th>COL4</th> 
                        <th>COL5</th> 
                        <th>COL6</th> 
                    </tr>
                </tfoot>    
            </table>`
        );

allan

Rather than adding it to the columnDefs property, it would probably be easier just to add it to your columns array. You also need to use data: null, defaultContent: '' to the column's definition.

See the tech note on this issue for more details.

Allan

Joe Strauss

Worked Perfectly! Thanks allan