13

Datatablesを使用してWebアプリケーションに表形式のデータを表示し、サーバー側の処理を利用するように構成しました。つまり、AJAXを介してサーバーにフィルター処理されたデータを照会します。アプリケーションに固有の追加パラメーター、つまり一部のユーザーオプションに対応するパラメーター（UIのチェックボックスを使用するなど）に従ってフィルター処理したい。DataTablesにこれらの追加のフィルターパラメーターをサーバーに渡させるにはどうすればよいですか？

4

5 に答える 5

16

この回答はバージョン1.10.6用に更新されています

これは、ajaxオプションを使用して実行できるようになりました。

サンプルコード

 $table.dataTable({
            "ajax":  {
                "url": "example.com/GetData",
                "type": "POST",
                "data": function(d) {
                    d.Foo = "bar";
                    d.Bar = "foo";
                    d.FooBar = "foobarz";
                }
            },
            "serverSide":true,
        });

Foo、Bar、FooBarは、描画、開始、長さなどの他の既存のパラメーターとともに追加パラメーターとしてフォームデータとして投稿されるため、サーバー側の言語に応じてそれらを読み取ることができます。

実際のシーンでは、おそらく検索ボタンといくつかの入力があります。を呼び出すことでフィルタリングプロセスをトリガーできます。

        var table = $table.DataTable();
        table.ajax.reload();

ボタンがクリックされたとき。

于 2015-05-25T02:31:11.163 に答える
15

解決策は、DataTablesのfnServerParamsオプションを使用することです。これにより、サーバーに送信されるXMLHttpRequestで送信されるカスタムパラメーターを追加できます。例えば：

$(document).ready(function() {
  $('#example').dataTable({
    "bProcessing": true,
    "bServerSide": true,
    "sAjaxSource": "/IndexXhr",
    "fnServerParams": function (aoData) {
        var includeUsuallyIgnored = $("#include-checkbox").is(":checked");
        aoData.push({name: "includeUsuallyIgnored", value: includeUsuallyIgnored});
    }
  });
});
于 2012-11-30T11:26:55.223 に答える
4

何時間もかけてようやくやった！

私は皆の助けのためにここに完全な方法を投稿します。

fnServerParamsサーバーに送信されるXMLHttpRequestで送信されるカスタムパラメーターを追加できるオプションを使用する必要があります。例えば：

これが私が使用したcoffescriptです：

jQuery ->
  table = $('#logs').dataTable
    bProcessing: true
    bServerSide: true
    sAjaxSource: $('#logs').data('source')
    fnServerParams: (aoData) ->
      applicationName = $("#applicationName").val()
      aoData.push
        name: "applicationName"
        value: applicationName

      return

  $("#applicationName").on "change", ->
    table.fnDraw()
    return

私のHTMLファイルには、idのinput要素が含まれていますapplicationName。fnDraw()入力値が変更されるたびに再描画要求を有効にするために使用した要素に注意してください。

于 2014-06-12T18:26:50.163 に答える
1

動的パラメータ、これは私のために働いています、最良の解決策のようです

t = $("#tbl_SearchCustomer").DataTable({
    processing: true,
    serverSide: true,
    info: true,
    ajax: {
        url: '../Data/SearchCustomer',
        data: function (data) {
            data.CustomerCategoryID = $("#CustomerCategoryID").val(); // dynamic parameter
            delete data.columns;
        }
    },
    deferRender: true,
    columns: [
        { "data": "FullName" },            
    ],       
    dom: 'lfrtip'
});
于 2018-08-13T06:48:44.430 に答える
0

これは私のために働いた

$(document).ready(function() {
     table = $('#okmorders').DataTable( {
        // "ajax": 'http://cdpaha2.dev/admin/organizations/okm_orders'
				serverSide: true,
				"paging":   true,
				"searching":  false ,
        // "info":     false,
        "bLengthChange": false,
        // "iDisplayLength":50,
        // "aaSorting": [],
        // "oLanguage": { "sEmptyTable": "No orders present " } ,
        "aoColumnDefs" : [
          { 'bSortable' : false, 'aTargets' : [ 6 ]}
				],

			// 	"fnServerParams": function (aoData) {
			// 		 aoData.push({name: "includeUsuallyIgnored"});
			//  },
				ajax: {
		        url: 'yoururl.json' ,
		        type: 'POST',
						data:
						{
							'startDate':function(){return $("#startDate").val(); },
							'endDate': function(){return $("#endDate").val(); } ,
							'placedBy':function(){return $("#placedBy").val(); },
							'customer_po': function(){return $("#customer_po").val(); } ,
							'customer_ref': function(){return $("#customer_ref").val(); }
						}
    },
    } );

于 2017-09-18T13:02:53.673 に答える