jqueryjquery-mobileresponsive-designjquery-mobile-table

How to set the placeholder for column-toggle button in the jQuery Mobile table?

Is there any easy way to place the Column toggle button for jQuery Mobile table in custom place (eg. placeholder div with ID in sidebar or in the header), or the only way is to move it with my own code?

enter image description here

Solution

  • jQuery has an appendTo() method (https://api.jquery.com/appendTo/) that allows you to move DOM elements from one parent to another. For the column toggle you could do it like this:

    $(".ui-table-columntoggle-btn").appendTo("#colTogglePlaceholder");

    jQM assigns a class of .ui-table-columntoggle-btn to the button, and in this example colTogglePlaceholder is the ID of a span which will be the new parent of the button.

    Here is a working DEMO