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

Posted 2023-05-07

【中文标题】如何动态启用/禁用响应式扩展

【英文标题】：How to dynamically enable/disable Responsive extension

【发布时间】：2015-10-07 18:57:48

【问题描述】：

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

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

我尝试添加一个单独的函数来选择该值，并使用一个全局变量将其传递给 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 选项用户可以从 HTML 页面的列表中选择？

【问题讨论】：

我无法弄清楚您真正想要实现的目标是什么？问题出在哪里？

我希望用户能够选择是否将响应设置为 true 或 false。

【参考方案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。

【讨论】：

感谢您再次帮助我，迈克尔。我看到这对我的网站来说是正确的答案，但是在实施它时遇到了麻烦。为了澄清，我需要将我的其他数据表选项放入数组中，对吗？此外，如果 dtOption 数组中的值周围有/没有 " 标记，语法是否重要？

@Ryanf，您不需要将选项放入单独的对象dtOption，但它使代码更易于维护，因为您在一个地方有一组选项。除非您使用保留字，否则不需要引号，这是个人喜好问题。

【参考方案2】：

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

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

然后，在 myFunction 中，

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

【讨论】：

谢谢，但这并没有实现解决方案，我仍然不知道如何让用户选择 new $.fn.dataTable.Responsive( table, details: 设置为 true 或 false .

【参考方案3】：

您是否尝试过在下拉选择发生变化时使用 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, ........

【讨论】：

$(this).val() 将是字符串 "true" 或 "false"。在dataTable 调用中使用之前，您需要将selected 转换为布尔值。

试过这个方法，用boolean试了下，搞不定。

【参考方案4】：

JSFiddle

摆脱突兀的 javascript 或使用它( onchange="myFunction()")

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

【讨论】：

在您的小提琴中，"processing": selected 调用了一个未知变量，我将其更改为 "processing": selectedValue 但这也不起作用。有什么想法吗？