javascript - jQuery Datatable - 启用滚动时显示行号

Question

我试图在数据表中显示行号(在第一列中)，但是，它仅显示前几条记录，而不显示其余记录。

我尝试遵循这个例子: https://datatables.net/examples/api/counter_columns.html

我在数据表中启用了滚动条。

var data = [];
        for ( var i=0 ; i<5000 ; i++ ) {
            data.push( [
            '', 
            'First Name ' + i, 
            'Last Name '+ i, 
            'Postal - ' + i, 
            'ZIP - '+ i, 
            'USA' ] );
        }
         
        var t = $('#example').DataTable( {
            data:           data,
            deferRender:    true,
            scrollY:        200,
            scrollCollapse: true,
            scroller:       true,
            info:false
        } );
 
  t.on( 'order.dt search.dt', function () {
      t.column(0, {search:'applied', order:'applied'}).nodes().each( function (cell, i) {
          cell.innerHTML = i+1;
      } );
  } ).draw();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/scroller/1.4.3/js/dataTables.scroller.min.js"></script>

<link href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet"/>
<link href="https://cdn.datatables.net/scroller/1.4.3/css/scroller.dataTables.min.css" rel="stylesheet"/>

<table id="example" class="display nowrap" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th></th>
                <th>ID</th>
                <th>First name</th>
                <th>Last name</th>
                <th>ZIP / Post code</th>
                <th>Country</th>
            </tr>
        </thead>
    </table>

注意:行号与数据无关，并根据过滤器更改。

非常感谢任何建议/帮助。

Answer 1

我发现你的奇怪问题。

您错过了 paging:false 来禁用分页...这会干扰您的行编号目标。

我发现它在这个documentation about scrollY中建议.

还有 scroller:true，它需要分页才能工作...并且它与 ajax 资源结合使用。不是你发布的代码中的情况。

我会让你阅读全文 documentation about scroller 。

<小时/> 看来这两个选项是 friend 。两者择其一。

我让你的行编号在 CodePen 中工作.