Как выполнить персонализированную фильтрацию с использованием Datatables и обработки на стороне сервера

Я использую Datatables для отображения табличных данных в своем веб-приложении и настроил его на использование серверная обработка, т.е. запрашивать сервер через AJAX для фильтрованных данных. Я хочу фильтровать в соответствии с дополнительными параметрами, специфичными для моего приложения, то есть соответствующими некоторым пользовательским параметрам (f.ex. через флажок в пользовательском интерфейсе). Как заставить DataTables передавать эти дополнительные параметры фильтра на сервер?

Ответ 1

Решение заключается в использовании параметра 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});
    }
  });
});

Ответ 2

Этот ответ обновлен для версии 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 будут размещаться как данные формы как дополнительные параметры вместе с другими существующими, такими как draw, start, length и т.д., поэтому в зависимости от вашего языка на стороне сервера вы можете их прочитать соответственно.

В реальной жизни scenerio у вас, вероятно, есть кнопка "Поиск" и некоторый ввод, вы можете запустить процесс фильтрации, вызвав

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

при нажатии кнопки.

Ответ 3

Наконец он сделал это, проведя часы!

Я отправлю полный метод здесь для каждой помощи.

Нужно использовать параметр fnServerParams, который позволяет добавлять настраиваемые параметры в XMLHttpRequest, отправленные на сервер. Например:

Вот кофейник, который я использовал:

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 applicationName. Обратите внимание на элемент fnDraw(), который я использовал для включения запроса на перерисовку, когда изменяется входное значение.

Ответ 4

Это сработало для меня

$(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(); }
						}
    },
    } );