JQuery 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作者在写此插件时,使用了很多优秀的编程方法,使得此插件很容易使用和扩展。感谢他们的贡献!
JQuery Datatable Ajax请求两次问题的解决的更多相关文章
- Bootstrap_Datatable Ajax请求两次问题的解决
最近一个项目中使用JQuery Datatable,用起来比较方便,但在测试过程中,发现当条件改变时,有时查询结果中的数据不正确. 使用FireBug跟踪时,发现在使用Ajax请求时,点击一次搜索按钮 ...
- 如何终止JQUERY的$.AJAX请求
最近遇到,如果用户频繁点击ajax请求,有两个问题: 1,如果连续点击了5个ajax请求,前4个其实是无效的,趁早结束节省资源. 2,更严重的问题是:最后一个发送的请求,响应未必是最后一个,有可能造成 ...
- jQuery发送Ajax请求以及出现的问题
普通jQuery的Ajax请求代码如下: $.ajax({ type: 'POST', url: "http://xxx/yyy/zzz/sendVerifyCode", data ...
- Sping MVC不使用任何注解处理(jQuery)Ajax请求(基于XML配置)
1. Spring Spring框架是一个轻量级的解决方案,是一个潜在的一站式商店,用于构建企业就绪的应用程序.Spring框架是一个Java平台,为开发Java应用程序提供全面的基础架构支持.Spr ...
- Servlet处理(jQuery)Ajax请求
1. jQuery jQuery是一个JavaScript函数库,极大的简化了JavaScript编程,很容易学习.jQuery是目前最流行的开源js框架,并且提供了大量的扩展. 2. Aja ...
- jQuery发送ajax请求
利用jquery发送ajax请求的几个模板代码. $.ajax({ async : false, type: 'POST', dataType : "json", url: &qu ...
- JQuery发送ajax请求不能用数组作为参数
JQuery发送ajax请求不能用数组作为参数,否则会接收不到参数, 一.js代码如下: $('#delete-button').click(function(){ var select ...
- Angular和jQuery的ajax请求的差别
近期项目中使用angular,结果发现后台没法获取參数,所以,略微研究了一下两者在发送ajax时的差别. 注意angular和jquery的ajax请求是不同的. 在jquery中,官方文档解释con ...
- Jquery发送ajax请求以及datatype参数为text/JSON方式
Jquery发送ajax请求以及datatype参数为text/JSON方式 1.方式一:datatype:'text' 2.方式二:datatype:'JSON' 3.使用gson-1.5.jar包 ...
随机推荐
- Yii2 数据操作DAO
参考: http://www.yiiframework.com/doc/guide/1.1/zh_cn/database.dao http://blog.csdn.net/hzqghost/artic ...
- python成长之路13
一:SqlAlchemy ORM ORM:Object Relational Mapping 对象关系映射是一种程序技术,用于实现面向对象编程语言里不同类型系统的数据之间的转换 SQLAlchemy是 ...
- C和C++安全编码读书笔记1
(1)type safety Another characteristic of C that is worth mentioning is the lack of type safety. Type ...
- 深入浅出—JAVA(7)
7.继承与多态 遵守合约:覆盖的规则 方法的重载
- MouseOver/MouseOut vs MouseEnter/MouseLeave
参考 http://www.oschina.net/question/234345_45280 这是jQuery提供的函数 要注意MouseOut 和 MouseLeave的区别 比如对元素A绑定Mo ...
- 字符串操作函数<string.h>相关函数strcpy,strcat,等源码。
首先说一下源码到底在哪里找. 我们在文件中包含<cstring>时,如果点击右键打开文档, 会打开cstring,我们会发现路径为: D:\Program Files\visual stu ...
- redhat6.3安装matlab运行时MCR7.8,初步测试ok
redhat6.3安装完matlab2008a后在目录$MATLAB_HOME/toolbox/compiler/deploy/glnxa64中有MCRInstaller.bin 使用这个安装MCR即 ...
- Java怎样高速构造JSON字符串
目标:依据key/value高速构造一个JSON字符串作为參数提交到web REST API服务上. 分别測试里阿里巴巴的FastJson和Google Gson,终于我採用了Google Gson来 ...
- 在不连接网线的情况下Windos与VM之间如何ping通
一般情况下,如果宿主主机的网口连接网线并且能够上网,那么按照VM的默认安装,在VM-Settings-Hardware-Network Adapter-Network connection中选择Bri ...
- java打印日历
打个日历,写了半天,感情水平真菜, 不过主要是不会数组,明天一定要把数组看了 package demo; import java.util.Scanner; public class Demo { / ...