2017-05-06 2 views
0

これは、Rails DataTable GemとDataTable JSの両方の機能がどのように連携しているかを理解していないことです。datatables multi selectのレールが認識されないようです

私は宝石を使用している私のdatableで複数の選択をしようとしています。 (以下GemList)

jquery-datatables-rails (3.4.0, 3.3.0) 
jquery-rails (4.0.5, 4.0.4) 
jquery-ui-rails (5.0.5) 

データテーブルが正常に動作しますが、今、私は初めての列で複数選択を使用しようとしているとそれが

https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js

ちょうど以下、これを必要とするようですコード例

https://datatables.net/extensions/select/examples/api/get.html

私application.jsは

です
//= require jquery 
//= require jquery_ujs 
//= require bootstrap-sprockets 
//= require dataTables/jquery.dataTables 
//= require dataTables/bootstrap/3/jquery.dataTables.bootstrap 
//= require dataTables/extras/dataTables.buttons 
//= require buttons.print.min 
//= require buttons.html5.min 
//= require buttons.flash.min 
//= require_tree . 

私はjquery.dataTables.min.jsを私の資産のjavascriptディレクトリに移動しましたが、それが動作するために何が必要なのか分かりません。

ここに私のdatableメソッドです。私はJSファイルで何か他のことをする必要があると仮定しているので、選択をしない以外はすべて動作します。

/* testing area 
*/ 
$(document).ready(function() { 
    var events = $('#events'); 
    var table = $('#combined_table').DataTable({ 
     dom: 'Bfrtip', 
     select: true, 
     buttons: [ 
      { 
       text: 'Get selected data', 
       action: function() { 
        var count = table.rows({ selected: true }).count(); 

        events.prepend('<div>'+count+' row(s) selected</div>'); 
       } 
      } 
     ] 
    }); 
}); 

すべてがうまく動作すべきか、私は何とかレールがJSファイルがあることを知っている必要がありますか?

答えて

0

私は

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/select/1.2.2/css/select.bootstrap.css"/> 

<script type="text/javascript" src="https://cdn.datatables.net/select/1.2.2/js/dataTables.select.js"></script> 

が表示されていない、あなたは、これが働い複数選択

$(document).ready(function() { 
    var events = $('#events'); 
    var table = $('#combined_table').DataTable({ 
     dom: 'Bfrtip', 
     select: {style:"multi"}, 
     buttons: [ 
     { 
      text: 'Get selected data', 
      action: function() { 
       var count = table.rows({ selected: true }).count(); 

       events.prepend('<div>'+count+' row(s) selected</div>'); 
      } 
     } 
    ] 
}); 
}); 
+0

感謝をしたいので、私は私が持っていなければならなかったことに気づきませんでした

0

このアプローチは、CSSクラスの切り替えに基づいてお試しください。

$(document).ready(function() { 

    var events = $('#events'); 
    var table = $('#combined_table').DataTable({ 
     dom: 'Bfrtip', 
     buttons: [{ 
      text: 'Get selected data', 
      action: function() { 
       var count = table.rows('.selected').data().length; 
       events.prepend('<div>' + count + ' row(s) selected</div>'); 
      } 
     }] 
    }); 

    $('#combined_table tbody').on('click', 'tr', function() { 
     $(this).toggleClass('selected'); 
    }); 

}); 
関連する問題