jQuery Mobile 的 datagrid 功能是一種強大的數(shù)據(jù)展示方式，可以方便地將數(shù)據(jù)呈現(xiàn)給用戶并允許進行排序、分頁、篩選等操作。

使用 datagrid 首先需要引入所需的庫文件：

<link rel="stylesheet" >
<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>

然后，在頁面中創(chuàng)建一個 table 元素，并添加相應(yīng)的 thead 和 tbody：

<table data-role="table" id="my-table" class="ui-responsive ui-shadow">
<thead>
<tr>
<th>姓名</th>
<th>年齡</th>
<th>性別</th>
</tr>
</thead>
<tbody>
<tr>
<td>小明</td>
<td>20</td>
<td>男</td>
</tr>
<tr>
<td>小紅</td>
<td>18</td>
<td>女</td>
</tr>
</tbody>
</table>

接著，在頁面加載完成后使用 jQuery Mobile 提供的 datagrid 方法將 table 轉(zhuǎn)換為 datagrid：

$(document).ready(function() {
$("#my-table").table("refresh");
});

此時，我們已經(jīng)成功地將 table 轉(zhuǎn)換為 datagrid，并且可以使用 jQuery Mobile 提供的各種方法進行排序、分頁、篩選等操作。

例如，我們可以添加一個 input 元素，通過輸入姓名進行篩選：

<label for="search-name">姓名：</label>
<input type="text" id="search-name">

然后，在 jQuery 中編寫如下代碼實現(xiàn)篩選功能：

$("#search-name").on("keyup", function() {
var value = $(this).val().toLowerCase();
$("#my-table tbody tr").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});

以上就是 jQuery Mobile datagrid 的基本用法，它可以幫助我們快速、方便地展示和操作數(shù)據(jù)。