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

我目前正在使用jQueryDataTables插件，想知道是否有任何方法可以将行选择限制为3。现在，用户可以选择无限多的行。以下是我的代码：

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

​

您可以这样做：

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

​

将此添加为一个选项：

"iDisplayLength": 3

完整示例：

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

更新小提琴：

另一方面，如果用户对问题的解释正确，请将单击处理程序修改为：

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

更新的fiddle:

添加此选项：

"iDisplayLength": 3

完整示例：

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

更新小提琴：

另一方面，如果用户对问题的解释正确，请将单击处理程序修改为：

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

---

更新的fiddle:

我认为询问者希望限制可选择的行数，而不是显示的行数。我认为询问者希望限制可选择的行数，而不是显示的行数