javascript - 如何动态启用/禁用响应式扩展

Question

我有一个项目，用户需要能够选择随附的脚本是否激活 jQuery DataTables 的响应扩展。

我想在 HTML 中添加一个下拉菜单，让用户选择在 中将选项 responsive 设置为 true 还是 false dataTable() 初始化选项。

我试图添加一个单独的函数来选择值，并使用全局变量将其传递给 dataTable() 函数，但无法使其正常工作。

JavaScript:

$(document).ready(function(){
 $("#example").dataTable({

    "responsive": false,
    "processing": false,
    "serverSide": true,
    "ajax": "scripts/university.php",
    "columns": [
       // ID
       null, ........

*HTML**

  <select id="selected2" onchange="myFunction()">
  <option value="true">true</option>
  <option value="false">false</option>
  </select>

我尝试在 dataTable 函数中添加一个 document.getElementById 子句作为第一行，但无法使其工作。

我可以向现有功能添加什么以使用户可以从 HTML 页面上的列表中选择 responsive 选项？

Answer 1

解决方案

您需要销毁表以重新初始化它并启用/禁用 Responsive扩展名。

var dtOptions = {
    responsive: true           
};

var table = $('#example').DataTable(dtOptions);

$('#ctrl-select').on('change', function(){
    dtOptions.responsive = ($(this).val() === "1") ? true : false;

    $('#example').DataTable().destroy();
    $('#example').removeClass('dtr-inline collapsed');

    table = $('#example').DataTable(dtOptions);
});

注意事项

当表格被销毁时，响应式扩展会留下一些类(dtr-inline、collapsed)，所以我在再次初始化表格之前手动删除它们。

此外，我建议将所有选项放在一个单独的对象 dtOptions 中，以便更轻松地重新初始化，这样您只需切换一个选项 responsive。

演示

参见 this jsFiddle用于代码和演示。