如何在.coffee文件中生成数据表响应（Rails）

Question

我有很好的数据表显示，但我希望他们能够对移动设备进行响应。

我尝试添加responsive:true选项，但它不会改变任何东西。

jQuery ->
  $("#eventmanagment").dataTable({
    "searching": true
    "responsive": true
    "lengthMenu": [[5, 10, 25, 50, 100, 250, -1], [5, 10, 25, 50, 100, 250, "All"]]
  })
  $("#eventmanagmentone").dataTable({
    "searching": true
    "limit": 5
    "lengthMenu": [[5, 10, 25, 50, 100, 250, -1], [5, 10, 25, 50, 100, 250, "All"]]

  })

当用户缩小窗口或使用移动设备时，表格应向下折叠。

Answer 1

您需要添加javascript和css文件，以便在数据表中启用响应功能

这是获取这些文件的链接

添加css和javascript文件后，您需要启用响应功能。

"responsive": true

工作的例子就在这里

响应式数据表扩展库

css
//cdn.datatables.net/responsive/2.2.2/css/responsive.bootstrap.css
//cdn.datatables.net/responsive/2.2.2/css/responsive.dataTables.min.css
//cdn.datatables.net/responsive/2.2.2/css/responsive.jqueryui.min.css
//cdn.datatables.net/responsive/2.2.2/css/responsive.bootstrap4.css
//cdn.datatables.net/responsive/2.2.2/css/responsive.dataTables.css
//cdn.datatables.net/responsive/2.2.2/css/responsive.semanticui.min.css
//cdn.datatables.net/responsive/2.2.2/css/responsive.bootstrap4.min.css
//cdn.datatables.net/responsive/2.2.2/css/responsive.jqueryui.css
//cdn.datatables.net/responsive/2.2.2/css/responsive.foundation.min.css
//cdn.datatables.net/responsive/2.2.2/css/responsive.bootstrap.min.css
//cdn.datatables.net/responsive/2.2.2/css/responsive.foundation.css
//cdn.datatables.net/responsive/2.2.2/css/responsive.semanticui.css
js
//cdn.datatables.net/responsive/2.2.2/js/responsive.semanticui.js
//cdn.datatables.net/responsive/2.2.2/js/responsive.jqueryui.min.js
//cdn.datatables.net/responsive/2.2.2/js/responsive.bootstrap4.min.js
//cdn.datatables.net/responsive/2.2.2/js/responsive.bootstrap4.js
//cdn.datatables.net/responsive/2.2.2/js/responsive.dataTables.js
//cdn.datatables.net/responsive/2.2.2/js/responsive.foundation.min.js
//cdn.datatables.net/responsive/2.2.2/js/responsive.bootstrap.js
//cdn.datatables.net/responsive/2.2.2/js/responsive.semanticui.min.js
//cdn.datatables.net/responsive/2.2.2/js/dataTables.responsive.min.js
//cdn.datatables.net/responsive/2.2.2/js/responsive.foundation.js
//cdn.datatables.net/responsive/2.2.2/js/responsive.bootstrap.min.js
//cdn.datatables.net/responsive/2.2.2/js/dataTables.responsive.js
//cdn.datatables.net/responsive/2.2.2/js/responsive.jqueryui.js