2017-05-06 16 views
0

這只是我不瞭解Rails DataTable Gem和DataTable JS extras如何協同工作。rails with datatables多選擇似乎不被識別

我只是想在我的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'); 
    }); 

});