Bootstrap_Datatable Ajax请求两次问题的解决

最近一个项目中使用JQuery Datatable，用起来比较方便，但在测试过程中，发现当条件改变时，有时查询结果中的数据不正确。

使用FireBug跟踪时，发现在使用Ajax请求时，点击一次搜索按钮，却发送了两次请求，一次是原条件的请求，一次是新的请求。

下面是查询按钮的代码。先判断是否是Datatable，如果是的话，先Destroy掉，再重新创建。

1. function search(data) {
2. var $searchResult = $("#search-result .result-panel");
3. if (resultDataTable) {
4. resultDataTable.fnClearTable();
5. $searchResult.dataTable().fnDestroy();
6. $("#resultList").empty();
7. }  else {
8. $searchResult.show();
9. }
10. resultDataTable = $searchResult.dataTable({
11. "bPaginate" : true,
12. "bAutoWidth" : false,
13. "bProcessing": true,
14. "bFilter": false,
15. "bJQueryUI": true,
16. "sPaginationType": "full_numbers",
17. "oLanguage": {                          //汉化
18. "sLengthMenu": "每页显示 _MENU_ 条记录",
19. "sZeroRecords": "没有检索到数据",
20. "sInfo": "当前数据为从第 _START_ 到第 _END_ 条数据；总共有 _TOTAL_ 条记录",
21. "sInfoEmtpy": "没有数据",
22. "sProcessing": "正在加载数据...",
23. "oPaginate": {
24. "sFirst": "首页",
25. "sPrevious": "前页",
26. "sNext": "后页",
27. "sLast": "尾页"
28. }
29. },
30. "bServerSide": true,
31. "sServerMethod": "POST",
32. "sAjaxSource": "${baseUrl}/zpzxResumeSearch.do?&method=<bean:message key='zjzxResume.button.search' />",
33. //"fnServerData": executeQuery,
34. "fnServerParams": function (aoData) {
35. aoData.push({"name": "conds", "value": data});
36. },
37. "aoColumns": [
38. { "mData": null },
39. { "mData": "name" },
40. { "mData": "sex" },
41. { "mData": "birthday" },
42. { "mData": "mobilePhone" },
43. { "mData": "diploma" },
44. { "mData": "workYears" },
45. { "mData": "currentAddress" },
46. { "mData": "hukouAddress" },
47. { "mData": "updateTime" },
48. { "mData": null }
49. ],
50. "aoColumnDefs": [
51. {
52. "aTargets": [ 1 ],
53. "mRender": function ( data, type, full ) {
54. return "<a target='_blank' onmouseover='showLabels(this, event);' onmouseout='hiddenLabels(this, event);' labels='"+buildResumeLabels(full)+"'  href='${baseUrl}/zpzxResumeLookResult.do?resumeId="
55. +full.resumeId+"&zpzxTalentId="
56. +full.zpzxTalentId+"&method=<bean:message key='zjzxResume.button.showDetailInfo' />'>"
57. + data + "</a>";
58. }
59. },
60. {
61. "aTargets": [ 0 ],
62. "mRender": function ( data, type, full ) {
63. return "<input type='checkbox' value='"+full.resumeId+"' class='chkExportResume' />";
64. }
65. },
66. {
67. "aTargets": [ 10 ],
68. "mRender": function ( data, type, full ) {
69. return buildLink(data, type, full);
70. }
71. }
72. ]
73. });

跟踪Datatable后发现，在执行

1. resultDataTable.fnClearTable();

方法时，实际调用了一次fnDraw方法，该方法会调用Ajax请求，然后在DataTable的_fnInitialise方法中会再调用一次Ajax请求。

查看Datatable发现fnClearTable方法实际上还有一个布尔值参数来控制是否执行fnDraw方法，即只要把该语句修改为

1. resultDataTable.fnClearTable(false);

一切就OK了。

调查该问题Google了很久，最后还是通过看源码解决。不过，由此也看到Datatable作者在写此插件时，使用了很多优秀的编程方法，使得此插件很容易使用和扩展。感谢他们的贡献！