javascript - How to dynamically enabledisable Responsive extension - Stack Overflow

admin管理员组

文章数量:1401835

I have a project where users need to be able to select whether or not the acpanying script activates Responsive extension of 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.

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.

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>

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

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

I have a project where users need to be able to select whether or not the acpanying script activates Responsive extension of 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.

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.

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>

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

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

• javascript
• jquery
• html
• json
• datatables

Share Improve this question Follow edited Jul 18, 2015 at 2:09 Gyrocode. 58.9k1616 gold badges156156 silver badges191191 bronze badges asked Jul 17, 2015 at 23:40 RyanfRyanf 18711 gold badge33 silver badges99 bronze badges 2

• 1 I can not figure out what you really want to achieve? and where is the problem ? – Reflective Commented Jul 17, 2015 at 23:49
• I want users to be able to choose if responsive is set to true or false. – Ryanf Commented Jul 18, 2015 at 0:28

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 3

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.

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.

DEMO

See this jsFiddle for code and demonstration.

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

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

then, in myFunction,

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

honestly the solution is good for a simple datable without certain aditional option, but when you need to use filter or adding columns became a problem, best solution i found is the following...

$(document).ready(function(){
var table = initializeDataTable(true); // Inicializar la tabla con responsive habilitado

$('#toggle-responsive').on('click', function() {
    var responsiveEnabled = !table.settings()[0].oInit.responsive; // Cambiar entre true y false
    table.destroy(); // Destruir la tabla actual
    table = initializeDataTable(responsiveEnabled); // Reconstruir la tabla con la nueva configuración
});

});

 function initializeDataTable(responsiveEnabled) {
var table = $('#id-table').DataTable({
    "responsive": responsiveEnabled,

});

return table;

}

then, html code

<button id="toggle-responsive">Change view</button>

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:

$(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

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

本文标签： javascriptHow to dynamically enabledisable Responsive extensionStack Overflow