jQuery Mobile - Column Toggle

Description

The column toggle puts the columns in a hiding place and allows the user to select columns as per their choice using the data-mode = "columntoggle" attribute.

Example

Following example demonstrates the use of column toggle in the jQuery Mobile Framework.

Live Demo 
<!DOCTYPE html>
<html>
   <head>
      <title>Table Column Toggle</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
      <script src = "https://code.jquery.com/jquery-1.11.3.min.js"></script>
      <script src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
   </head>

   <body>
      <div data-role = "header">
         <h2>Header</h2>
      </div>
      
      <table data-role = "table" id = "table-column-toggle" data-mode = "columntoggle" 
         class = "ui-responsive table-stripe" data-column-btn-theme = "b" 
         data-column-btn-text = "Click here to display columns...">
         
         <thead>
            <tr>
               <th data-priority = "1">Position</th>
               <th>Team</th>
               <th data-priority = "2">Rating</th>
               <th data-priority = "3">Points</th>
            </tr>
         </thead>
         
         <tbody>
            <tr>
               <th>1</th>
               <td>SOUTH AFRICA</td>
               <td>114</td>
               <td>3308</td>
            </tr>
            
            <tr>
               <th>2</th>
               <td>INDIA</td>
               <td>110</td>
               <td>3535</td>
            </tr>
            
            <tr>
               <th>3</th>
               <td>AUSTRALIA</td>
               <td>109</td>
               <td>4376</td>
            </tr>
            
            <tr>
               <th>4</th>
               <td>PAKISTAN</td>
               <td>106</td>
               <td>2977</td>
            </tr>
            
            <tr>
               <th>5</th>
               <td>NEW ZEALAND</td>
               <td>99</td>
               <td>3578</td>
            </tr>
            
            <tr>
               <th>6</th>
               <td>ENGLAND</td>
               <td>99</td>
               <td>3940</td>
            </tr>
            
            <tr>
               <th>7</th>
               <td>SRI LANKA</td>
               <td>89</td>
               <td>3123</td>
            </tr>
            
            <tr>
               <th>8</th>
               <td>WEST INDIES</td>
               <td>76</td>
               <td>2504</td>
            </tr>
            
            <tr>
               <th>9</th>
               <td>BANGLADESH</td>
               <td>47</td>
               <td>1026</td>
            </tr>
            
            <tr>
               <th>10</th>
               <td>ZIMBABWE</td>
               <td>5</td>
               <td>53</td>
            </tr>
         </tbody>
      </table>
      
      <div data-role = "footer">
         <h2>Footer</h2>
      </div>
      
   </body>
</html>

Output

Let's carry out the following steps to see how the above code works −

  • Save the above html code as jqm_table_column_toggle.html file in your server root folder.

  • Open this HTML file as http://localhost/jqm_table_column_toggle.html and the following output will be displayed.

Column Chooser Mode and Setting Column Priority

You can display the table element using data-role = "table" and data-mode = "columntoggle" attributes as shown in the following tag.

<table data-role = "table" id = "table-column-toggle" data-mode = "columntoggle">

You can specify which column should be hidden or shown using the data-priority attribute and assign the priority value from 1 to 6. The table header which will be having the data-priority attribute, will be available in the column menu.

Theme and Customization

By default, the text on the button is "Columns..." however you can change the text using the data-column-btn-text attribute to the table. You can also set the theme for button or column picker menu using the data-column-btn-theme attribute. The rows can be displayed in a striped format by adding table-stripe class to the table element.

Making Tables Responsive

You can make the tables responsive according to screen size and orientation. The media queries specify the responsive behavior to columns using priority and writes the media query using min-width attribute. The widths which are set using em units, will respond to font size changes and you can calculate the value of pixel in em units by dividing the target width by 16 pixels.

Applying a Preset Breakpoint

You can apply the custom breakpoints for each priority levels by adding the class = "ui-responsive" to the table element as shown below −

<table data-role = "table" class = "ui-responsive" id = "table-column-toggle" data-mod 
   e ="columntoggle">

You can use following preset styles for each priority levels −

  • data-priority = "1" − It is used to display the column at 320px(20em).

  • data-priority = "2" − It is used to display the column at 480px(30em).

  • data-priority = "3" − It is used to display the column at 640px(40em).

  • data-priority = "4" − It is used to display the column at 800px(50em).

  • data-priority = "5" − It is used to display the column at 960px(60em).

  • data-priority = "6" − It is used to display the column at 1120px(70em).

Grouped Column Headers

The column data can be shown under each grouped heading for financial data. You can use the priority attribute to parse the specified row and display the heading groups as options. Any table header given a priority will be available in the column picker menu.

jquery_mobile_widgets.htm
Advertisements