2015-09-25 101 views
1

我正在使用jQuery DataTables並在選擇多行時遇到問題。多行選擇

我跟着這個link的解釋。一些行是可選擇的,而其他行不被選擇。控制檯中沒有錯誤。

這裏是我的代碼:

$(document).ready(function() { 

     var selected = []; 

     $('#myTable').dataTable({ 


      "aaSorting": [ ], // Prevent initial sorting 
      "sAjaxSource": "getList", 
      "sAjaxDataProp": "", 
      "sServerMethod" : "POST", 
      "bProcessing": true, 
      "fnServerParams": function (aoData) { 
        aoData.push({ "name": "param", "value": "paramValue"}); 
      }, 
      "rowCallback": function(row, data) { 
       if ($.inArray(data.packetId, selected) !== -1) { 
        $(row).addClass('selected'); 
       } 
       }, 
      "aoColumns": [ 
        { "mData": "packetId"}, 
        { "mData": "packetName" } 
      ] 
     }); 

     $('#myTable tbody').on('click', 'tr', function() { 
      var id = this.id; 
      var index = $.inArray(id, selected); 

      if (index === -1) { 
       selected.push(id); 
      } 
      else { 
       selected.splice(index, 1); 
      } 

      $(this).toggleClass('selected'); 
     }); 
    }); 

回答

2

原因

顯然你不返回DT_RowId場。從description

演示使用分配給TR元件(這是通過使用DT_RowId特殊屬性的自動完成返回作爲由服務器爲每一行給出的對象的一部分)來跟蹤被選擇的行和一個唯一的ID重新選擇它們適合於平局。

SOLUTION

替換此行:

var id = this.id; 

用下面的代碼:

var data = $('#myTable').DataTable().row(this).data(); 
var id = data.packetId; 

注意

請注意,Select擴展是非常容易使用,請參見下面的代碼:

$('#example').DataTable({ 
    select: { 
     style: 'multi' 
    } 
}); 

但是你需要包括擴展額外的JS文件。

參見this example進行演示。

+0

恩,謝謝! 我遵循了你的建議,並且確實如此。但是這並沒有幫助。儘管如此,我仍然只能選擇幾行而不是全部,而有趣的部分是我注意到我只能選擇交替行。 – vkm

+0

我還沒有嘗試過選擇擴展名,但是從擴展名中,它不太清楚它將如何返回數據包ID。 – vkm

+0

@vkm,我同意,[選定項目檢索](http://datatables.net/extensions/select/integration#Selected-items-retrieval)上有一個頁面,但很可能它適用於客戶端處理模式只要。如果你有興趣,我寫了文章[使用複選框的行選擇](http://www.gyrocode.com/articles/jquery-datatables-checkboxes/),它使用類似的技術和一些增強功能。 –