How to add index column to datatables

rpm00

I'm trying to add an index column like this example ( https://datatables.net/examples/api/counter_columns.html ), in my table. I try to implement the code from the example to my program, but the results don't appear. How do I add an index column like the example, to my table ? thank you

Table :

! <thead >
! <tr >
! <th style="text-align:center;" width="21%">Number</th>
! <th style="text-align:center;" width="21%">Datetime </th>
! <th style="text-align:center;" width="19%">Temp</th>
! <th style="text-align:center;" width="21%">Humidity</th>
! </tr>
! </thead>

Javascript :

                 $('.input-daterange').datepicker({
                  todayBtn:'linked',
                  format: "yyyy-mm-dd",
                  autoclose: true
                 });

                 fetch_data('no');
                 function fetch_data(is_date_search, start_date='', end_date='')
                 {
                  var dataTable = $('#order_data').DataTable({
                     dom: 'Bfrtip',
                        buttons: [
                             {
                                extend: 'print',
                                title: '<h3 align ="center">Monitoring</h3>',
                                 text:      '<i class="fa fa-pencil"></i>',
                                messageTop: 'created by PDFMake',
        },
                            {
                                extend: 'pdfHtml5',
                                customize: function (doc) {
                    doc.content[1].table.widths = 
                        Array(doc.content[1].table.body[0].length + 1).join('*').split('');
                  },
                                title: 'Monitoring',
                                titleAttr: 'PDF',
                                text:      'PDF',
                            }
                        ],
                    "columnDefs": [ {
                        "searchable": false,
                        "orderable": false,
                        "targets": 0
                    } ],
                   "order": [[ 1, 'asc' ]],
                   "processing" : true,
                   "serverSide" : true,
                   bFilter:false,
                   "ajax" : {
                    url:"fetch.php",
                    type:"POST",
                    data:{
                     is_date_search:is_date_search, start_date:start_date, end_date:end_date
                    }, 
                   },
                  });
                 }
                     $('#search').click(function(){
                      var start_date = $('#start_date').val();
                      var end_date = $('#end_date').val();
                      if(start_date != '' && end_date !='')
                      {
                       $('#order_data').DataTable().destroy();
                       fetch_data('yes', start_date, end_date);
                        //$("#tabel").show(); 
                        document.getElementById('tabel').style.display = "block";  
                      }
                      else
                      {
                       alert("Both Date is Required");
                      }
                     }); 
                 dataTable.on( 'order.dt search.dt', function () {
                        dataTable.column(0, {search:'applied', order:'applied'}).nodes().each( function (cell, i) {
                            cell.innerHTML = i+1;
                        } );
                    } ).draw();
                    });

kthorngren

         dataTable.on( 'order.dt search.dt', function () {
                dataTable.column(0, {search:'applied', order:'applied'}).nodes().each( function (cell, i) {
                    cell.innerHTML = i+1;
                } );
            } ).draw();

This solution is meant more for client side processed tables. It won't work well for Server Side Processing because only the rows being displayed are in the client so each page will start with "1".

The second problem is you are using arrays instead of objects. Datatables expects the same number of elements in each row array as table columns. If you add a column you need to add an element to the array. You will either need to add the array element in your server side code or use ajax.dataSrc as a function to add the element. However there may be a Datatables config option to handle the missing column in the array but I'm not familiar with any.

Probably the easiest and best option would be to return the index values from your server script.

Kevin