Я использую jquery datatables 1.10 и пытаюсь найти и отфильтровать таблицу. Я хотел бы использовать текстовое поле поиска, которое выполняет поиск в двух столбцах, и флажок для фильтрации результатов третьего столбца. Вот мои данные:
var url = '@Url.Action("SupportClass1Search", "SupportClass1")';
$('#SupportClass1DataTable').DataTable({
"serverSide": true,
"processing": true,
"ajax": url,
"ordering": true,
"dom": '<"top"prl<"clear">>t<"bottom">pi<"clear">',
"pageLength": 10,
"autoWidth": false,
"columns": [
{ // create a link column using the value of the column as the link text
"data": "SupportClass1Id",
"width": "20%",
"render": function (oObj) { return "<a href='#' onclick='editItem(\"" + oObj + "\")'>" + oObj + "</a>"; },
},
{ "data": "SupportClass1Name", "sWidth": "70%" },
{ // convert boolean values to Yes/No
"data": "Active",
"width": "7%",
"render": function (data, type, full) {
if (data == true)
{ return 'Yes'; }
else
{ return 'No'; }
}
}
]
})
Я хочу отфильтровать 3-й столбец (активный) на основе значения флажка. Приведенный ниже JS работает для фильтрации таблицы, но не захватывает столбец Active, когда я ввожу «Да» или «Нет»:
// use an outside search input
oTable = $('#SupportClass1DataTable').DataTable();
$('#btnSearch').click(function () {
oTable.search($('#txtSearch').val()).draw();
})
Кроме того, я бы предпочел искать столбец Active отдельно, примерно так:
oTable
.column(2).search('Yes')
.columns([0,1]).search($('#txtSearch').val())
.draw();
Но это не работает. Любая помощь приветствуется
2 ответа
Я понял. Используя версию 1.10, вы должны использовать ajax.data:
https://datatables.net/reference/option/ajax.data
В своей инициализации я использовал следующее, чтобы добавить дополнительный параметр к моему вызову ajax:
"ajax": {
"url": url,
"data": function (d) {
d.activeOnly = $('#activeOnly').is(':checked');
}
},
Вот моя полная инициализация:
$(document).ready(function () {
// initialize the data table
var url = '@Url.Action("SupportClass1Search", "SupportClass1")';
$('#SupportClass1DataTable').DataTable({
"serverSide": true,
"processing": true,
"ajax": url,
"ordering": true,
"dom": '<"top"prl<"clear">>t<"bottom">pi<"clear">',
"pageLength": 10,
"autoWidth": false,
"ajax": {
"url": url,
"data": function (d) {
d.activeOnly = $('#activeOnly').is(':checked');
}
},
"columns": [
{ // create a link column using the value of the column as the link text
"data": "SupportClass1Id",
"width": "20%",
"render": function (oObj) { return "<a href='#' onclick='editItem(\"" + oObj + "\")'>" + oObj + "</a>"; },
},
{ "data": "SupportClass1Name", "sWidth": "70%" },
{ // convert boolean values to Yes/No
"data": "Active",
"width": "7%",
"render": function (data, type, full) {
if (data == true)
{ return 'Yes'; }
else
{ return 'No'; }
}
}
]
})
oTable = $('#SupportClass1DataTable').DataTable();
// this is a checkbox outside the datatable
// whose value I wanted to pass back to my controller
$('#activeOnly').click(function () {
oTable.search($('#txtSearch').val()).draw();
})
$('#btnSearch').click(function () {
oTable.search($('#txtSearch').val()).draw();
})
});
Я использую класс в качестве модели для DataTable. Я также добавил сюда параметр / свойство activeOnly:
/// <summary>
/// this class provides a model to use with JQuery DataTables plugin
/// </summary>
public class jQueryDataTableParamModel
{
#region DataTable specific properties
/// <summary>
/// Request sequence number sent by DataTable,
/// same value must be returned in response
/// </summary>
public string draw { get; set; }
/// <summary>
/// Number of records that should be shown in table
/// </summary>
public int length { get; set; }
/// <summary>
/// First record that should be shown(used for paging)
/// </summary>
public int start { get; set; }
#endregion
#region Custom properties
public bool activeOnly { get; set; }
#endregion
}
Это мой контроллер:
public ActionResult SupportClass1Search(jQueryDataTableParamModel param)
{
// initialize the datatable from the HTTP request
var searchString = Request["search[value]"];
var sortColumnIndex = Convert.ToInt32(Request["order[0][column]"]);
var sortDirection = Request["order[0][dir]"]; // asc or desc
// query the database and output to a viewmodel
var lvm = new SupportClass1SearchViewModel { };
if (String.IsNullOrEmpty(searchString))
{
lvm.SupportClass1List = supportClass1Service.GetAll();
}
else
{
lvm.SupportClass1List = supportClass1Service.FindBy(t => (t.SupportClass1Name.Contains(searchString))
&& (t.Active.Equals(param.activeOnly) || param.activeOnly == false));
}
// do a bunch of stuff and retunr a json string of the data
return MyJson;
}
Теперь, когда я устанавливаю флажок activeOnly, он перерисовывает таблицу, передавая контроллеру true или false.
Вы можете использовать подключаемый модуль columnfilter http: // jquery-datatables -column-filter.googlecode.com/svn/trunk/index.html (плагин jQuery Datatables), поскольку он может делать многое из того, что вы ищете. Вот пример в демонстрации jsFiddle здесь. В этом примере я использую 2 поля для фильтрации текста, а третье - раскрывающийся список.
oTable = $("#myTable").dataTable({
bInfo: false,
bSort: false,
bSortable: false,
"data": arrayData,
"columns": [{
"data": "Emp"
}, {
"data": "Name"
}, {
"data": "Role"
}, {
"data": "Notes"
}]
}).columnFilter({
sPlaceHolder : "head:before",
aoColumns : [{
type : "text"
}, {
type : "text"
}, {
type : "select",
values : arrayRoles
}]
});
Похожие вопросы
Новые вопросы
jquery
jQuery — это библиотека JavaScript. Также рассмотрите возможность добавления тега JavaScript. jQuery — это популярная кросс-браузерная библиотека JavaScript, которая упрощает обход объектной модели документа (DOM), обработку событий, анимацию и взаимодействие AJAX, сводя к минимуму расхождения между браузерами. Вопрос с тегом jQuery должен быть связан с jQuery, поэтому jQuery должен использоваться рассматриваемым кодом, и в вопросе должны быть как минимум элементы, связанные с использованием jQuery.