如何在 .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