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

原创 2013年12月02日 23:28:37

最近一个项目中使用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参数及使用方法

var listTable; $(function () { listTable = $("#OrderList").dataTable({ ...

datatables参数配置详解

datatables参数配置详解

datatable参数和服务端ajax函数配置及说明

上周因为需要使用了datatable,可是网上搜索到的要么就是一点点的参数介绍,要么就是几个回调函数的介绍,极少数有比较全面的,所以把自己用到的总结了一下,这其中涉及到服务端的分页,其实datatab...
  • shya_
  • shya_
  • 2017年02月17日 14:59
  • 3340

dataTables-使用中遇到的问题

问题描述:表格内容是利用Ajax动态更新的,但是$('table').dataTable();之后更新的新数据会和旧数据出现在一个表格中。 问题解决: 1 首先,要将bDestory设置为...
  • hireboy
  • hireboy
  • 2013年04月12日 10:26
  • 18385

datatable的使用

学习可参考:http://www.guoxk.com/node/jquery-datatables                       http://yuemeiqing2008-163...

jQuery的datatable的destroy属性,和$("#test").dataTable().fnDestroy();区别,两者的区别

jQuery的datatable的destroy属性,和$("#test").dataTable().fnDestroy();区别,两者的区别. 1 destroy属性是,销毁实例。 ...

dataTables-使用详细说明整理

本文共四部分:官网 | 基本使用|遇到的问题|属性表 一:官方网站:[http://www.datatables.net/] 二:基本使用:[http://www.guoxk.com/node/j...

DataTables的使用

最近在工作中,用了DataTables做为展示数据的表格。该控件支持分页,而且又漂亮。这是官网的地址http://www.datatables.net/ 。本文记录我在工作中用到DataTables的...
  • I_code
  • I_code
  • 2012年10月27日 20:23
  • 12941

DataTable 只加载一次的问题

一个Bootstrap模态框里嵌了一个 Table,用dataTable来加载数据Table

jquery插件dataTable. 添加一行记录---触发click()事件

https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css js: $(document).ready(function() { ...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:JQuery Datatable Ajax请求两次问题的解决
举报原因:
原因补充:

(最多只允许输入30个字)