Shift the table's paging to display a given tr element

This plug-in will take a tr element and alter the table's paging to make that tr element (i.e. that row) visible.

Plug-in code

jQuery.fn.dataTableExt.oApi.fnDisplayRow = function ( oSettings, nRow )
    // Account for the "display" all case - row is already displayed
    if ( oSettings._iDisplayLength == -1 )

    // Find the node in the table
    var iPos = -1;
    for( var i=0, iLen=oSettings.aiDisplay.length ; i<iLen ; i++ )
        if( oSettings.aoData[ oSettings.aiDisplay[i] ].nTr == nRow )
            iPos = i;

    // Alter the start point of the paging display
    if( iPos >= 0 )
        oSettings._iDisplayStart = ( Math.floor(i / oSettings._iDisplayLength) ) * oSettings._iDisplayLength;
        if ( this.oApi._fnCalculateEnd ) {
            this.oApi._fnCalculateEnd( oSettings );

    this.oApi._fnDraw( oSettings );


This plug-in is available on the DataTables CDN:


Note that if you are using multiple plug-ins, it is beneficial in terms of performance to combine the plug-ins into a single file and host it on your own server, rather than making multiple requests to the DataTables CDN.

Version control

If you have any ideas for how this plug-in can be improved, or spot anything that is in error, it is available on GitHub and pull requests are very welcome!


// Display the 21st row in the table
  var table = $('#example').dataTable();
  table.fnDisplayRow( table.fnGetNodes()[20] );