How to put index column in DataTable ?

headshot9x

Hello guys , I started with Datatable . I see at https://datatables.net/examples/api/counter_columns.html , as see it add one column with index to Datatable. I using data JSON in Datatable .Normal , I can load data from JSON to Datatable , but in here i just load data with number of column .

<table id="div_table" class="display cell-border compact" width="100%">
            <thead>
                <tr>
                    <td>Name</td>
                    <td>Des</td>
                </tr>
            </thead>
        </table>

And my script

 var table= $('#div_table').DataTable({
                "processing": false,
                "serverSide": false,
                "ajax": {
                    .............
                },
                "aoColumns": [
                    { "mData": "LOCATION_NAME" },
                    { "mData": "LOCATION_DES" }
                ]
})

But trust in my JSON string have some orther data

{"d":"[{\"LOCATION_ID\":\"L0001\",\"AREA_ID\":\"A0001\",\"LOCATION_NAME\":\"Ninh Bình\",\"LOCATION_DES\":\"NB\",\"EDIT_DATE\":\"2014-11-05T00:00:00\",\"EDIT_BY\":\"user 1\",\"FLAG\":true,\"AREA\":null,\"TOPICs\":[],\"USERS_PROFILE\":[]}]"}

And now, I want
1) put a column with index for Datatable
2) get full data (or some columns) of row when click at a row
I apologize i want my table have two columns as same above and one column in first :

No     Name      Des
1        abc         234
2        edf          567

Thank you

Lucifer_UD

I have encountered the same questions that when the table has hidden row,datatable will not work and an error like "oCols is not found..." ocurs

headshot9x

Ahm... I pass 2 hour try with index column and i have code above
As JSON string

{"d":"[{\"LOCATION_ID\":\"L0001\",\"AREA_ID\":\"A0001\",\"LOCATION_NAME\":\"Ninh Bình\",\"LOCATION_DES\":\"NB\",\"EDIT_DATE\":\"2014-11-05T00:00:00\",\"EDIT_BY\":\"user 1\",\"FLAG\":true,\"AREA\":null,\"TOPICs\":[],\"USERS_PROFILE\":[]}]"}

In my page Test.aspx , I have eight columns.

<thead>
                <tr>
                    <td>No</td>
                    <th>LOCATION_ID</th>
                    <th>AREA_ID</th>
                    <th>LOCATION_NAME</th>
                    <th>DES</th>
                    <th>DATE</th>
                    <th>BY</th>
                    <th>FLAG</th>
                </tr>
            </thead>

Ok , this is my script

 var table =$('#example').DataTable({
                "processing": false,
                "serverSide": false,
                "ajax": {
                    "url": "../BUS/WebService.asmx/ListLocation",
                    dataSrc: function ( json ) {
                        return $.parseJSON( json.d );},
                    "dataType": "json",
                    "contentType": "application/json; charset=utf-8",
                    "type": "POST"
                },
              /// eight columns set with columns of table
                "aoColumns": [
                    { "mData": null },
                    { "mData":"LOCATION_ID" },
                    { "mData": "AREA_ID" },
                    { "mData": "LOCATION_NAME" },
                    { "mData": "LOCATION_DES" },
                    { "mData": "EDIT_DATE" },
                    { "mData": "EDIT_BY" },
                    { "mData": "FLAG" }
                ],
              // define  first column , is column zero  
                "columnDefs": [{
                    "searchable": false,
                    "orderable": false,
                    "targets": 0
                }],
              /// sort at column three
                "order": [[3, 'asc']]
          });

            ////  create index for table at columns zero
          table.on('order.dt search.dt', function () {
              table.column(0, { search: 'applied', order: 'applied' }).nodes().each(function (cell, i) {
                  cell.innerHTML = i + 1;
              });
          }).draw();

           ////disable column 1,2,5,6,7
          table.column(1).visible(false);
          table.column(2).visible(false);
          table.column(5).visible(false);
          table.column(6).visible(false);
          table.column(7).visible(false);

            //// Get data of row selected [data at column 1 and 2]
            $('#example tbody').on('click', 'tr', function () {
                var data = table.row($(this)).data();
                alert(data[1] + "   " + data[2]);
            });

As it is ok , but when i click a row in table , it show "undefined undefined".
Can you tell me what is going on in here and i can fix it ? .Thank you so much .

headshot9x

