2017-02-27 2 views
2

データテーブルの次のボタンが10行に達したら、自動的に次のボタンをクリックする方法。私が行を追加する方法は動的なので、私が11行に達したら、次のボタンを自動化したいので、最初のページから2ページ目に移動します。DataTableの次のボタンを10行に達した後にトリガーする方法

私は、データ・テーブル

から以下のコードを使用しようとしたが、マニュアルのベースました:複数のデータ・ポイントが要求されたデータと一致した場合は、ページングが最初のインスタンスを表示するためにシフトされ

。一致するものがなければ、ページングは​​変更されません。

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 

}); 
ここ

はフィドルです:https://jsfiddle.net/deathnote332/9cn6ctas/

+0

あなたはときに、データ・テーブルことを望ん意味します最後のPAを表示する必要があります。最初のページではない? –

+0

はいそうです。 – Paul

答えて

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>

関連する問題