jQuery datatables v1.10服务器端-向服务器方法发送一个额外的参数

Question

我正在开发一个C#MVC应用程序。有一个包含多个字段的搜索页面。当用户单击搜索按钮时，除了默认的数据表json外，我还想将json中搜索字段的值传递给服务器端方法，以根据这些搜索字段值过滤记录，并在表中显示这些结果。我已经尝试过几种方法，但搜索字段json从未到达服务器端方法。我确实收到了jquery参数，如iColumns、iDisplayLength、iSortCol_0等，但我没有收到搜索字段json。我使用的是jquery数据表1.10版本，我在兼容模式下尝试过这样的操作：

tblSearchResults = $('#tblSearchResults').dataTable({
"bServerSide": true,
"bFilter": true,
"sAjaxSource": '@Url.Action("GetSearchResults", "jQueryDataTable", new { area = "" }, this.Request.Url.Scheme)',
"fnServerData": function (sSource, aoData, fnCallback, oSettings) {
aoData.push(getSearchJson())
$.ajax({
"dataType": 'json',
"type": "POST",
"url": sSource,
"data": aoData,
"success": fnCallback,
"error": function (e) {
ErrorDialog(e.Message, "Error");
}
})
}
});

在兼容模式下，我还尝试将对象添加到请求的末尾url:

"sAjaxSource": '@Url.Action("GetSearchResults", "jQueryDataTable", new { area = "" }, this.Request.Url.Scheme)?searchJson=' + getSearchJson(),

我也尝试过1.10命名约定：

tblSearchResults = $('#tblSearchResults ').DataTable({,
"serverSide": true,
"searching": true,
"ajax": {
"url": '@Url.Action("GetSearchResults,", "jQueryDataTable", new { area = "" }, this.Request.Url.Scheme)',
"data": getSearchJson()
},
});

javascript getSearchJson函数如下所示：

function getSearchJson() {
var jsonObj = {
FirstName: $('#@Html.IdFor(m => Model.FirstName)').val() || '',
LastName: $('#@Html.IdFor(m => Model.LastName)').val() || '',
PhoneNumber: $('#@Html.IdFor(m => Model.PhoneNumber)').val() || '',
};
return JSON.stringify(jsonObj);
}

以下是我尝试的服务器端方法：添加url参数的兼容模式：

public ActionResult GetSearchResults(jQueryDataTableParamModel param, searchParamModel searchJson)
{ do search and return results}

searchJson始终为空

兼容模式与fnServerData:

public ActionResult GetSearchResults(jQueryDataTableParamModel param)
{         
string json = HttpUtility.UrlDecode(Request.GetJsonData());
inModel = Newtonsoft.Json.JsonConvert.DeserializeObject<searchParamModel>(json);

我对具有1.10命名约定的DataTable使用了相同的方法。这似乎是与jquery param参数相同的json，绝对不是我要查找的搜索字段json。

我想将搜索json与默认的jquery表参数json一起发送。如何做到这一点？我看过很多帖子，但没有找到的解决方案

请帮忙。感谢

Answer 1

SO:

您不需要JSON.stringify您的对象；看起来数据表会为您做到这一点。

如果查询字符串开始变得太长，您可能希望使用POST而不是GET。

javascript：

tblSearchResults = $('#tblSearchResults ').DataTable({
"serverSide": true,
"searching": true,
"ajax": {
"url": "https://google.com/controller",
"type": "POST",
"data": getSearchJson()
},
});
function getSearchJson() {
var jsonObj = {
FirstName: "blah",
LastName: "blah2",
PhoneNumber: "blah3",
};
return jsonObj;
//return JSON.stringify(jsonObj);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<table id="tblSearchResults" class="display" style="width:100%">
<thead>
<tr>
<th>First name</th>
<th>Last name</th>
<th>Position</th>
<th>Office</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th>First name</th>
<th>Last name</th>
<th>Position</th>
<th>Office</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
</table>

它在jsfiddle中：https://jsfiddle.net/obxnfh1u/

以及正在发送的请求(与Fiddler一起查看(：

draw=1&columns%5B0%5D%5Bdata%5D=0&columns%5B0%5D%5Bname%5D=&columns%5B0%5D%5Bsearchable%5D=true&columns%5B0%5D%5Borderable%5D=true&columns%5B0%5D%5Bsearch%5D%5Bvalue%5D=&columns%5B0%5D%5Bsearch%5D%5Bregex%5D=false&columns%5B1%5D%5Bdata%5D=1&columns%5B1%5D%5Bname%5D=&columns%5B1%5D%5Bsearchable%5D=true&columns%5B1%5D%5Borderable%5D=true&columns%5B1%5D%5Bsearch%5D%5Bvalue%5D=&columns%5B1%5D%5Bsearch%5D%5Bregex%5D=false&columns%5B2%5D%5Bdata%5D=2&columns%5B2%5D%5Bname%5D=&columns%5B2%5D%5Bsearchable%5D=true&columns%5B2%5D%5Borderable%5D=true&columns%5B2%5D%5Bsearch%5D%5Bvalue%5D=&columns%5B2%5D%5Bsearch%5D%5Bregex%5D=false&columns%5B3%5D%5Bdata%5D=3&columns%5B3%5D%5Bname%5D=&columns%5B3%5D%5Bsearchable%5D=true&columns%5B3%5D%5Borderable%5D=true&columns%5B3%5D%5Bsearch%5D%5Bvalue%5D=&columns%5B3%5D%5Bsearch%5D%5Bregex%5D=false&columns%5B4%5D%5Bdata%5D=4&columns%5B4%5D%5Bname%5D=&columns%5B4%5D%5Bsearchable%5D=true&columns%5B4%5D%5Borderable%5D=true&columns%5B4%5D%5Bsearch%5D%5Bvalue%5D=&columns%5B4%5D%5Bsearch%5D%5Bregex%5D=false&columns%5B5%5D%5Bdata%5D=5&columns%5B5%5D%5Bname%5D=&columns%5B5%5D%5Bsearchable%5D=true&columns%5B5%5D%5Borderable%5D=true&columns%5B5%5D%5Bsearch%5D%5Bvalue%5D=&columns%5B5%5D%5Bsearch%5D%5Bregex%5D=false&order%5B0%5D%5Bcolumn%5D=0&order%5B0%5D%5Bdir%5D=asc&start=0&length=10&search%5Bvalue%5D=&search%5Bregex%5D=false&FirstName=blah&LastName=blah2&PhoneNumber=blah3

请注意结尾处的自定义道具。

数据表中的ajax.data特定文档：https://datatables.net/reference/option/ajax.data