Bootstrap_datatable Ajax Request Two-time problem resolution

Using jquery Datatable in a recent project is easier to use, but during testing, it is found that when conditions change, sometimes the data in the query results is incorrect.

When using Firebug tracing, it was found that when the AJAX request was used, a search button was clicked, but two requests were sent, one for the original condition and one for the new request.

The following is the code for the query button. First to determine whether it is a DataTable, if so, first destroy off, and then re-created.

[JavaScript]View Plaincopy

2. function search (data) {
4. var $searchResult = $ ("#search-result. Result-panel");
8. if (resultdatatable) {
10. Resultdatatable.fncleartable ();
12. $searchResult. DataTable (). Fndestroy ();
14. $ ("#resultList"). empty ();
16. } Else {
18. $searchResult. Show ();
20. }
22. resultdatatable = $searchResult. DataTable ({
24. "Bpaginate": true,
26. "Bautowidth": false,
28. "bprocessing": true,
30. "Bfilter": false,
32. "Bjqueryui": true,
34. " spaginationtype": "Full_numbers",
36. "Olanguage": { //Chinese
38. " slengthmenu": "show _menu_ Records per page",
40. "Szerorecords": "no data Retrieved",
42. " sinfo": "The current data is from _start_ to _end_ data; there are _total_ records in total",
44. " sinfoemtpy": "no data",
46. "sprocessing": "Loading Data ...",
48. "Opaginate": {
50. " Sfirst": "Home",
52. " sprevious": "front page",
54. " snext": "Back Page",
56. "Slast": "last"
58. }
60. },
62. "Bserverside": true,
64. " Sservermethod": "POST",
66. " Sajaxsource": "${baseurl}/zpzxresumesearch.do?&method=<bean:message key=" ZjzxResume.button.search '/> ',
68. //"Fnserverdata": ExecuteQuery,
70. "Fnserverparams": function (aodata) {
72. Aodata.push ({"name": "Conds", "value": Data});
74. },
76. "Aocolumns": [
78. { "mdata": null},
80. { "mdata": "Name"},
82. { "mdata": "Sex"},
84. { "mdata": "Birthday"},
86. { "mdata": "Mobilephone"},
88. { "mdata": "Diploma"},
90. { "mdata": "Workyears"},
92. { "mdata": "Currentaddress"},
94. { "mdata": "Hukouaddress"},
96. { "mdata": "UpdateTime"},
98. { "mdata": null}
100. ],
102. "Aocolumndefs": [
104. {
106. "Atargets": [1],
108. "Mrender": function (data, type, full) {
110. return "<a target= ' _blank ' onmouseover= ' showlabels (this, event); ' Onmouseout= ' hiddenlabels (this, event); ' Labels= ' "+buildresumelabels (full) +" ' href= ' ${baseurl}/zpzxresumelookresult.do?resumeid= "
112. +full.resumeid+"&zpzxtalentid="
114. +full.zpzxtalentid+"&method=<bean:message key= ' zjzxResume.button.showDetailInfo '/> ' >"
116. + Data + "</a>";
118. }
120. },
122. {
124. "atargets": [0],
126. "Mrender": function (data, type, full) {
128. return "<input type= ' checkbox ' value= '" +full.resumeid+"' class= ' chkexportresume '/> ';
130. }
132. },
134. {
136. "Atargets": [Ten],
138. "Mrender": function (data, type, full) {
140. return Buildlink (data, type, full);
142. }
144. }
146. ]
148. });

After tracing the DataTable, it was found that in the execution

[JavaScript]View Plaincopy

1. Resultdatatable.fncleartable ();

method, the Fndraw method is actually called once, which invokes the AJAX request and then calls the AJAX request again in the DataTable's _fninitialise method.

View the DataTable Discovery Fncleartable method actually has a Boolean parameter to control whether the Fndraw method is executed, that is, just change the statement to

[JavaScript]View Plaincopy

1. Resultdatatable.fncleartable (false);

Everything is OK.

Google for a long time to investigate the problem, and finally by looking at the source to solve. However, it is also seen that the DataTable author, when writing this plugin, uses a number of excellent programming methods, making the plugin easy to use and extend. Thanks for their contribution!

Bootstrap_datatable Ajax Request Two-time problem resolution