JAVA高级面试进阶训练营视频教程

admin

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

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

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

 

[javascript]  view plain copy

 

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

跟踪Datatable后发现，在执行

[javascript]  view plain copy

 

1. resultDataTable.fnClearTable();  

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

 

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

 

[javascript]  view plain copy

 

1. resultDataTable.fnClearTable(false);  

一切就OK了。

 

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