jQuery Mobile Tables

Responsive tables

Responsive design is generally used to adapt to various mobile devices of users.

We only need to use a simple class name, and jQuery Mobile can automatically adjust the page content according to the screen size.

Responsive tables make page content adapt well on mobile and desktop devices.

There are two types of responsive tables:reflowandColumn toggle。

Reflow tables

Reflow mode tables are displayed horizontally when the screen size is large enough, and when the screen size becomes small enough, all data will be displayed vertically.

To create a table, add data-role="table" and the "ui-responsive" class to the <table> element:

Example

Try it Yourself »

	For responsive tables, you must include the <thead> and <tbody> elements. Do not use the rowspan or colspan attributes; these two attributes are not supported in responsive tables.

Column toggle

Column toggle mode hides data when the width is not enough.

A column toggle table is created as follows:

<table data-role="table" data-mode="columntoggle" class="ui-responsive" id="myTable">

By default, jQuery Mobile will first hide the columns on the right side of the table. However, you can specify the order of hidden columns by adding the data-priority attribute to table headers (<th>). The value of data-priority can be from 1 (highest priority) to 6 (lowest priority):

<th>I will never be hidden</th>
<th data-priority="1">我是非常重要的列 - 我不会被隐藏</th>
<th data-priority="3">我是重要的列 - 我可能被隐藏</th>
<th data-priority="5">我是不怎么重要的列 - 我最先被隐藏</th>

	If you do not specify a priority for a column, the column will always exist and will not be hidden.

Combine the above two pieces of code to create a column toggle table, so users can customize which columns of the table to hide:

Example

<table data-role="table" data-mode="columntoggle" class="ui-responsive" id="myTable">
<thead>
    <tr>
      <th data-priority="6">CustomerID</th>
      <th>CustomerName</th>
      <th data-priority="1">ContactName</th>
      <th data-priority="2">Address</th>
      <th data-priority="3">City</th>
      <th data-priority="4">PostalCode</th>
      <th data-priority="5">Country</th>
    </tr>
</thead>
<tbody>
    <tr>
      <td>1</td>
      <td>Alfreds Futterkiste</td>
      <td>Maria Anders</td>
      <td>Obere Str. 57</td>
      <td>Berlin</td>
      <td>12209</td>
      <td>Germany</td>
    </tr>
</tbody>
</table>

Try it Yourself »

We can use the data-column-btn-text attribute to modify the text of the toggle table: