web-dev-qa-db-ja.com

Datatables-コールバック後も選択したページ番号を保持

たとえば、コンテンツのステータスを変更したいなど、何かを変更する必要があるデータテーブルがありますが、このコンテンツはテーブルの3ページ目にあります。変更すると、datatableが1ページ目に更新されます。私がやろうとしているのは、選択したページ番号を保持し、更新後にコールバックすることです。それは可能ですか?

ところで、私はデータテーブル1.9.4を使用しています

編集:[〜#〜]ソリューション[〜#〜]

私が行ったことは、データテーブルで行うすべてのアクションでページ番号を保持し、それをコントローラーに送信してから、TempDataを介して使用することです。誰かが解決策について手を必要としているなら、私に知らせてください、私はより詳細に説明することができます。

7
Burak Karakuş

アプリ全体にページ番号が渡されないように、データテーブルの状態をローカルストレージに保存します。これが私のやり方です:

$('#offersTable').dataTable({
        "bStateSave": true,
        "fnStateSave": function (oSettings, oData) {
            localStorage.setItem('offersDataTables', JSON.stringify(oData));
        },
        "fnStateLoad": function (oSettings) {
            return JSON.parse(localStorage.getItem('offersDataTables'));
        }
    });

これは、別のページに移動して、最後に選択したページに(戻るボタンを使用して)戻りたい場合に非常に便利です。

ドキュメントも参照してください: https://datatables.net/blog/2012-01-16

28

DataTables 1.10では、最初のパラメーターとしてfalsedraw()関数に渡した場合、再描画後も同じページにとどまることができます。

table.row(index).data(data).draw(false)
15
Shimon S

サーバー側データテーブルを使用している場合は、ajax.reload()関数を使用してデータテーブルを再読み込みできます。のように使用

var dt = $("#table").DataTable();
dt.ajax.reload(null, false); // false if you don't want to refresh paging else true.

https://datatables.net/reference/api/ajax.reload() リンクを参照してください。

5
Nagesh Katke
1
Craig Lotter

現在のページング位置を維持しながらテーブルを再描画します。

var table = $('#example').DataTable();
table.draw( false );
1
Igor Tepordei

ページ番号3のajaxを使用してデータを更新していて、データテーブルのデータを更新した後、再び最初のページに移動したくない場合は、テーブルのデータを更新するが、最初にリダイレクトしないソリューションを次に示します。ページ。同じページの変更が反映されます。

これ以下willnotredirect tofirstajaxを使用してデータテーブルを更新/再読み込みした後のページ

$('#YOUR_TABLE_ID').DataTable().ajax.reload(null, false); //without refresh table<<page  will not change>>

enter image description here

以下willredirectto firstpageafter refresh/ajaxを使用してデータテーブルをリロードする

  $('#YOUR_TABLE_ID').DataTable().ajax.reload(); //with refresh table <<page will change>>

enter image description here

1
Manthan Patel

これは私がそれをする方法であり、それは私のために働くでしょう。

$.ajax({
        url: "/CollectionHistory/Search",
        data: { "licenseeId": licenseeId, "locationId": locationId, "month": monthId, "year": yearId, "pageNumber": 1 },
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (response) {
            if (table != null) {
                table.clear();
                table.destroy();
            }
            localStorage.setItem("manageLicenseeDataStateSave", "0");
            table = $("#collection_history").DataTable({
                "data": response.SalesData,
                "columns": [
                    { "data": "LocationName", "name": "Location Name", "autowidth": true, className: "text-center" }                   
                "bLengthChange": false,
                "bInfo": false,
                "bFilter": false,
                "ordering": true,
                "stateSave": true,
                "language": {
                    "paginate": {
                        "previous": "PREV",
                        "next": "NEXT",
                    }
                }
            });
        },
        error: function () {
            window.location.href = "/Home/HandleError";
        }
    });
0
Abhay.Patil

DataTablev1.10.7でこれを行う方法は次のとおりです。
DataTable状態をCookieに保存します。

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