javascript - 达到10行后如何触发DataTables中的下一个按钮

Question

如何在达到 10 行后自动单击数据表中的下一步按钮。我添加行的方式是动态的，所以当我到达 11 行时，我想自动执行下一个按钮，以便从第一页移动到第二页。

我尝试使用数据表中的以下代码

但基于文档:

如果多个数据点与请求的数据匹配，则分页将移动到显示第一个实例。如果没有匹配项，则分页不会更改。

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;
} );

所以我想要在达到 11 行后将页面移动到下一页的东西。请帮忙。提前致谢。

这是我的代码:

$('.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

});

这是 fiddle :https://jsfiddle.net/deathnote332/9cn6ctas/

Answer 1

引用:- 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>