How to add index column to datatables

Question

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 :

<table id="order_data">
<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>
    </table>

Javascript :

    $(document).ready(function(){

     $('.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: '<p align ="center"><strong>PDF</strong> created by PDFMake with Buttons for DataTables.</p>' 
                },
                {
                    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();

    });

Answer 1

The example you're referencing isn't using server side processing. Rather it's assuming a static data source. You have serverSide: true and using an AJAX request to retrieve the data from a source so there are a couple of ways to handle this:

1) Use column render to generate the index value after the data is retrieved:

{
      "sName": "Index",    
      "render": function (data, type, row, meta) {
                   return meta.row; // This contains the row index
                }
}

2.) Add the index value to your data source and retrieve it along with your url:"fetch.php" request. Though this would actually act more like a unique ID and less like row numbering.

There is also an api call for row().index() that you could leverage in a number of ways.