Hi, Is there a way to dynamically disable responsive on a button click ?

Hi, Is there a way to dynamically disable responsive on a button click ?

praveenbpraveenb Posts: 10Questions: 2Answers: 0
edited May 2021 in Responsive

Hi, Is there a way to dynamically disable responsive on a button click ? I'm enabling responsive using constructor. Is there a way to disable it dynamically ?

This question has an accepted answers - jump to answer

Answers

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    No, it's an initialisation option without an API method to then disable it. The only thing you could do is to destroy() the table on the click of that button and initialise again without the responsive set,

    Colin

  • praveenbpraveenb Posts: 10Questions: 2Answers: 0
    edited May 2021

    Thanks. I also noticed that using the responsive constructor in initComplete doesn't work for ajax data. The icon shows up but clicking on it doesn't show the child row. Is there any way to make this work ?

    table = $("#example").DataTable({
    destroy: true,
    "ajax": {"url": url, "dataSrc": ""}
    "initComplete": function (settings, json) {
    new $.fn.dataTable.Responsive(table);
    },
    })

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    I'm not sure why that wouldn't work, but can you just use responsive: true as in this example: http://live.datatables.net/voruhuwo/1/edit ?

    Colin

  • praveenbpraveenb Posts: 10Questions: 2Answers: 0

    I can't use responsive: true because just before adding responsive I'm reordering the columns by getting order from database. Using responsive: true doesn't show the table correctly after reordering. Please let me know if there is any other way to do this.

    table = $("#example").DataTable({
        destroy: true,
        "ajax": {"url": url, "dataSrc": ""}
        "initComplete": function (settings, json) {
             reorderColumns(table); //function to reorder columns by getting order from db
             new $.fn.dataTable.Responsive(table);
         },
    })
    
  • kthorngrenkthorngren Posts: 20,142Questions: 26Answers: 4,736
    Answer ✓

    I don't believe the table variable is assigned and ready to use inside initComplete. You can use this.api() to get an instance of the API. For example:

        "initComplete": function (settings, json) {
             var api = this.api();
             reorderColumns( api ); //function to reorder columns by getting order from db
             new $.fn.dataTable.Responsive( api );
         },
    

    Kevin

  • praveenbpraveenb Posts: 10Questions: 2Answers: 0

    Thanks Kevin. this.api worked perfectly.

This discussion has been closed.