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

I have a project where users need to be able to select whether or not the accompanying script activates Responsive extension of jQuery DataTables.

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

I want to add a dropdown menu in HTML that lets users choose whether option responsive is set to true or false in dataTable() initialization options.

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

I tried to add a separate function to select the value and used a global variable to get it to the dataTable() function but couldn't get that to work.

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

JavaScript:

JavaScript的：

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

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

*HTML**

* HTML **

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

I tried adding a document.getElementById clause as the first line in the dataTable function but couldn't make it work.

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

What can I add to the existing function to make responsive option user selectable from the list on the HTML page?

我可以添加到现有功能中，以便从HTML页面上的列表中选择用户可选择的响应选项吗？

4 个解决方案

#1

SOLUTION

解

You need to destroy table to re-initialize it and enable/disable Responsive extension.

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

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);
});

NOTES

笔记

When the table is destroyed, Responsive extension leaves some classes (dtr-inline, collapsed), so I remove them manually before initializing the table again.

当表被销毁时，响应式扩展会留下一些类（dtr-inline，collapsed），因此我在再次初始化表之前手动删除它们。

Also I suggest having all options in a separate object dtOptions to make re-initialization easier, that way you just need to toggle one option responsive.

另外，我建议在单独的对象dtOptions中使用所有选项以使重新初始化更容易，这样您只需要响应一个选项。

DEMO

DEMO

See this jsFiddle for code and demonstration.

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

#2

Assuming that it is this DataTable plug-in then you can change the responsive setting in your myFunction. First,

假设它是这个DataTable插件，那么您可以更改myFunction中的响应设置。第一，

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

then, in myFunction,

然后，在myFunction中，

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

#3

-1

Have you tried using an onChange event handler to get the value whenever there is a change in the dropdown selection? I would think using the onChange to toggle a variable value and assigning it to whichever dataTable key would work. Like so:

您是否尝试使用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, ........

#4

-1

JSFiddle

的jsfiddle

Well get rid of the obtrusive javascript or use it ( onchange="myFunction()")



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

#1