在数据表中将行选择限制为3

我目前正在使用jQuery datatables插件，并且想知道是否有任何方法可以将行选择限制为3.现在用户可以选择无限量的行。 这是我的代码的jsfiddle： http ： //jsfiddle.net/EfFA2/

JS

$(document).ready(function() { $('#example5').dataTable( { "bPaginate": true, "bLengthChange": false, "bFilter": true, "bSort": true, "bInfo": true, "bAutoWidth": false } ); /* Add/remove class to a row when clicked on */ $('#example5 tr').click( function() { $(this).toggleClass('row_selected'); } ); } ); $('#example5').css('min-height','300'); $('.btn_r').click(function(){ $('.row_selected').removeClass('row_selected') }) ​ 

Answer 1

你可以这样做：

 $(document).ready(function() { $('#example5').dataTable( { "bPaginate": true, "bLengthChange": false, "bFilter": true, "bSort": true, "bInfo": true, "bAutoWidth": false } ); /* Add/remove class to a row when clicked on */ $('#example5 tr').click( function() { if($('.row_selected').length < 3 || $(this).hasClass('row_selected')) { $(this).toggleClass('row_selected'); } } ); } ); $('#example5').css('min-height','300'); $('.btn_r').click(function(){ $('.row_selected').removeClass('row_selected') }) 

DEMO

Answer 2

添加此选项：

 "iDisplayLength": 3 

完整示例：

 $('#example5').dataTable({ "bPaginate": true, "bLengthChange": false, "bFilter": true, "bSort": true, "bInfo": true, "bAutoWidth": false, "iDisplayLength": 3 }); 

更新小提琴： http ： //jsfiddle.net/EfFA2/3/

另一方面，如果Beno对您的问题的解释是正确的，请将您的点击处理程序修改为：

 $('#example5 tr').click(function() { var self = $(this); if (self.hasClass('row_selected')) { self.removeClass('row_selected'); } else { if ($('#example5 tr.row_selected').length < 3) { $(this).addClass('row_selected'); } } }); 

更新小提琴： http ： //jsfiddle.net/EfFA2/4/