2015-09-25 76 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/),它使用类似的技术和一些增强功能。 –