Question

我正在尝试在datatable中显示行号（在第一列中）但是，它仅显示前几个记录而不显示其余记录。

我试着效仿这个例子： 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。

<小时/> 好像两个选项都是朋友。它是一个或另一个。

我已将您的行号编入CodePen。

jQuery Datatable - 启用Scroller时显示行号

1 个答案: