jQuery Mobile: Table column toggle

This entry is part 72 of 73 in the series jQuery Mobile

The column toggle table mode selectively hides columns when you resize the page to a narrower width.  

It also offers a menu to let users manually control which columns they want to see.  In the 

try the code page, you can click on column button on the top right to select the columns for display in the table.

The column chooser mode requires a table element with two attributes: data-role=”table” and data-mode=”columntoggle”.

An ID attribute is also required on the table to associate it with the column chooser popup menu.

<!DOCTYPE html>
<html>
<head>
    <link href='http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.css' rel='stylesheet'/>
    <script src='http://code.jquery.com/jquery-1.10.2.min.js'></script>
    <script src='http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.js'></script>
    <title>Upwhere</title>
</head>
<body>
<div data-role='page'>
    <div data-role='header' data-theme='b'>
        <h1>Table Column Toggle</h1>
    </div>

    <div data-role='content'>
        <table data-role='table' id='table-column-toggle' 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='4'>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>
                     <td>94%</td>
                     <td>87</td>
                   </tr>
               <tr>
                     <th>6</th>
                     <td><a href='http://en.wikipedia.org/wiki/Dr._Strangelove' data-rel='external'>Dr. Strangelove Or How I Learned to Stop Worrying and Love the Bomb</a></td>
                     <td>1964</td>
                     <td>92%</td>
                     <td>74</td>
                   </tr>
               <tr>
                     <th>7</th>
                     <td><a href='http://en.wikipedia.org/wiki/The_Graduate' data-rel='external'>The Graduate</a></td>
                     <td>1967</td>
                     <td>91%</td>
                     <td>122</td>
                   </tr>
               <tr>
                     <th>8</th>
                     <td><a href='http://en.wikipedia.org/wiki/The_Wizard_of_Oz_(1939_film)' data-rel='external'>The Wizard of Oz</a></td>
                     <td>1939</td>
                     <td>90%</td>
                     <td>72</td>
                   </tr>
               <tr>
                     <th>9</th>
                     <td><a href='http://en.wikipedia.org/wiki/Singin%27_in_the_Rain' data-rel='external'>Singin' in the Rain</a></td>
                     <td>1952</td>
                     <td>89%</td>
                     <td>85</td>
                   </tr>
               <tr>
                     <th>10</th>
                     <td class='title'><a href='http://en.wikipedia.org/wiki/Inception' data-rel='external'>Inception</a></td>
                     <td>2010</td>
                     <td>84%</td>
                     <td>78</td>
                   </tr>
             </tbody>
               </table>
    </div>

    <div data-role='footer' data-position='fixed'>
        <h4 style='text-align:center;'>I'm the footer</h4>
    </div>
</div>

</body>
</html>
Try The Code

In the table above, we have the priority of the column set as follow.

So if you narrow down the width of the page, the Reviews column will be the first one to go since it has the lowest priority.

                     <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='4'>Reviews</th>
Series Navigation<< jQuery Mobile: Slider tooltip
jQuery Mobile: Tabs >>