Dear guys.
Ahm, about two hour`s ,i try and get something.I can hide column and create index column in DataTable. Ok, my JSON string as same

{"d":"[{\"LOCATION_ID\":\"L0001\",\"AREA_ID\":\"A0001\",\"LOCATION_NAME\":\"Ninh Bình\",\"LOCATION_DES\":\"NB\",\"EDIT_DATE\":\"2014-11-05T00:00:00\",\"EDIT_BY\":\"user 1\",\"FLAG\":true,\"AREA\":null,\"TOPICs\":[],\"USERS_PROFILE\":[]}]"}

I change more columns in page Test.aspx , full columns in table as 7 columns

  <thead>
                <tr>
                    <td>No</td>
                    <td>Name</td>
                    <td>Des</td>
                    <td>LID</td>
                    <td>AID</td>
                    <td>DATE</td>
                    <td>BY</td>
                </tr>
            </thead>

and this is my script

var table = $('#div_table').DataTable({
                "processing": false,
                "serverSide": false,
                "ajax": {
                    "url": "../BUS/WebService.asmx/LIST_LOCATION",
                    dataSrc: function (json) {
                        return $.parseJSON(json.d);
                    },
                    "dataType": "json",
                    "contentType": "application/json; charset=utf-8",
                    "type": "POST"
                },
                "aoColumns": [  //// 7 columns as Datatable
                    { "mData": null },
                    { "mData": "LOCATION_NAME" },
                    { "mData": "LOCATION_DES" },
                    { "mData": "LOCATION_ID" },
                    { "mData": "AREA_ID" },
                    { "mData": "EDIT_DATE" },
                    { "mData": "EDIT_BY" }
                ],
                "language": {
                    "lengthMenu": "Display _MENU_",
                    "zeroRecords": "Not found - Sorry",
                    "info": "Page _PAGE_ of _PAGES_",
                    "infoEmpty": "No records",
                    "infoFiltered": "(from _MAX_ records)"
                },
                "columnDefs": [   ////define column 1 
                    {
                        "searchable": false,
                        "orderable": false,
                        "targets": 0
                    },
                ],
                "order": [[1, 'asc']] /// sort columns 2
            });
            //// disable column 4,5,6,7
            table.columns([3, 4, 5, 6]).visible(false);
            //// create index column 1
            table.on('order.dt search.dt', function () {
                table.column(0, { search: 'applied', order: 'applied' }).nodes().each(function (cell, i) {
                    cell.innerHTML = i + 1;
                });
            }).draw();
            //// get full data or some columns at row selected
            $('#div_table tbody').on('click', 'tr', function () {
                //$(this).toggleClass('selected');
                //var data = table.row($(this).parents('tr')).data();
                var data = table.row($(this)).data();
                alert(data[3] + " and " + data[4]);
            });

And after click a row , i get info " undefined and undefined" .
Can you tell me about it and give me some advice ?. Thank you

headshot9x

Dear guys.
Ahm, about two hour`s ,i try and get something.I can hide column and create index column in DataTable. Ok, my JSON string as same

{"d":"[{\"LOCATION_ID\":\"L0001\",\"AREA_ID\":\"A0001\",\"LOCATION_NAME\":\"Ninh Bình\",\"LOCATION_DES\":\"NB\",\"EDIT_DATE\":\"2014-11-05T00:00:00\",\"EDIT_BY\":\"user 1\",\"FLAG\":true,\"AREA\":null,\"TOPICs\":[],\"USERS_PROFILE\":[]}]"}

I change more columns in page Test.aspx , full columns in table as 7 columns

  <thead>
                <tr>
                    <td>No</td>
                    <td>Name</td>
                    <td>Des</td>
                    <td>LID</td>
                    <td>AID</td>
                    <td>DATE</td>
                    <td>BY</td>
                </tr>
            </thead>

and this is my script

