web-dev-qa-db-ja.com

jQuery Datatables：Ajaxページネーションによる検索とフィルタリング

Datatablesリストに表示する36000エントリのSQLテーブルがあります。私がこのように開発したので、ページネーションはうまくいきます：

var table = $('.datatable').DataTable({
    pageLength : 20,
    lengthChange : false,
    processing : true,
    serverSide : true,
    ajax : {
        url :"ajax.php",
        type: "post",
    }
});

私のファイルajax.phpで、ページ番号で設定された制限に従って、行をエコー（JSONエンコード）します。

問題は、ネイティブのフィルタリングと検索が機能しないことです。列をフィルタリングする場合、「Processing」レイヤーが表示されてから消えますが、データは変わりません。テーブルを調査したいのですが、何も起こりません。

だから、ここに私の質問があります：

  1. 検索とフィルタリングを復元するにはどうすればよいですか？
  2. すべての行（表示されている行だけでなく）をフィルタリングして検索するにはどうすればよいですか？ Ajaxでは、はい、しかしJqueryではどうですか？

前もって感謝します

編集：アブドゥルレーマンさん、ありがとうございます。検索部分を管理することができました。これが私がやったことです：

var table = $('.datatable').DataTable({
    pageLength : 20,
    lengthChange : false,
    processing : true,
    serverSide : true,
    ajax : {
        data : function(d) {
            d.searching = get_search($('.datatable'));
        },
        url :"ajax.php",
        type: "post",
    },
    searching : false,
});

$('.datatable thead th').each(function() {
    var title = $(this).data('name');
    $('.datatable').find('tfoot tr').append('<td><input type="text" name="'+title+'"/></td>');
});

table.columns().every(function() {
    var that = this;
    $('input', this.footer()).on('keyup', function(e) {
        that.search(this.value).draw();
    }
});

function get_search(datatable) {
    var result = [];
    datatable.find('tfoot').find('input').each(function() {
        result.Push([$(this).attr('name'), $(this).val()]);
    });
    return result;
}

フィルタリングのために、私は醜いコードを開発しました：

$('.datatable').find('th').click(function() {
    var item = $(this);
    removeClasses($('.datatable'), item.index());
    if(item.hasClass('sorting_asc')) {
        item.removeClass('selected_asc').addClass('selected_desc');
    } else {
        item.removeClass('selected_desc').addClass('selected_asc');
    }
});

function get_sorting(datatable) {
    var result = false;
    datatable.find('th').each(function() {
        var item = $(this);
        var name = item.data('name');
        if(item.hasClass('selected_asc')) {
            result = name+' ASC';
        } else if(item.hasClass('selected_desc')) {
            result = name+' DESC';
        } else {
            // continue
        }
    });
    return result;
}

function removeClasses(datatable, index) {
    datatable.find('th').each(function() {
        if($(this).index() !== index) {
            $(this).removeClass().addClass('sorting');
        }
    });
}
jquerysearchdatatablesfilteringpaginate
6
Pauloscorps

サーバー側ですべての検索とフィルタリングを行う必要があります。

検索/フィルターまたはページのリクエストごとに、データテーブルはこれらすべてをフォームデータとしてサーバーページに渡します。参照 https://www.datatables.net/manual/server-side

このフォームデータを使用して、sqlテーブルのレコードをフィルター処理/検索/ページ分割し、それに応じてクライアントに渡す必要があります。

データテーブルは単にサーバーから取得するものを示しています。

9
Abdul Rehman Sayed