如何动态地 enable/disable 响应式扩展

Question

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

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

我试图向 select 值添加一个单独的函数，并使用全局变量将其传递给 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 子句作为第一行，但无法正常工作。

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

Answer 1

您是否尝试过在下拉选择发生变化时使用 onChange 事件处理程序来获取值？我想使用 onChange 来切换变量值并将其分配给任何 dataTable 键都可以工作。像这样：

$(document).ready(function(){
 var selected;
 $('#selected2').onChange( function() {
     selected = $(this).val();
 }
 $("#example").dataTable({
    "responsive": false,
    "processing": selected,
    "serverSide": true,
    "ajax": "scripts/university.php",
    "columns": [
       // ID
       null, ........

Answer 2

假设它是 this DataTable 插件那么你可以在你的 myFunction 中更改响应设置。首先，

var table = $('#example').DataTable(/* your current settings */);

然后，在 myFunction 中，

new $.fn.dataTable.Responsive( table, {
    details: true
} );

Answer 3

JSFiddle

好吧，摆脱干扰 javascript 或使用它 ( onchange="myFunction()")

$(document).ready(function(){
    var selectedValue;
    $('#selected2').change( function() {
        selectedValue = $(this).val();
        alert(selectedValue);
    });
});

Answer 4

解决方案

您需要销毁 table 以重新初始化它和 enable/disable 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);
});

注释

当table被销毁时，响应式扩展会留下一些类（dtr-inline，collapsed），所以我在初始化[=38=之前手动删除它们] 再次。

此外，我建议将所有选项都放在一个单独的对象中 dtOptions 以使重新初始化更容易，这样您只需切换一个选项 responsive.

演示版

有关代码和演示，请参阅 this jsFiddle。

如何动态地 enable/disable 响应式扩展

How to dynamically enable/disable Responsive extension

html

javascript

jquery

json

datatables