最近一个项目中使用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作者在写此插件时,使用了很多优秀的编程方法,使得此插件很容易使用和扩展。感谢他们的贡献!

Bootstrap_Datatable Ajax请求两次问题的解决的更多相关文章

  1. JQuery Datatable Ajax请求两次问题的解决

    最近一个项目中使用JQuery Datatable,用起来比较方便,但在测试过程中,发现当条件改变时,有时查询结果中的数据不正确. 使用FireBug跟踪时,发现在使用Ajax请求时,点击一次搜索按钮 ...

  2. springmvc框架下ajax请求传参数中文乱码解决

    springmvc框架下jsp界面通过ajax请求后台数据,传递中文参数到后台显示乱码 解决方法:js代码 运用encodeURI处理两次 /* *掩码处理 */ function maskWord( ...

  3. 使用ajax请求后返回数据显示undefinded解决办法

    今天在使用七牛的sdk做断点续传时候,当文件过大,本地没有存储时候,想要通过ajax将本地信息存到服务器缓存,之后通过读取缓存的方式来完成文件过大断点续传无法使用问题. 但是在使用ajax请求的时候, ...

  4. $.ajax 请求 拦截器 重定向 无效 解决办法

    在ajax 异步请求下 拦截器过滤器中使用 重定向 页面响应无效 我这里用的是springboot框架,用拦截器实现 对请求的拦截 ,session超时直接跳转到login.html页面. 后台代码: ...

  5. WebApp开发:ajax请求跨域问题的解决

    服务端:PHP 客户端:Andorid, HTML5, jQuery, ajax 现象:本想通过jQuery的ajax功能从服务器取回数据存到手机的缓存里,结果总是错误,后来想到可能是跨域问题,所以查 ...

  6. jquery ajax请求成功,数据返回成功,seccess不执行的问题

    1.状态码返回200--表明服务器正常响应了客户端的请求:       2.通过firebug和IE的httpWatcher可以看出服务器端返回了正常的数据,并且是符合业务逻辑的数据.         ...

  7. ajax请求controller出现中文乱码

    ajax请求controller出现中文乱码 解决方法:在 @RequestMapping 中加上  produces = {"application/json;charset=UTF-8& ...

  8. jquery ajax请求了两次问题

    页面有一个请求form: <form method="post" id="signin"> <label for="orderid& ...

  9. 解决拦截器对ajax请求的的拦截

    拦截器配置: public boolean preHandle(HttpServletRequest request, HttpServletResponse response,Object obj) ...

随机推荐

  1. 安装oracle 12c RAC遇到的一些问题

    (1) 安装grid软件,停止在38%很长时间不动,日志显示正常   解决方法: 由于是虚拟机安装,设置的内存为600M,关闭虚拟机,把内存调成1GB,问题解决~在38%Linking RMAN Ut ...

  2. LSM-Tree (BigTable 的理论模型)(转)

    Google的BigTable架构在分布式结构化存储方面大名鼎鼎,其中的MergeDump模型在读写之间找到了一个较好的平衡点,很好的解决了web scale数据的读写问题. MergeDump的理论 ...

  3. Java Hour 66 Spring 相关

    这章简单的来了解下Spring 和 Hibernate 是如何勾搭在一起的. <bean id="sessionFactory" class="org.spring ...

  4. 使用AStyle进行代码格式化

    转自:http://www.cnblogs.com/JerryTian/archive/2012/09/20/AStyle.html 在日常的编码当中,大家经常要遵照一些设计规范,如命名规则.代码格式 ...

  5. OK6410移植madplay播放器,王明学learn

    对于ok6410的madplay移植主要包括三部分.声卡驱动移植,播放器的移植,以及alsa库的移植. 一.首先移植声卡驱动以及播放器 ok6410采用WM97系列的声卡芯片,要使得内核支持该驱动,首 ...

  6. 用计算器计算“异或CRC”

    再计算器上输入以下数字,每输入一个数字,按一下“Xor”

  7. WORD2007多级列表

    转自玄鸟翩翩 http://hi.baidu.com/shine_yen http://hi.baidu.com/shine_yen/item/01ff2255043bc1aeacc85722 用Wo ...

  8. C#实现序列化和反序列化

    从我们面试准备上面,我知道了一个知识点,就是我们vs提供的序列化方法有两个,一个叫二进制序列化,一个叫做xml序列化,下面我们说一下二进制序列化的C#实现: 反序列化: public static T ...

  9. HTML5 重要标签以及属性学习

    1.一个标签可以有多个,class=“A B C ” 效果: 2.padding的扩展:当padding的值是正的时候,元素显示的大小会变大:当padding的值是负的时候,元素显示的大小会变小 pa ...

  10. 单机c1000k连接

    单机c1000k连接即单机实现百万连接,首先要注意的是连接是虚拟的逻辑的,连接最终落于 网卡,清晰概念才能更深入更清晰的想出问题的解决办法. 参考 http://www.ideawu.net/blog ...