jquery - 将数据表中的行选择限制为 3

Question

我目前正在使用 jQuery 数据表插件，想知道是否有任何方法可以将行选择限制为 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

将此添加为选项：

"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/

Answer 2

你可以这样做：

$(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')
})

​演示