1

現在、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')
})
​
4

2 に答える 2

5

これをオプションとして追加します。

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

于 2012-11-15T00:27:10.757 に答える
3

あなたはこれを行うことができます：

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

デモ

于 2012-11-15T00:23:09.770 に答える