问题描述
我在客户端使用DataTables，在服务器端使用ASP.NET WEB API OData可查询服务。 服务器端对DataTable列进行排序和过滤的问题是，即使不将DataTables用于排序或过滤，DataTables也会使用所有列信息生成可怕的超长请求。 我决定编写从客户端到服务器的自定义AJAX调用，以创建简洁的odata查询，该查询可轻松应用于EF上下文。 不幸的是，列搜索字段已停止呈现为输入。 可能是什么问题？
JavaScript和HTML代码：
$(document).ready(function() { var options = new Object(); options.searching = true; options.searchable = true; options.aoColumns = [{ "sName": "USER_NAME", "searchable": true }]; options.bProcessing = true; options.bServerSide = true; options.sAjaxSource = "http://localhost/api/list"; options.fnServerData = function(sSource, aoData, fnCallback) { var filter = "$top=5"; //just as example $.getJSON(sSource, filter, function(json) { fnCallback(json); }); } $('#myTable').dataTable(options); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="//cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script> <table id="myTable" class="table"> <thead> <tr> <th> First Name </th> ... </tr> </thead> <tfoot> <tr> <th> First Name </th> ... </tr> </tfoot> </table>
该服务运行良好，看起来像这样（我使此代码尽可能容易理解）。 C＃代码：
public HttpResponseMessage List(ODataQueryOptions<User> options)
{
var result = oDataQueryOptions.ApplyTo(_context.Users) as IEnumerable<User>;
JQueryJsonResponse jsonUserResult = new JQueryJsonResponse
{
Draw = xxx,
iTotalRecords = xxx,
iTotalDisplayRecords = xxx,
aaData = result.ToList()
};
return Request.CreateResponse(HttpStatusCode.OK, jsonUserResult);
}
我期望这样的事情： 但是我得到这个：
1楼
原因
您已通过options.bServerSide = true;启用了服务器端处理模式options.bServerSide = true;
。
在服务器端处理模式过滤中，分页和排序计算均由服务器执行。
解
您需要处理客户端在服务器上发送的参数，并执行过滤，分页和排序。 查看在服务器端处理模式下发送 。
另一种解决方案是使用options.bServerSide = false;禁用服务器端处理模式options.bServerSide = false;
并让DataTables在客户端执行过滤，分页和排序。
2楼
好的，这个问题格式不好，抱歉。 我的意思是，我想对我的数据表应用列搜索。 在其他表的复制粘贴阶段，我只是错过了一些代码行。 我添加了类似的内容，现在可以正常工作了！
// Setup 'Search' var filterSelector = '#myTable' + ' tfoot th'; $(filterSelector).each(function() { var searchbox = $(this); searchbox.html('<input type="text" class="form-control" placeholder="Search" />'); }); //Apply DataTables var table = $('#myTable').DataTable(options); $('.dataTables_filter input').attr("placeholder", "Search"); // Apply generic search table.columns().every(function() { var that = this; var thatFooter = $('input', this.footer()); thatFooter.on('keyup change', function() { that.search(this.value).draw(); }); });