var table = $('#div_table').DataTable({
                "processing": false,
                "serverSide": false,
                "ajax": {
                    "url": "../BUS/WebService.asmx/LIST_LOCATION",
                    dataSrc: function (json) {
                        return $.parseJSON(json.d);
                    },
                    "dataType": "json",
                    "contentType": "application/json; charset=utf-8",
                    "type": "POST"
                },
                "aoColumns": [  //// 7 columns as Datatable
                    { "mData": null },
                    { "mData": "LOCATION_NAME" },
                    { "mData": "LOCATION_DES" },
                    { "mData": "LOCATION_ID" },
                    { "mData": "AREA_ID" },
                    { "mData": "EDIT_DATE" },
                    { "mData": "EDIT_BY" }
                ],
                "language": {
                    "lengthMenu": "Display _MENU_",
                    "zeroRecords": "Not found - Sorry",
                    "info": "Page _PAGE_ of _PAGES_",
                    "infoEmpty": "No records",
                    "infoFiltered": "(from _MAX_ records)"
                },
                "columnDefs": [   ////define column 1 
                    {
                        "searchable": false,
                        "orderable": false,
                        "targets": 0
                    },
                ],
                "order": [[1, 'asc']] /// sort columns 2
            });
            //// disable column 4,5,6,7
            table.columns([3, 4, 5, 6]).visible(false);
            //// create index column 1
            table.on('order.dt search.dt', function () {
                table.column(0, { search: 'applied', order: 'applied' }).nodes().each(function (cell, i) {
                    cell.innerHTML = i + 1;
                });
            }).draw();
            //// get full data or some columns at row selected
            $('#div_table tbody').on('click', 'tr', function () {
                //$(this).toggleClass('selected');
                //var data = table.row($(this).parents('tr')).data();
                var data = table.row($(this)).data();
                alert(data[3] + " and " + data[4]);
            });

And after click a row , i get info " undefined and undefined" .
Can you tell me about it and give me some advice ?. Thank you

headshot9x

Dear guys.
Ahm, about two hour`s ,i try and get something.I can hide column and create index column in DataTable. Ok, my JSON string as same

{"d":"[{\"LOCATION_ID\":\"L0001\",\"AREA_ID\":\"A0001\",\"LOCATION_NAME\":\"Ninh Bình\",\"LOCATION_DES\":\"NB\",\"EDIT_DATE\":\"2014-11-05T00:00:00\",\"EDIT_BY\":\"user 1\",\"FLAG\":true,\"AREA\":null,\"TOPICs\":[],\"USERS_PROFILE\":[]}]"}

I change more columns in page Test.aspx , full columns in table as 7 columns

  <thead>
                <tr>
                    <td>No</td>
                    <td>Name</td>
                    <td>Des</td>
                    <td>LID</td>
                    <td>AID</td>
                    <td>DATE</td>
                    <td>BY</td>
                </tr>
            </thead>

and this is my script

var table = $('#div_table').DataTable({
                "processing": false,
                "serverSide": false,
                "ajax": {
                    "url": "../BUS/WebService.asmx/LIST_LOCATION",
                    dataSrc: function (json) {
                        return $.parseJSON(json.d);
                    },
                    "dataType": "json",
                    "contentType": "application/json; charset=utf-8",
                    "type": "POST"
                },
                "aoColumns": [  //// 7 columns as Datatable
                    { "mData": null },
                    { "mData": "LOCATION_NAME" },
                    { "mData": "LOCATION_DES" },
                    { "mData": "LOCATION_ID" },
                    { "mData": "AREA_ID" },
                    { "mData": "EDIT_DATE" },
                    { "mData": "EDIT_BY" }
                ],
                "language": {
                    "lengthMenu": "Display _MENU_",
                    "zeroRecords": "Not found - Sorry",
                    "info": "Page _PAGE_ of _PAGES_",
                    "infoEmpty": "No records",
                    "infoFiltered": "(from _MAX_ records)"
                },
                "columnDefs": [   ////define column 1 
                    {
                        "searchable": false,
                        "orderable": false,
                        "targets": 0
                    },
                ],
                "order": [[1, 'asc']] /// sort columns 2
            });
            //// disable column 4,5,6,7
            table.columns([3, 4, 5, 6]).visible(false);
            //// create index column 1
            table.on('order.dt search.dt', function () {
                table.column(0, { search: 'applied', order: 'applied' }).nodes().each(function (cell, i) {
                    cell.innerHTML = i + 1;
                });
            }).draw();
            //// get full data or some columns at row selected
            $('#div_table tbody').on('click', 'tr', function () {
                //$(this).toggleClass('selected');
                //var data = table.row($(this).parents('tr')).data();
                var data = table.row($(this)).data();
                alert(data[3] + " and " + data[4]);
            });

And after click a row , i get info " undefined and undefined" .
Can you tell me about it and give me some advice ?. Thank you