How to trigger next button in DataTables after it reaches to 10 rows

How to automatically click next button in Data-tables after it reaches to 10 rows. The way I add rows is dynamic so when I reaches to my 11 rows i want to automate the next button so from the first page it will move to 2nd page.

I've tried to use the code below from Data-tables

But base on documentation:

If multiple data points match the requested data, the paging will be shifted to show the first instance. If there are no matches, the paging will not change.

jQuery.fn.dataTable.Api.register( 'page.jumpToData()', function ( data, column ) {
    var pos = this.column(column, {order:'current'}).data().indexOf( data );

    if ( pos >= 0 ) {
        var page = Math.floor( pos / this.page.info().length );
        this.page( page ).draw( false );
    }

    return this;
} );

So i want something that will shift the page to the next page after it reaches 11 rows. Please help. Thanks in advance.

Here is my code:

$('.btn').on( 'click', function () {
      var dTable1 = $('#list-table').DataTable();

       dTable1.row.add({
                "brand": $('#brand').val(),
                "category": $('#category').val(),
                "code": $('#code').val(),
                "description":  $('#description').val(),
                "unit": $('#unit').val(),
                "qty": $('#input-qty').val(),
                "unit_price":   $('#unit_price').val(),
                "action": '<i class="glyphicon glyphicon-remove"></i>'
            }).draw();

        $('#list-table').dataTable().fnPageChange('last'); //This is not working

});

Here is the fiddle : https://jsfiddle.net/deathnote332/9cn6ctas/

javascript jquery datatable
bhargav

Answers 1

Submit Answer
  • bhargav

    Reference:- Datatables -jump to last page by-default

    var dTable1 = $('#search-table').DataTable();
$('.btn').on('click',function(){
dTable1.row.add([
    "id",
    "brand",
    "category",
    "code",
    "description",
    "unit",
    "qty",
    "unit_price"
]).draw();
$('#search-table').dataTable().fnPageChange('last');
});
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>

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

<table class="table table-striped table-bordered dt-responsive nowrap" id="search-table" width="100%">
        <thead>
        <th>Id</th>
        <th>Brand</th>
        <th>Category</th>
        <th>Code</th>
        <th>Description</th>
        <th>Unit</th>
        <th>Qty</th>
        <th>Unit Price</th>

        </thead>
</table>
            
<button type="submit" class="btn btn-primary">add</button>

Related Articles