Bootstrap_Datatable Ajax请求两次问题的解决
最近一个项目中使用JQuery Datatable,用起来比较方便,但在测试过程中,发现当条件改变时,有时查询结果中的数据不正确。
使用FireBug跟踪时,发现在使用Ajax请求时,点击一次搜索按钮,却发送了两次请求,一次是原条件的请求,一次是新的请求。
下面是查询按钮的代码。先判断是否是Datatable,如果是的话,先Destroy掉,再重新创建。
- function search(data) {
- var $searchResult = $("#search-result .result-panel");
- if (resultDataTable) {
- resultDataTable.fnClearTable();
- $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_ 条记录",
- "sInfoEmtpy": "没有数据",
- "sProcessing": "正在加载数据...",
- "oPaginate": {
- "sFirst": "首页",
- "sPrevious": "前页",
- "sNext": "后页",
- "sLast": "尾页"
- }
- },
- "bServerSide": true,
- "sServerMethod": "POST",
- "sAjaxSource": "${baseUrl}/zpzxResumeSearch.do?&method=<bean:message key='zjzxResume.button.search' />",
- //"fnServerData": executeQuery,
- "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 "<a target='_blank' onmouseover='showLabels(this, event);' onmouseout='hiddenLabels(this, event);' labels='"+buildResumeLabels(full)+"' href='${baseUrl}/zpzxResumeLookResult.do?resumeId="
- +full.resumeId+"&zpzxTalentId="
- +full.zpzxTalentId+"&method=<bean:message key='zjzxResume.button.showDetailInfo' />'>"
- + data + "</a>";
- }
- },
- {
- "aTargets": [ 0 ],
- "mRender": function ( data, type, full ) {
- return "<input type='checkbox' value='"+full.resumeId+"' class='chkExportResume' />";
- }
- },
- {
- "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);
一切就OK了。
调查该问题Google了很久,最后还是通过看源码解决。不过,由此也看到Datatable作者在写此插件时,使用了很多优秀的编程方法,使得此插件很容易使用和扩展。感谢他们的贡献!
Bootstrap_Datatable Ajax请求两次问题的解决的更多相关文章
- JQuery Datatable Ajax请求两次问题的解决
最近一个项目中使用JQuery Datatable,用起来比较方便,但在测试过程中,发现当条件改变时,有时查询结果中的数据不正确. 使用FireBug跟踪时,发现在使用Ajax请求时,点击一次搜索按钮 ...
- springmvc框架下ajax请求传参数中文乱码解决
springmvc框架下jsp界面通过ajax请求后台数据,传递中文参数到后台显示乱码 解决方法:js代码 运用encodeURI处理两次 /* *掩码处理 */ function maskWord( ...
- 使用ajax请求后返回数据显示undefinded解决办法
今天在使用七牛的sdk做断点续传时候,当文件过大,本地没有存储时候,想要通过ajax将本地信息存到服务器缓存,之后通过读取缓存的方式来完成文件过大断点续传无法使用问题. 但是在使用ajax请求的时候, ...
- $.ajax 请求 拦截器 重定向 无效 解决办法
在ajax 异步请求下 拦截器过滤器中使用 重定向 页面响应无效 我这里用的是springboot框架,用拦截器实现 对请求的拦截 ,session超时直接跳转到login.html页面. 后台代码: ...
- WebApp开发:ajax请求跨域问题的解决
服务端:PHP 客户端:Andorid, HTML5, jQuery, ajax 现象:本想通过jQuery的ajax功能从服务器取回数据存到手机的缓存里,结果总是错误,后来想到可能是跨域问题,所以查 ...
- jquery ajax请求成功,数据返回成功,seccess不执行的问题
1.状态码返回200--表明服务器正常响应了客户端的请求: 2.通过firebug和IE的httpWatcher可以看出服务器端返回了正常的数据,并且是符合业务逻辑的数据. ...
- ajax请求controller出现中文乱码
ajax请求controller出现中文乱码 解决方法:在 @RequestMapping 中加上 produces = {"application/json;charset=UTF-8& ...
- jquery ajax请求了两次问题
页面有一个请求form: <form method="post" id="signin"> <label for="orderid& ...
- 解决拦截器对ajax请求的的拦截
拦截器配置: public boolean preHandle(HttpServletRequest request, HttpServletResponse response,Object obj) ...
随机推荐
- 使用python递归子目录处理日志文件
重要说明: (1)python使用4个空格进行层次缩进的(不是tab),在eclipse里面可以直接使用tab缩进,是因为eclipse会实时地将tab转成4个空格 (2)在eclipse中安装pyD ...
- SSIS 包单元测试检查列表
1. 使用脚本任务(Script tasks) 组建的时候,在日志里增加一些调试信息,例如变量更新信息,可以帮助我们从日志中查看到变量是在何时何地更新的. 2. 使用ForceExecutionRes ...
- MyEclipse 关闭鼠标悬停提示
preference --> MyEclipse -->Files and Editors--> Common Editor Preference --> Hovers 把里面 ...
- Visual Studio Code 1.0发布:100+语言,300+pull请求,1000+扩展
在第一个预览版发布一年后,微软发表了Visual Studio Code 1.0. 在//BUILD 2015大会上,微软宣布,他们的一个团队需要几个月来创建Visual Studio Code的第一 ...
- C#从Image上读取文本
今天通过C#来实现一个读取Image上文本的功能. 1. 环境准备: 1). 下载 Microsoft Office SharePoint Designer 2007. 2). 安装请参考KB:htt ...
- Android之Adapter用法总结-(转)
Android之Adapter用法总结 1.概念 Adapter是连接后端数据和前端显示的适配器接口,是数据和UI(View)之间一个重要的纽带.在常见的View(List View,Grid Vie ...
- 湖南省第十二届大学生计算机程序设计竞赛 A 2016
1803: 2016 Description 给出正整数 n 和 m,统计满足以下条件的正整数对 (a,b) 的数量: 1. 1≤a≤n,1≤b≤m; 2. a×b 是 2016 的倍数. In ...
- wpf 双击行。。获得行信息
void mydataGird_MouseDoubleClick(object sender, MouseButtonEventArgs e) { Point aP = e.GetPosition(m ...
- 小甲鱼PE详解之IMAGE_DOS_HEADER结构定义即各个属性的作用(PE详解01)
(注:最左边是文件头的偏移量.) IMAGE_DOS_HEADER STRUCT { +0h WORD e_magic // Magic DOS signature MZ(4Dh 5Ah) ...
- 智能车学习(八)——菜单的实现
一.代码分享 1.头文件 #ifndef __MENU_H #define __MENU_H /***********宏定义************/ //页面声明 typedef enum Menu ...