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

How to dynamically enable/disable Responsive extension

本文关键字：响应 扩展 启用 何动态 动态      更新时间：2023-09-26

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

我想在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>

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

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

SOLUTION

你需要销毁表来重新初始化它，并启用/禁用响应扩展。

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。

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

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

然后，在myFunction中

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

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

JSFiddle

我们去掉那些突兀的javascript或者直接用( onchange="myFunction()") 

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