Question

Rails 5.1.6和Ruby 2.4.1

虽然我的表格使用bootstrap 4进行了某种样式，但我无法在表格中添加任何自定义选项（按钮，colReorder等）。

CoffeeScript的：

$ ->
  $('#results_datatable').DataTable
      buttons: [
        'copyHtml5',
        'excelHtml5',
        'csvHtml5',
        'pdfHtml5']
      destroy: true 
      JQueryUI: true
      colReorder: true
      scrollY: "400px"
      sorting: [[ 0, 'asc' ]]

的application.js：

//= require jquery3
//= require jquery_ujs
//= require jquery-ui
//= require popper
//= require bootstrap
//= require bootstrap-sprockets
//= require turbolinks
//= require datatables
//= require_tree .

application.scss：

@import "jquery-ui";
@import "font-awesome";
@import "bootstrap";
@import 'datatables';

screenshot of table

我之前使用过datatables库，但从未使用过coffeescript，也从未使用过roR应用程序（也是ruby的新用户），所以完全有可能我的问题可能是因为一个（或者更多）以上文件。或者也许我错过了一个重要的宝石？任何帮助将不胜感激！

Answer 1

通过official online tool透露您的咖啡，提供以下输出：

$(function() {
  return $('#results_datatable').DataTable({
    buttons: ['copyHtml5', 'excelHtml5', 'csvHtml5', 'pdfHtml5'],
    destroy: true,
    JQueryUI: true,
    colReorder: true,
    scrollY: "400px",
    sorting: [[0, 'asc']]
  });
});

在语法上看起来是正确的（虽然你的按钮数组中不需要逗号，但它们在Coffeescript中是可选的）。我的猜测是没有正确导入，可能是buttons和colVis插件。（尽管它们可能包含在您要导入的datatables js / coffee文件中。

要排除这种情况，请尝试使用js＆amp;来自DataTables CDN的css，包括所有插件：

<!-- Datatables & Bootstrap 4 -->
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/dataTables.bootstrap4.min.css">
<script type="text/javascript" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.16/js/dataTables.bootstrap4.min.js"></script>

<!-- Buttons -->
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.5.1/css/buttons.bootstrap4.min.css">
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.5.1/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.bootstrap4.min.js"></script>


<!-- colVis -->
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.colVis.min.js"></script>

无法在ruby 5 app中为数据表添加选项

1 个答案: