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/

Answers 1

  • 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