搜索一个jQuery数据表

本文介绍了搜索一个jQuery数据表的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我正在使用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:

datatables/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.