How To Dynamically Enable/disable Responsive Extension

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

Solution 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.

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.

Solution 2:

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

Solution 3:

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": [
       // IDnull, ........

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