JQuery Datatable Server Side Pagination с внешним полем поиска

Question

У меня есть JQuery Datatable, который отображает некоторые данные и имеет внешнее поле поиска. Я пытаюсь реализовать разбиение на страницы сервера с помощью JQuery Datatable plugin. Но проблема заключается в том, он имеет внешнее поле поиска, в котором пользователь может выбрать дату (в основном месяц и год) и искать записи. Поэтому каждый раз, когда пользователь выбирает поиск, данные должны обновляться. Может кто-нибудь мне помочь.

Datatable

var LeaveDetailsTable = $('#LvReprtTable').DataTable({ 
    "pageLength": 5, 
    "processing": true, 
    "serverSide": true,"searching": false,"bLengthChange": false, 
    "ajax": { 
     "url": "GetLeaveDetails", 
     "type": "POST", 
     "datatype": "json", 
     "data": function (d) { 
      d.EmpId = empId; 
      d.UserType = userType; 
      d.Month = "1"; 
      d.year = "2017"; 
     } 
    }, 
    "columns": [ 
      { "data": "_fromdate" }, 
      { "data": "_todate" }, 
      { "data": "_strLvType" }, 
      { "data": "_leavedurationtype" }, 
      { "data": "_leavedurationtype" }, 
      { "data": "_leavedurationtype" }, 
     ], 
    "columnDefs": [{ 
     "targets": -1, 
     "data": data, 
     "defaultContent": "<button>Click!</button>" 
    }] 
    ,"language": 
    { 
     "processing": "<div class='row text-center waitIconDiv' id='LoadIconDiv'><img alt='Progress' src='~/Content/images/wait_icon.gif' width='50' height='50' id='imgProgLvRprt' /></div>" 
    }, 
}); 

Month и year могут различаться.

Answer 1

Вы должны были бы вызвать ajax.reload() на DataTable, например, в то, что событие любого элемента вы хотите:

LeaveDetailsTable.ajax.reload(); 

который разместим состояние данных с вашими новыми параметрами, которые добавлены в свойство data к действию контроллера.

Вы также можете посмотреть this article (Server Side Advanced Search using JQuery DataTables), в котором объясняется, как отправлять настраиваемые параметры в действие контроллера с помощью JQuery DataTables.

Answer 2

Для этого я рекомендую использовать метод jquery onchange. Например:

$('.input-class').on('change', function() { 
    $table.fnDraw(); 
}); 

Здесь $table относится название вашей Datatable и fnDraw() является Datatable функцией, чтобы обновить таблицу. И, очевидно, вам нужно добавить данные из поля поиска в запрос. Для этого я рекомендую вам идти по ссылке ниже:

datatables