搜索一个jQuery数据表 [英] searching a jquery datatables
问题描述
我正在使用jquery数据表1.10,并尝试搜索和过滤表.我想使用一个搜索文本框来搜索两列,并使用一个复选框来过滤第三列的结果.这是我的数据表:
I am using jquery datatables 1.10 and trying to search and filter a table. I would like to use a search text box that searches two columns and a check box to filter the results of a third column. Here is my datatable:
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'; }
}
}
]
})
我想基于复选框值过滤第三列(活动).下面的JS可以过滤表格,但是当我输入是"或否"时并没有使用活动"列:
I want to filter the 3rd column (Active) based on a checkbox value. The JS below works to filter the table but is not picking up the Active column when I enter "Yes" or "No":
// use an outside search input
oTable = $('#SupportClass1DataTable').DataTable();
$('#btnSearch').click(function () {
oTable.search($('#txtSearch').val()).draw();
})
此外,我希望单独搜索活动"列,就像这样:
Also, I would prefer to search the Active column separately, kind of like this:
oTable
.column(2).search('Yes')
.columns([0,1]).search($('#txtSearch').val())
.draw();
但这不起作用.感谢您的帮助
but this doesn't work. Any help is appreciated
推荐答案
我知道了.使用1.10版时,您必须使用ajax.data:
I figured it out. Using version 1.10 you have to use ajax.data:
https://datatables.net/reference/option/ajax.data
在初始化过程中,我使用以下代码为我的ajax调用添加了一个额外的参数:
In my initialization, I used the following to add an extra parameter to my ajax call:
"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参数/属性:
I am using a class as a model for the DataTable. I added the activeOnly parameter/property here also:
/// <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传递给控制器的表.
Now, when I click on the activeOnly checkbox and it redraws the table passing true or false to the controller.
这篇关于搜索一个jQuery数据表的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!