如何在JQuery DataTable生成的表上添加行号和服务器端数据源

Question

我使用JQuery DataTable来绑定和显示我的数据.但是,我无法从客户端向生成的网格添加行号.这是我的代码:

HTML

<table id="applications_list" class="table table-bordered datagrid">
    <thead>
        <tr>
            <th><?php echo __('No.'); ?></th>
            <th><?php echo __('Application Code'); ?></th>
            <th><?php echo __('Application Name'); ?></th>
            <th><?php echo __('Created By'); ?></th>
            <th><?php echo __('Created Date'); ?></th>
            <th><?php echo __('Action'); ?></th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>

使用Javascript

$('#applications_list').dataTable({
    "bLengthChange": false,
    "bFilter": true,
    "bFilter": false,
    "bProcessing": true,
    "bServerSide": true,
    "sPaginationType": "full_numbers",
    "sAjaxSource": config.siteURL  + "/applications/ajax_index",
    "sServerMethod": "POST",
    "aoColumns": [
        { "mData": null, "bSortable": false },
        { "mData": "app_applicationcode",  "sName": "app_applicationcode" },
        { "mData": "app_applicationname", "sName": "app_applicationname" },
        { "mData": "app_createdby", "sName": "app_createdby" },
        { "mData": "app_createddate", "sName": "app_createddate" },
        { "mData": "app_applicationcode", "bSortable": false, "mRender": function(data) {
            return '<a href="' + config.siteURL + '/applications/delete/' + data + '" class="confirm_delete"><i class="">x</i></a>' 
        }},
   ],
    "aaSorting": [[ 0, 'asc' ]],
});

我在这里阅读文档,但它不起作用.任何人都可以帮我解决这个问题吗？

Answer 1

在“fnRowCallback”中添加以下代码：

对于数据表 1.10

"fnRowCallback": function (nRow, aData, iDisplayIndex) {
     var info = $(this).DataTable().page.info();
     $("td:nth-child(1)", nRow).html(info.start + iDisplayIndex + 1);
     return nRow;
 }

Answer 2

对于数据表 1.10.4，

"fnCreatedRow": function (row, data, index) {
            $('td', row).eq(0).html(index + 1);
        }

Answer 3

最佳解决方案：

"columns": [

    { "data": null,"sortable": false, 
       render: function (data, type, row, meta) {
                 return meta.row + meta.settings._iDisplayStart + 1;
                }  
    },
......
]

Answer 4

这可以通过在rowCallback中使用fnPagingInfo api来获取页面和显示长度并使用它来计算行号，如下所示：

对于数据表 < 1.10

$('#example').dataTable({
  "fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
     var page = this.fnPagingInfo().iPage;
     var length = this.fnPagingInfo().iLength;
     var index = = (page * length + (iDisplayIndex +1));
     $('td:eq(0)', nRow).html(index);
  }
});

对于数据表 == 1.10

$('#example').dataTable({
  "rowCallback": function( row, data, iDisplayIndex ) {
     var info = this.api.page.info();
     var page = info.page;
     var length = info.length;
     var index = = (page * length + (iDisplayIndex +1));
     $('td:eq(0)', row).html(index);
  }
});

注意：对于 DataTables < 1.10，您必须将fnPageInfo.js脚本添加到您的页面