首页 > PHP资讯 > HTML5培训技术 > JQueryDatatableAjax请求两次问题的解决

JQueryDatatableAjax请求两次问题的解决

HTML5培训技术

最近一个项目中使用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=",        //"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 "
方法,使得此插件很容易使用和扩展。感谢他们的贡献!

HTML5培训技术

本文由欣才IT学院整理发布,未经许可,禁止转载。
支持12不支持0