jQM 1.4 move column toggle button to header

by Erik Zanker

HTML

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
<div data-role="page" id="page1">
    <div data-role="header">
         <h1>Main Page</h1>
        <span id="colTogglePlaceholder"></span>
    </div>
    <div role="main" class="ui-content">
    <div>
        Below is a column toggle table. The toggle button is moved to the header via javascript.
        </div>
    <table data-role="table" id="myTable" data-mode="columntoggle" class="ui-responsive table-stroke">
     <thead>
       <tr>
         <th data-priority="2">Rank</th>
         <th>Movie Title</th>
         <th data-priority="3">Year</th>
         <th data-priority="1"><abbr title="Rotten Tomato Rating">Rating</abbr></th>
         <th data-priority="5">Reviews</th>
       </tr>
     </thead>
     <tbody>
       <tr>
         <th>1</th>
         <td><a href="http://en.wikipedia.org/wiki/Citizen_Kane" data-rel="external">Citizen Kane</a></td>
         <td>1941</td>
         <td>100%</td>
         <td>74</td>
       </tr>
       <tr>
         <th>2</th>
         <td><a href="http://en.wikipedia.org/wiki/Casablanca_(film)" data-rel="external">Casablanca</a></td>
         <td>1942</td>
         <td>97%</td>
         <td>64</td>
       </tr>
       <tr>
         <th>3</th>
         <td><a href="http://en.wikipedia.org/wiki/The_Godfather" data-rel="external">The Godfather</a></td>
         <td>1972</td>
         <td>97%</td>
         <td>87</td>
       </tr>
       <tr>
         <th>4</th>
         <td><a href="http://en.wikipedia.org/wiki/Gone_with_the_Wind_(film)" data-rel="external">Gone with the Wind</a></td>
         <td>1939</td>
         <td>96%</td>
         <td>87</td>
       </tr>
       <tr>
         <th>5</th>
         <td><a href="http://en.wikipedia.org/wiki/Lawrence_of_Arabia_(film)" data-rel="external">Lawrence of Arabia</a></td>
         <td>1962</td>
        ...

CSS

#colTogglePlaceholder{
    display: inline;
    position: relative;
    top: -44px;
}

JavaScript

$(document).on("pagecreate", "#page1", function(){
    $(".ui-table-columntoggle-btn").appendTo("#colTogglePlaceholder");
});