CODEWITHSUNDEEP
javascriptjquerydatatables
JGV
JGV

Reputation: 5187

jQuery Datatable - Displaying row number when Scroller is enabled

I am trying to displaying the row number (in first column) in datatable but, it is displaying only for first few records and not displaying for the rest of them.

I tried to follow this example: https://datatables.net/examples/api/counter_columns.html

I have enabled scroller in my datatable.

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>

NOTE: Row number aren't tied to the data and change based on filters.

Any suggestion / help is greatly appreciated.

Upvotes: 0

Views: 1559

Answers (1)

Louys Patrice Bessette
Louys Patrice Bessette

Reputation: 33933

I found your strange issue.

You missed paging:false to disable pagination... Which was interfering with the row numbering objective you have.

I found it suggested in this documentation about scrollY.

And there was scroller:true, which needs pagination to work... And which is used in conjunction with an ajax ressource. Not your case in posted code.

I'll let you read the whole documentation about scroller.

Seems like the two options are friends. It's one or the other.

I made your row numbering to work in CodePen.

Upvotes: 2

Related Questions