如何将其他参数传递给 Jquery Datatable Ajax 调用

Question

我有一个带有服务器端操作的Jquery Datatable。在这里，我需要搜索日期时间列之间的日期。我想将FromDate和ToDate输入字段值传递给 jquery 数据表 ajax 调用方法。

这是我到目前为止所做的：

输入字段：

<table class="table table-bordered table-condensed" border="0" cellspacing="5" cellpadding="5">
<tbody>
<tr>
<td>From Date: <input type="text" id="fromDate" name="fromDate" value=""></td>
<td>To Date: <input type="text" id="toDate" name="toDate"></td>
</tr>
</tbody>
</table>

Jquery 数据表代码：

<script>
$(document).ready(function () {
// Setup - add a text input to each header cell
$('#myTable thead tr:eq(0) th:not(:last)').each(function () {
var title = $(this).text();
$(this).html('<input type="text" placeholder="Search ' + title + '" />');
});
var table = $('#myTable').DataTable({
//"scrollY": "300px",
"scrollX": true,
"fixedColumns": {
leftColumns: 1,
rightColumns: 1
},
"AutoWidth": false,
"processing": true, // for show progress bar
"serverSide": true,
"aLengthMenu": [[2, 5, 6, -1], [2, 5, 6, "All"]],
"iDisplayLength": 2,

"ajax": {
"url": "/Payment/DueCollectioListLoad",
"type": "POST",
"datatype": "json",
//this is what i have done to pass the input fields values
"data": { fromDate: $("#fromDate").val(), toDate: $("#toDate").val()}
},
"columns": [
//here is other column fields
]
});
//// Apply the search
$(table.table().container()).on('focusout', 'thead input', function () {
table.column($(this).parent().index() + ':visible')
.search(this.value)
.draw();
});
$('#maxValue').on('focusout', function () {
table.draw();
});

});

</script>

下面是控制器操作方法：

public ActionResult DueCollectioListLoad(string fromDate, string toDate)
{
//Here is necessary code
}

一切正常，但不幸的是，fromDate和toDate参数值总是为空。请帮忙！

Answer 1

DataTable参数对象应如下所示：

public class DataTableParams
{
public int Draw { get; set; }
public int Start { get; set; }
public int Length { get; set; }
public ColumnRequestItem[] Columns { get; set; }
public OrderRequestItem[] Order { get; set; }
public SearchRequestItem Search { get; set; }
// here are the two additional properties
public string FromDate { get; set; } 
public string ToDate { get; set; }
}
public class ColumnRequestItem
{
public string Data { get; set; }
public string Name { get; set; }
public bool Searchable { get; set; }
public bool Orderable { get; set; }
public SearchRequestItem Search { get; set; }
}
public class OrderRequestItem
{
public int Column { get; set; }
public string Dir { get; set; }
}
public class SearchRequestItem
{
public string Value { get; set; }
public bool Regex { get; set; }
}

然后在数据表ajax：

"ajax":{
................
'contentType': 'application/json',
'data': function(d) {
d.FromDate = $("#fromDate").val(),
d.ToDate = $("#toDate").val()
return JSON.stringify(d);
}
............
},

现在在控制器方法中：

public ActionResult DueCollectioListLoad([FromBody] DataTableParams dataTableParams)
{
//Here is necessary code
}