jQuery数据表中的自定义搜索答案

【问题标题】：Custom search in jquery datatablejQuery数据表中的自定义搜索
【发布时间】：2018-01-21 14:22:00
【问题描述】：

我正在使用 jquery 数据表并创建自定义搜索功能，如下所示。

HTML 代码：

<table>
<tr>
    <td>First Name</td>
    <td><input type="text" id="txtFirstName" /></td>
    <td>Last Name</td>
    <td><input type="text" id="txtLastName" /></td>
</tr>
<tr>
    <td>From Date</td>
    <td><input type="text" id="txtFromDate" /></td>
    <td>To Date</td>
    <td><input type="text" id="txtToDate" /></td>        
    </tr>
<tr>
    <td>Address</td>
    <td><input type="text" id="txtAddress" /></td>
    <td><input type="button" id="btnSearch" value="Search" /></td>   
</tr>
 </table>
 <table id="mytable">
 <thead>
    <tr>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Address</th>
        <th>Birth Date</th>
    </tr>
  </thead>
  </table>

脚本：

$(document).ready(function () {

    $("#txtFromDate, #txtToDate").datepicker({ dateFormat: 'dd MM yy' });

    var MyDataTable = $("#mytable").dataTable(
        {
            "processing": true,
            "serverSide": true,
            "ajax":
          {
              "url": "/Home/GetData",
              "type": "POST",
              "dataType": "JSON",
              //"contentType": "JSON",
              "data": {
                  "FirstName": $("#txtFirstName").val().trim(),
                  "LastName": $("#txtLastName").val().trim(),
                  "Address": $("#txtAddress").val().trim(),
                  "FromDate": $("#txtFromDate").val(),
                  "ToDate": $("#txtToDate").val()
              }
          },
            columns: [
            { data: 'FirstName' },
            { data: 'LastName' },
            { data: 'Address' },
            {
                data: 'DOB',
                render: function (data, type, row) {
                    var rawdate = data.substr(6);
                    var dt = new Date(parseFloat(rawdate));
                    return $.format.date(dt, "dd MMM yyyy");
                }
            }
            ]
        });

    $("#btnSearch").click(function () {
        //1. draw it's not working
        //MyDataTable.draw();
        //2. ajax.reload it's not working
        //MyDataTable.ajax.reload(null, true);
    });
});

我在服务器端的代码

[HttpPost]
    public JsonResult GetData(MyViewModel info)
    {
      ............
    }

MyViewModel.cs

public class MyViewModel: DTParameters
{
    public string FirstName { get; set; }
    public string LastName { get; set; }
    public string Address { get; set; }
    public DateTime? FromDate { get; set; }
    public DateTime? ToDate { get; set; }
}

我的问题是，当我第一次加载页面时，它转到控制器操作方法 GetData，而我的模型 MyViewModel 得到正确的空值。当我输入一些搜索条件时，即。名字，姓氏并点击搜索按钮我想将输入的值传递给服务器端，但我得到的是空值。为了将值传递给服务器端，我尝试使用 dataTable().draw() 方法和 dataTable().ajax.reload() 方法重新加载数据表，但它不起作用。代码有什么问题。提前谢谢....

【问题讨论】：

我不确定您的服务器端代码有什么，但我相信使用 DataTables 它最初应该加载所有行，当您在搜索中键入内容时，它实际上会过滤结果以显示你的行数更少。
如果按回车键第二次会在控制器中获得值吗？
@HackbalTeamz 当我按下回车按钮时，我在控制器中得到空值。
@Alesana 我正在尝试实现自定义搜索功能。在内置功能中是的，有自动过滤器。
@LoneWolf 你也可以发送 MyViewModel 详细信息

标签： jquery asp.net-mvc datatables-1.10

【解决方案1】：

我找到了我的问题的解决方案。我只是将“ajax”部分修改为喜欢这个

"ajax":
      {
          "url": "/Home/GetData",
          "type": "POST",
          "dataType": "JSON",
          //"contentType": "JSON",
          "data": function ( d ) {
                    return $.extend( {}, d, {
                      "FirstName": $("#txtFirstName").val().trim(),
                      "LastName": $("#txtLastName").val().trim(),
                      "Address": $("#txtAddress").val().trim(),
                      "FromDate": $("#txtFromDate").val(),
                      "ToDate": $("#txtToDate").val()
                    });
          }
      },

在点击按钮时，我使用了以下代码：

$("#btnSearch").click(function () {
    $("#mytable").DataTable().draw();
});

【讨论】：