jquery datatable中的自定義搜索

我正在使用jquery數據表並創建像下面這樣的自定義搜索功能。jquery datatable中的自定義搜索

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（）方法重新加載數據表，但它不起作用。代碼有什麼問題。在此先感謝....

來源

2017-08-13 LoneWolf

我不確定你有什麼對你的服務器端代碼，但我相信， DataTables最初應該加載所有行，並且當您在搜索中輸入內容時，它實際上會過濾結果以顯示更少的行。 – Alesana

如果你按下輸入鍵會在第二次獲得控制器的值？ –

@HackbalTeamz當我按下輸入按鈕時，我在控制器中得到空值。 – LoneWolf

我找到了我的問題的解決方案。我只是修改「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(); 
});

來源

2017-08-15 06:33:48 LoneWolf

jquery datatable中的自定義搜索

回答

相關問題