データテーブルの検索は、最新のものではなく、リフレッシュ後の最初のページに来ます。

Question

私は自分のレコードにブートストラップデータテーブルを使用しています。しかし、私がテーブルの2ページ目にいるときに、ページをリフレッシュすると、2ページ目ではなく、テーブルの1ページ目にリダイレクトされ、この問題を解決する方法がわかります。

$("#dataTablesFull, #dataTablesFull2, #dataTablesFull3, #dataTablesFull4").dataTable({ 
        "pageLength": <?php echo getConfigValue("table_records"); ?>, 
        "dom": '<"top"f>rt<"bottom"><"row dt-margin"<"col-md-6"i><"col-md-6"p><"col-md-12"B>><"clear">', 
        "buttons": [ 'copy', 'csv', 'excel', 'pdf', 'print' ], 
        "oLanguage": { 
         "sSearch": "<i class='fa fa-search text-gray dTsearch'></i>", 
         "sEmptyTable": "<?php _e('No entries to show'); ?>", 
         "sZeroRecords": "<?php _e('Nothing found'); ?>", 
         "sInfo": "<?php _e('Showing'); ?> _START_ <?php _e('to'); ?> _END_ <?php _e('of'); ?> _TOTAL_ <?php _e('entries'); ?>", 
         "sInfoEmpty": "", 
         "oPaginate": { 
          "sNext": "<?php _e('Next'); ?>", 
          "sPrevious": "<?php _e('Previous'); ?>", 
          "sFirst": "<?php _e('First Page'); ?>", 
          "sLast": "<?php _e('Last Page'); ?>" 
         } 
        }, 
        "columnDefs": [ { "orderable": false, "targets": -1 } ] } 
       ); 
       $("#dataTablesFullNoOrder, #dataTablesFullNoOrder2").dataTable({ 
        "order": [], 
        "pageLength": <?php echo getConfigValue("table_records"); ?>, 
        "dom": '<"top"f>rt<"bottom"><"row dt-margin"<"col-md-6"i><"col-md-6"p><"col-md-12"B>><"clear">', 
        "buttons": [ 'copy', 'csv', 'excel', 'pdf', 'print' ], 
        "oLanguage": { 
         "sSearch": "<i class='fa fa-search text-gray dTsearch'></i>", 
         "sEmptyTable": "<?php _e('No entries to show'); ?>", 
         "sZeroRecords": "<?php _e('Nothing found'); ?>", 
         "sInfo": "<?php _e('Showing'); ?> _START_ <?php _e('to'); ?> _END_ <?php _e('of'); ?> _TOTAL_ <?php _e('entries'); ?>", 
         "sInfoEmpty": "", 
         "oPaginate": { 
          "sNext": "<?php _e('Next'); ?>", 
          "sPrevious": "<?php _e('Previous'); ?>", 
          "sFirst": "<?php _e('First Page'); ?>", 
          "sLast": "<?php _e('Last Page'); ?>" 
         } 
        }, 
        "columnDefs": [ { "orderable": false, "targets": -1 } ] } 
       ); 
       $("#dataTablesFullDesc, #dataTablesFullDesc2").dataTable({ 
        "order": [[ 0, "desc" ]], 
        "pageLength": <?php echo getConfigValue("table_records"); ?>, 
        "dom": '<"top"f>rt<"bottom"><"row dt-margin"<"col-md-6"i><"col-md-6"p><"col-md-12"B>><"clear">', 
        "buttons": [ 'copy', 'csv', 'excel', 'pdf', 'print' ], 
        "oLanguage": { 
         "sSearch": "<i class='fa fa-search text-gray dTsearch'></i>", 
         "sEmptyTable": "<?php _e('No entries to show'); ?>", 
         "sZeroRecords": "<?php _e('Nothing found'); ?>", 
         "sInfo": "<?php _e('Showing'); ?> _START_ <?php _e('to'); ?> _END_ <?php _e('of'); ?> _TOTAL_ <?php _e('entries'); ?>", 
         "sInfoEmpty": "", 
         "oPaginate": { 
          "sNext": "<?php _e('Next'); ?>", 
          "sPrevious": "<?php _e('Previous'); ?>", 
          "sFirst": "<?php _e('First Page'); ?>", 
          "sLast": "<?php _e('Last Page'); ?>" 
         } 
        }, 
        "columnDefs": [ { "orderable": false, "targets": -1 } ] } 
       ); 

       $("a[data-tab-destination]").on('click', function() { 
        var tab = $(this).attr('data-tab-destination'); 
        $("#"+tab).click(); 
       }); 

Answer 1

あなたはおそらく状態保存機能が必要です。ページのページに戻ったりリフレッシュすると、それはそれはしていた状態を維持するように、それはクッキーで改ページを含むテーブルの状態を保存します。

datatable state save

$(document).ready(function() {$('#example').DataTable({stateSave: true});}); 

Answer 2

あなたができることは、現在のタブにURLハッシュを設定してから、そのタブのクリック機能を呼び出すことです。 （URLにハッシュがあるのが好きでない場合は、これを行うためにセッションのようなものを使用することもできます）。ハッシュオプションについて私が気に入っているのは、ブックマークが機能することです。

$("a[data-tab-destination]").on('click', function() { 
    var tab = $(this).attr('data-tab-destination'); 
    window.location.hash = '#' + encodeURIComponent(tab); 
    $("#"+tab).click(); 
}); 

if(window.loaction.hash) { 
    var tag = decodeURIComponent(window.location.hash.substring(1)); 
    $("a[data-tab-destination]").click(); 
}