Я довольно новичок в Datatables. У меня определена следующая таблица:
$("#employeeTable").DataTable({
"processing": true, // Show progress bar
"serverSide": true, // Server side processing
"filter": true, // Show the search (filter) box
"orderMulti": false, // Disable multiple column at once
"order": [[2, "asc"]], // Sort by last name by default
"paging": false, // Turns on or off paging
"info": false, // Turns off information at the bottom of the table related to record counts
"lengthChange": false, // Disables the records per page display if paging is enabled
"pageLength": 25, // This doesn't really matter if it's controlled in the backend
"searching": false, // Disable the default search
language: { // Change the way the Search box looks
searchPlaceholder: "Enter Last Name",
search: "",
},
"ajax": {
"url": "/EmployeeMobile/LoadMobileData",
"type": "POST",
"datatype": "json"
},
"columnDefs":
[
{
"targets": [0],
"visible": false,
"searchable": false
}
],
// The value in "data" must match the name of the column coming from the controller. The value in "name" can be anything but it should reflect the name of the column contained in
// the source database table.
"columns": [
{ "data": "RowId", "name": "RowId", "autoWidth": true },
{ "data": "EmployeeId", "name": "EmployeeId", "autoWidth": false, "width": "80px" },
{ "data": "LastName", "name": "LastName", "autoWidth": false, "width": "100px" },
{ "data": "FirstName", "name": "FirstName", "autoWidth": false, "width": "100px" },
{ "data": "IsActive", "name": "IsActive", "autoWidth": false, "width": "5%", "render": displayCheckbox },
{ "data": "IsAvailable", "name": "IsAvailable", "autoWidth": false, "width": "5%", "render": displayCheckbox },
{ "data": "OnHold", "name": "OnHold", "autoWidth": false, "width": "5%", "render": displayCheckbox },
{ "data": "OnProbation", "name": "OnProbation", "autoWidth": false, "width": "5%", "render": displayCheckbox },
{
"width": "10%", "render": function (data, type, full, meta) { return '<a class="btn btn-normal" href="/Demo/Edit/' + full.RowId + '">Edit</a>' }
},
{
data: null, "width": "10%", render: function (data, type, row) { return "<a href='#' class='btn btn-normal' onclick=DeleteData('" + row.RowId + "'); >Delete</a>"; }
},
]
});
Все это прекрасно работает. У меня есть пользовательское окно поиска, которое запускает метод рисования в таблице после ввода трех символов. Это выглядит так:
function setupEmployeeSearch() {
$('#employeeLastName').keyup(function () {
var searchText = $(this).val();
if (searchText.length >= 3 || searchText.length == 0) {
var table = $('#employeeTable').DataTable();
table.search(searchText).draw();
}
})
}
Метод draw срабатывает после ввода трех символов. Тем не менее, текст поиска не попадает в мой метод контроллера, который выглядит следующим образом:
public ActionResult LoadMobileData(List<ColModel> columns, List<Order> order, Search search, int? start, int? length, int? draw)
{
...
...
}
Поддерживающие классы для этого выглядят следующим образом:
public class ColModel
{
public string data { get; set; }
public string name { get; set; }
public string searchable { get; set; }
public string orderable { get; set; }
}
public class Order
{
public string dir { get; set; }
public string column { get; set; }
}
public class Search
{
public string value { get; set; }
public string regex { get; set; }
}
Search.regex is false и значение Search.value равно нулю при выполнении draw ().