2012-05-29 60 views
2

當我手動重繪(通過按鈕單擊)時,我的jQuery數據表似乎發佈兩次 - 我怎樣才能防止數據表這樣做?datatables fnDraw使多個AJAX請求

這裏是我的客戶端代碼:

$(document).ready(function() { 
    dataTable = $('#Results').dataTable({ 
     "bLengthChange": true, 
     "bFilter": false, 
     "bSort": true, 
     "bInfo": true, 
     "bAutoWidth": false, 
     "sPaginationType": "bootstrap", 
     "sDom": "ftrpli", 
     "bServerSide": true, 
     // "sAjaxSource": "AjaxControllerAction", 
     "fnServerParams": function (aoData) { 
      aoData.push({ "name": "UserId", "value": $('#UserId').val() }); 
      aoData.push({ "name": "Data", "value": $('#Data').val() }); 
      aoData.push({ "name": "Location", "value": $('#Location').val() }); 
     }, 
     "fnServerData": function (sSource, aoData, fnCallback) { 
      showProgress(); 

      var headers = {}; 
      headers['__RequestVerificationToken'] = token; 
      alert('zzzz'); 

      $.ajax({ 
       dataType: 'json', 
       type: 'POST', 
       //url: sSource, 
       url: 'AjaxControllerAction', 
       data: aoData, 
       headers: headers, 
       success: function (json) { 
        hideProgress(); 

        fnCallback(json); 
       }, 
       error: function (json) { 
        hideProgress(); 
       } 
      }); 
     }, 
     "fnDrawCallback": function() { hideProgress(); }, 
     "bProcessing": false, 
     "aoColumns": [ 
       { "sName": "NAME", 
        "fnRender": function (oObj) { 
         return '<a href="Details/' + 
         oObj.aData[0] + '">' + oObj.aData[0] + '</a>'; 
        } 
       }, 
       { "sName": "DATA" }, 
       { "sName": "DATA1" }, 
       { "sName": "DATA2" }, 
       ] 
    }); 
} 
); 

$("#SearchForm").on("submit", function (event) { 
    event.preventDefault(); 
    // this sends the request twice ?? 
    dataTable.fnDraw(); 
}); 

我知道這是打我AjaxControllerAction兩次,同時使用螢火蟲(我看到了XMLHttpRequest的兩倍),而且它的撞擊着我的動作兩次通過設置一個斷點。我無法找到任何理由這樣做。謝謝!

回答

0

這可能是由於您已經使用了類似的名稱「的dataTable」作爲變量已初始化的數據表與

dataTable = $('#Results').dataTable({ 

,這可能是爲什麼數據表是當你手動繪製兩次的原因的事實重繪。 嘗試更改變量名稱並查看。

0

這很奇怪。 dataTable.fnDraw();應發送一個AJAX呼叫。也許你應該看看插件腳本,看看發生了什麼。但首先嚐試新版本:)

我試圖禁用重繪的AJAX調用。如果我找到解決辦法,我會在這裏發佈

0

我的解決方案

我用從數據表的參數: iDisplayStart - >顯示開始在當前數據集中點。

第1步: 創建一個全局變量來存儲數據。

var options = { 
    jsonResultDataTableFromServer: {}, 
    iDisplayStart: -1, 
    iDisplayLength : -1 
}; 

步驟2: 變化AJAX fnServerData功能:

「fnServerData」:功能(URL,數據,回調){

   //data[3] i.e iDisplayStart 
       //data[4] i.e iDisplayLength 
       if (options.iDisplayStart != data[3].value || options.iDisplayLength != data[4].value) { 
        options.iDisplayStart = data[3].value; 
        options.iDisplayLength = data[4].value; 

        $.ajax({ 
         "url": url, 
         "data": data, 
         //"success": callback, 
         "success": function(json) { 
          options.jsonResultDataTableFromServer = json; 
          callback(json); 
         }, 
         "contentType": "application/x-www-form-urlencoded; charset=utf-8", 
         "dataType": "json", 
         "type": "POST", 
         "error": function() { 
          alert("DataTables warning: JSON data from server failed to load or be parsed. " + 
           "This is most likely to be caused by a JSON formatting error."); 
         } 
        }); 
       } else { 
        options.jsonResultDataTableFromServer.sEcho = eval(options.jsonResultDataTableFromServer.sEcho) + 1; 
        callback(options.jsonResultDataTableFromServer); 
       } 

       return false; 
      }, 
0

我不得不使用jQuery類似的問題dataTable 1.9(傳統版本)。我打電話給table.dataTable準備AJAX POST連接,然後我打電話給fnDraw。結果是第二次調用fnDraw根本就不需要,並且消除了第二個Ajax請求(table.dataTable和fnDraw放在顯示錶的jsp中的$(document).ready函數中)。 table.dataTable單獨處理所有功能(使用新條件調用控制器)。初始控制器調用顯示了默認視圖。當用戶單擊列的排序圖標時,再次調用控制器來傳遞新的排序條件並生成正確的SQL查詢。當用戶點擊分頁圖標時,控制器被調用並生成正確的分頁查詢。