javascript - 如何向数据表添加索引列

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

example您引用的未使用 server side processing 。相反，它假设一个静态数据源。您有 serverSide: true 并使用 AJAX 请求从源检索数据，因此有几种方法可以处理此问题:

1)获取数据后使用列渲染生成索引值:

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

2.) 将索引值添加到您的数据源并与您的 url:"fetch.php" 请求一起检索它。尽管这实际上更像是一个唯一的 ID，而不是行编号。

还有一个api call对于 row().index()，您可以通过多种方式利用它。