Question

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')
})
​

Answer 1

You can do this:

$(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