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作者在寫此插件時，使用了很多優秀的編程方法，使得此插件很容易使用和擴展。感謝他們的貢獻！