jquery 数据表中的自定义搜索

Question

我正在使用 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() 方法重新加载数据表，但它不起作用。代码有什么问题。提前致谢....

Answer 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();
});

jquery 数据表中的自定义搜索

Custom search in jquery datatable

asp.net-mvc

jquery

datatables-1.10