Question

< script type = "text/javascript" >
  $(function() {
    var oAllLinksTable = $("#mydatatable").dataTable({
      "bProcessing": false,
      "bServerSide": true,
      "sAjaxSource": "/myreports/data?Id=" + id,
      "sPaginationType": "full_numbers",
      "bDestroy": true
    });
  }); 
< /script>

我的表格如下

 <table id="headertagstable" style="width: 100%;" class="grid-table04 margin-b-20">
  <thead>
    <tr>
      <th width="10%" align="left" valign="middle">
        SI No
      </th>
      <th width="40%" align="left" class="black-link-first" valign="middle">
        Name
      </th>
      <th width="25%" align="left" valign="middle">
        Date
      </th>
      <th width="25%" align="left" valign="middle">
        Place
      </th>
    </tr>
  </thead>
</table>

除序列号外，一切正常。如何使用jquery添加序列号？

Answer 1

你可以试试

"fnRowCallback" : function(nRow, aData, iDisplayIndex){
                $("td:first", nRow).html(iDisplayIndex +1);
               return nRow;
            },

参考http://datatables.net/forums/discussion/2169/adding-and-deleting-rows-with-row-numbers/p1

我刚刚在stackoverflow上找到的另一个解决方案如下：

var index = iDisplayIndex +1;
$('td:eq(0)',nRow).html(index);
return nRow;

参考Add row number column to jquery datatables

已更新： 只需调整fnRowCallback函数即可正确获取分页编号

    "fnRowCallback" : function(nRow, aData, iDisplayIndex){      
                          var oSettings = oAllLinksTable.fnSettings();
                           $("td:first", nRow).html(oSettings._iDisplayStart+iDisplayIndex +1);
                           return nRow;
                },

Answer 2

只需调整fnRowCallback函数即可正确获取序列号

    "fnRowCallback" : function(nRow, aData, iDisplayIndex){      
                          var oSettings = oAllLinksTable.fnSettings();
                           $("td:first", nRow).html(oSettings._iDisplayStart+iDisplayIndex +1);
                           return nRow;
                },

Answer 3

我已经使用以下代码解决了。该代码对我来说很好用。

"rowCallback": function (nRow, aData, iDisplayIndex) {
     var oSettings = this.fnSettings ();
     $("td:first", nRow).html(oSettings._iDisplayStart+iDisplayIndex +1);
     return nRow;
},

使用this.fnSettings ();代替oAllLinksTable.fnSettings();将解决此问题。

推荐https://datatables.net/forums/discussion/5316/strange-behavior-of-fnsettings

Answer 4

这是简单的答案。使用数据表渲染方法。

示例：

var i = 1;

$("#myTable1").dataTable().fnDestroy();


$('#myTable1').DataTable({

  ajax: base_url + 'specific_function',

  columns: [

    {
      "render": function(data, type, full, meta) {
        return i++;
      }
    },
    {
      "data": "col_2_data"
    },
    {
      "data": "col_3_data"
    },
    {
      "render": function(data, type, full, meta) {
        return '<button class="btn btn-success btn-sm" onclick="editBUT(' + full.id + ')">EDIT</button>';
      }
    }
  ]
});

Answer 5

只需添加以下代码

"columns": [
        {
        "title": "Serial",
        render: function (data, type, row, meta) {
        return meta.row + meta.settings._iDisplayStart + 1;
        }
        }
       ],

Answer 6

只需添加以下代码

"columns": [
        {
        "title": "Serial",
        render: function (data, type, row, meta) {
        return meta.row + meta.settings._iDisplayStart + 1;
        }
        }
       ],

Answer 7

点击下一个分页时，使用以下代码 iDisplayIndex 中断序列号的延续：

"fnRowCallback" : function(nRow, aData, iDisplayIndex){
      $("td:first", nRow).html(iDisplayIndex +1);
      return nRow;
 },

相反，您可以使用 aData 显示序列号的延续：

"fnRowCallback" : function(nRow, aData, iDisplayIndex){
      $("td:first", nRow).html(aData.DT_RowIndex);
      return nRow;
}

Answer 8

"fnDrawCallback": function(oSettings) {
      var count=0;
      $('#myTable').find('tr').each(function() {
        $(this).find('td').eq(0).before('<td>' + count + '</td>');
        count++;
      });
    }

Answer 9

这是与Datatable 1.10一起使用的另一个新解决方案。

在这里简要讨论：https://datatables.net/examples/api/counter_columns.html

$(document).ready(function() {
    var t = $('#example').DataTable( {
        "columnDefs": [ {
            "searchable": false,
            "orderable": false,
            "targets": 0
        } ],
        "order": [[ 1, 'asc' ]]
    } );
                
    t.on( 'draw.dt', function () {
    var PageInfo = $('#example').DataTable().page.info();
         t.column(0, { page: 'current' }).nodes().each( function (cell, i) {
            cell.innerHTML = i + 1 + PageInfo.start;
        } );
    } );
} );

Answer 10

当我们使用服务器端渲染时，一种简单且最佳的显示方式自动递增 Sr 编号而不是表格行 ID...我使用了 >“Laravel Yajra 数据表”

只需使用 return meta.row + 1; .

见下面的示例代码

columns: [
    {data: 'SrNo',
       render: function (data, type, row, meta) {
            return meta.row + 1;
       }
    },
    .... //your Code(Other Columns)
 ]

或者你也可以这样使用

columns: [
        {data: 'SrNo',
           render: function (data, type, row, meta) {
                return meta.row + meta.settings._iDisplayStart + 1;
           }
        },
        .... //your Code(Other Columns)
     ]

Answer 11

$('#users').DataTable({
    processing: true,
    serverSide: true,
    ajax: "",
    columns: [{
          data: id,
          render: function (data, type, row, meta) {
               return meta.row + meta.settings._iDisplayStart + 1;
          }
    }]
});

如何使用jquery在jquery数据表中插入序列号？

11 个答案: