作者：alilx | 来源：互联网 | 2024-11-12 13:59
在最近的一个项目中，我们使用了JQueryDataTable进行数据展示，虽然使用起来非常方便，但在测试过程中发现了一个问题：当查询条件改变时，有时查询结果的数据不正确。通过FireBug调试发现，点击搜索按钮时，会发送两次Ajax请求，一次是原条件的请求，一次是新条件的请求。
在最近的一个项目中，我们使用了JQuery DataTable进行数据展示，虽然使用起来非常方便，但在测试过程中发现了一个问题：当查询条件改变时，有时查询结果的数据不正确。通过FireBug调试发现，点击搜索按钮时，会发送两次Ajax请求，一次是原条件的请求，一次是新条件的请求。
下面是查询按钮的代码。首先检查是否已经存在DataTable，如果存在，则先销毁再重新创建。
- function search(data) {
- var $searchResult = $("#search-result .result-panel");
- if (resultDataTable) {
- resultDataTable.fnClearTable(false);
- $searchResult.dataTable().fnDestroy();
- $("#resultList").empty();
- } else {
- $searchResult.show();
- }
- resultDataTable = $searchResult.dataTable({
- "bPaginate": true,
- "bAutoWidth": false,
- "bProcessing": true,
- "bFilter": false,
- "bJQueryUI": true,
- "sPaginationType": "full_numbers",
- "oLanguage": { //汉化
- "sLengthMenu": "每页显示 _MENU_ 条记录",
- "sZeroRecords": "没有检索到数据",
- "sInfo": "当前数据为从第 _START_ 到第 _END_ 条数据；总共有 _TOTAL_ 条记录",
- "sInfoEmpty": "没有数据",
- "sProcessing": "正在加载数据...",
- "oPaginate": {
- "sFirst": "首页",
- "sPrevious": "前页",
- "sNext": "后页",
- "sLast": "尾页"
- }
- },
- "bServerSide": true,
- "sServerMethod": "POST",
- "sAjaxSource": "${baseUrl}/zpzxResumeSearch.do?&method=",
- "fnServerParams": function(aoData) {
- aoData.push({"name": "conds", "value": data});
- },
- "aoColumns": [
- { "mData": null },
- { "mData": "name" },
- { "mData": "sex" },
- { "mData": "birthday" },
- { "mData": "mobilePhone" },
- { "mData": "diploma" },
- { "mData": "workYears" },
- { "mData": "currentAddress" },
- { "mData": "hukouAddress" },
- { "mData": "updateTime" },
- { "mData": null }
- ],
- "aoColumnDefs": [
- {
- "aTargets": [ 1 ],
- "mRender": function(data, type, full) {
- return "'>" + data + "";
- }
- },
- {
- "aTargets": [ 0 ],
- "mRender": function(data, type, full) {
- return "";
- }
- },
- {
- "aTargets": [ 10 ],
- "mRender": function(data, type, full) {
- return buildLink(data, type, full);
- }
- }
- ]
- }
通过跟踪Datatable的源码发现，在执行
- resultDataTable.fnClearTable();
方法时，实际调用了一次fnDraw方法，该方法会触发Ajax请求。而在DataTable的_fnInitialise方法中也会再调用一次Ajax请求。
查看Datatable的文档发现，fnClearTable方法实际上有一个布尔值参数来控制是否执行fnDraw方法。因此，只需将该语句修改为
- resultDataTable.fnClearTable(false);
即可解决问题。
经过长时间的调查和调试，最终通过阅读源码解决了这个问题。在这个过程中，我们也看到了Datatable作者在编写此插件时采用了许多优秀的编程方法，使得此插件不仅功能强大，而且易于使用和扩展。感谢他们的贡献！
京公网安备 11010802041100号