搜索jQuery數據表

Question

我正在使用jQuery數據表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'; } 
      } 
     } 
    ] 
}) 

我想根據複選框值篩選第三列（活動）。下面的JS工程，以過濾表，但不拾取激活列當我輸入「是」或「否」：這樣

// 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(); 

但這不起作用。任何幫助表示讚賞

Answer 1

我想通了。使用版本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給控制器表。

Answer 2

你可能想要使用columnfilter插件http://jquery-datatables-column-filter.googlecode.com/svn/trunk/index.html（一個jQuery數據表插件），因爲它可以做你正在尋找什麼。這是jsFiddle Demo here中的一個示例。在這個例子中，我使用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 
    }] 
});