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>

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

我可以在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以获取代码和演示。

Answer 2

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

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

然后，在myFunction中，

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

Answer 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, ........

Answer 4

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

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

4 个答案: