AJax技术

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

字号+ 作者:H5之家 来源:H5之家 2016-07-09 17:00 我要评论( )

crontab的用法---linux定时任务2008年07月30日 星期三 下午 01:00crontab的用法---linux定时任务 Step 1: 使用命令crontab -e编辑一个定时执行的任务或在/var/s

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

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • 框架 day39-42 SSH整合练习项目CRM(配置文件,增删改查,ajax,上传/下载,分页,BaseDao/Act

    框架 day39-42 SSH整合练习项目CRM(配置文件,增删改查,ajax,上传/下

    2016-07-05 15:00

  • ajax jsonp 的搜索结果

    ajax jsonp 的搜索结果

    2016-07-05 14:11

  • Design2U Cross Domain Ajax 跨網域抓取資料(JSONP)

    Design2U Cross Domain Ajax 跨網域抓取資料(JSONP)

    2016-07-02 16:03

  • Ajax框架 Prototype 1.6.1 发布

    Ajax框架 Prototype 1.6.1 发布

    2016-07-02 15:00

网友点评