Как добавить индексный столбец в таблицы данных

Question

Я пытаюсь добавить столбец индекса, как в этом примере (https://datatables.net/examples/api/counter_columns.html), в моей таблице.Я пытаюсь реализовать код из примера в моей программе, но результаты не отображаются.Как добавить столбец индекса, как пример, в мою таблицу?спасибо

Таблица:

<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

Пример , на который вы ссылаетесь, не использует обработка на стороне сервера . Скорее это предполагает статический источник данных. У вас есть serverSide: true, и вы используете запрос AJAX для получения данных из источника, поэтому есть несколько способов справиться с этим:

1) Использовать визуализацию столбца для генерации значения индекса после получения данных:

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

2.) Добавьте значение индекса в ваш источник данных и получите его вместе с вашим запросом url:"fetch.php". Хотя на самом деле это больше похоже на уникальный идентификатор, а не на нумерацию строк.

Существует также вызов API для row().index(), который можно использовать несколькими способами.