为啥 jquery 数据表在搜索后没有填充新更新的数据？
Posted
技术标签:
【中文标题】为啥 jquery 数据表在搜索后没有填充新更新的数据？【英文标题】：Why don't jquery datatable get filled with newly updated data after searching?为什么 jquery 数据表在搜索后没有填充新更新的数据？ 【发布时间】：2018-02-01 00:39:02 【问题描述】：我正在从 WebAPI 填充我的 jQuery 数据表（版本：1.10.15）并且它可以工作，但是当我通过搜索框在数据表中搜索时，它不会用更新的数据填充数据表。为什么？
我检查了，它发送搜索值并从服务器带来更新的数据，但没有用新返回的数据填充表。
function show()
$('#example').DataTable(
// "processing": true,
"serverSide": true,
"retrieve": true,
"destroy": true,
"pagination": true,
// "contentType": 'application/json; charset=utf-8',
"ajax": "http://localhost:28071/Users"
);
更新：
C# api 代码：
namespace WebApiHimHer.Controllers
public class UsersController : ApiController
[HttpGet]
public DTResult GetData([FromUri]DTParameters v)
List<string[]> s = new List<string[]>();
//List<basicoperations> s = new List<basicoperations>();
basicoperations bo= new basicoperations();
s = bo.getUsers(v.length, v.start, 1, v.sortOrder, v.search.Value);
DTResult r = new DTResult();
r.draw = 1;
r.recordsFiltered = s.Count;
r.recordsTotal = 100; ;
r.data = s;
return r;
public class DTResult
public int draw get; set;
public int recordsTotal get; set;
public int recordsFiltered get; set;
public List<string[]> data get; set;
public abstract class DTRow
public virtual string DT_RowId
get return null;
public virtual string DT_RowClass
get return null;
public virtual object DT_RowData
get return null;
public class DTParameters
public int draw get; set;
public DTColumn[] columns get; set;
public DTOrder[] order get; set;
public int start get; set;
public int length get; set;
public DTSearch search get; set;
public string sortOrder
get
return columns != null && order != null && order.Length > 0
? (columns[order[0].Column].Data + (order[0].Dir == DTOrderDir.DESC ? " " + order[0].Dir : string.Empty))
: null;
public class DTColumn
public string Data get; set;
public string Name get; set;
public bool Searchable get; set;
public bool Orderable get; set;
public DTSearch Search get; set;
public class DTOrder
public int Column get; set;
public DTOrderDir Dir get; set;
public enum DTOrderDir
ASC,
DESC
public class DTSearch
public string Value get; set;
public bool Regex get; set;
我在初始表加载和执行搜索后发布请求和响应
初始加载后：
请求：_ 1503560388132 列[0][数据] 0 列[0][名称] 列[0][可订购] 真的 列[0][搜索][正则表达式] 错误的 列[0][搜索][值] 列[0][可搜索] 真的 列[1][数据] 1 列[1][名称] 列[1][可订购] 真的 列[1][搜索][正则表达式] 错误的 列[1][搜索][值] 列[1][可搜索] 真的 画 2 长度 10 订单[0][列] 0 订单[0][目录] 升序 搜索[正则表达式] 错误的 搜索[价值] 2 开始 0
回复：
"draw":1,"recordsTotal":4,"recordsFiltered":25,"data":[["Hunain","123"],["hk","asd"], [“丹妮莉丝·坦格利安” ,"123"],["",""]]
执行搜索后：
请求：_ 1503560409319 列[0][数据] 0 列[0][名称] 列[0][可订购] 真的 列[0][搜索][正则表达式] 错误的 列[0][搜索][值] 列[0][可搜索] 真的 列[1][数据] 1 列[1][名称] 列[1][可订购] 真的 列[1][搜索][正则表达式] 错误的 列[1][搜索][值] 列[1][可搜索] 真的 画 2 长度 10 订单[0][列] 0 订单[0][目录] 升序 搜索[正则表达式] 错误的 搜索[价值] w 开始 0
回复："draw":1,"recordsTotal":1,"recordsFiltered":25,"data":[["Waleed","123"]]
【问题讨论】：
没有看到你的服务器端脚本就不可能说。不知何故，数据以不正确的方式发送。 @davidkonrad：当然，我正在更新问题 @davidkonrad 用服务器代码、ajax 请求和响应更新了问题 【参考方案1】：原因是发送和接收的draw 参数不一样，因为我在服务器代码中使用了draw 静态所以不匹配。我返回了与发送时相同的draw 参数。
来自docs：
此对象响应的抽奖计数器 - 来自抽奖 作为数据请求的一部分发送的参数。请注意，它是强 出于安全原因，建议您将此参数转换为 整数，而不是简单地向客户端回显它发送的内容 draw 参数，以防止跨站点脚本（XSS） 攻击。
【讨论】：
敢于编辑答案:) 请将您自己的答案标记为已接受。感觉它会在未来帮助人们。 很好，感谢您帮助我找到答案。【参考方案2】：编辑
function show()
$("#example").DataTable(
serverSide: true,
processing: true,
columns : [
data : 'FirstName' ,
data : 'LastName'
],
ajax:
url: "https://api.myjson.com/bins/384sr",
dataSrc : ''
);
show();
HTML
<table id="example" class="display">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
</tr>
</thead>
Jsfiddle
【讨论】：
我说的是搜索 用服务器代码、ajax 请求和响应更新了问题【参考方案3】：不确定您是否发现了错误，但请检查一下。
验证 applicationhost.config 或 web.config 文件中的 configuration/system.webServer/security/requestFiltering/requestLimits@maxQueryString 设置。
【讨论】：
【参考方案4】：//For me it was two things.
//wrap the table javascript with
//function _displayItems(data) var table = $('#...
//Then using the closing brackets:
//destroy then clear
productsTable.destroy();
productsTable.clear();
function _displayItems()
fetch(uri)
.then(response => response.json())
.then(data => _displayItems(data))
.catch(error => console.error('Unable to get items.', error));
var tableName = $('#data').DataTable(
"processing": true,
"data": data,
"columns": [
"name": "name", "data": "name" ,
"name": "id", "data": "id" ,
"render": function (data, type, full, meta)
var buttonID = "edit_" + full.id;
return '<a id="' + buttonID + '" class="btn btn-outline-info waves-effect editBtn" role="button">Edit</a>';
,
"render": function (data, type, full, meta)
var buttonID = "delete_" + full.id;
return ' <a id="' + buttonID + '" onclick="deleteUserRoleModal()" type="button" class="btn btn-outline-danger waves-effect removeRole" role="button">Delete</a>';
],
"responsive": true,
"dom": 'Bfrtip',
"buttons": [
'copy', 'excel', 'pdf',
text: 'Delete',
],
"initComplete": function ()
this.api().columns([0]).every(function ()
var column = this;
var select = $('<select class="selectpicker" data-size="5" data-live-search="true"><option value="">Application Role (All)</option></select>')
.appendTo("#table").end()
.on('change', function ()
var val = $.fn.dataTable.util.escapeRegex(
$(this).val()
);
column
.search(val ? '^' + val + '$' : '', true, false)
.draw();
);
column.cells('', column[0]).render('display').sort().unique().each(function (d, j)
if (column.search() === '^' + d + '$')
select.append('<option value="' + d + '" selected="selected">' + d + '</option>')
else
select.append('<option value="' + d + '">' + d + '</option>')
);
);
,
"bJqueryUI": true,
"bPaginate": false,
"aaSorting": [[1, 'asc']],
"aoPreSearchCols": [[1]],
"lengthMenu": [
[12, 24, 48, 1000],
['12', '24', '48', 'all']
],
"language":
searchPlaceholder: "? Role Screen ",
search: " ",
);
$.fn.dataTable.Buttons(productsTable,
buttons: [
'copy', 'excel', 'pdf'
]
);
productsTable.buttons().container()
.appendTo($('.col-sm-6:eq(0)', productsTable.table().container()));
$("#todos" + "#table").DataTable(
responsive: true
);
//destroy then clear
productsTable.destroy();
productsTable.clear();
【讨论】：
以上是关于为啥 jquery 数据表在搜索后没有填充新更新的数据？的主要内容，如果未能解决你的问题，请参考以下文章
Rails - 为啥远程提交我的表单后 jQuery 不加载