将数据表中的行选择限制为3 [英] Limit row selection to 3 in datatables

问题描述

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

I'm currently using the jQuery datatables plugin and was wondering if there is any way I could limit row selection to just 3. Right now the user can select an infinite amount of rows. Here is a jsfiddle of my code: 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')
})
​

推荐答案

您可以执行以下操作:

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

演示

这篇关于将数据表中的行选择限制为3的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！