JqGrid是一個靈活的JavaScript表格插件，可以輕松地將數據格式化并在網頁中呈現。與Ajax和PHP結合使用，可以輕松地獲取和更新表格數據，同時為用戶提供順暢的用戶體驗。在本文中，我們將介紹如何使用JqGrid、Ajax和PHP創建動態Web應用程序。

首先，我們將創建一個簡單的JqGrid實例，以便您可以了解如何使用它。在這個例子中，我們將創建一個包含三列并填充一些行的表格。在HTML中，我們可以這樣寫：

<table id="myGrid" cellpadding="0" cellspacing="0"></table>
<div id="pager" class="scroll" style="text-align:center;"></div>

其中table標簽包含了一個id屬性為"myGrid"的表格，div標簽包含了一個id屬性為"pager"的分頁器。接下來我們將使用jQuery將它們轉換為JqGrid。在JavaScript中，我們可以這樣寫：

$(document).ready(function() {
$("#myGrid").jqGrid({
url:'test.php',
datatype: 'json',
mtype: 'POST',
colNames:['ID','Name', 'Quantity'],
colModel:[
{name:'id',index:'id', width:55},
{name:'name',index:'name', width:90},
{name:'quantity',index:'quantity', width:80, align:"right"}],
pager: '#pager',
rowNum:10,
rowList:[10,20,30],
sortname: 'id',
sortorder: 'asc',
viewrecords: true,
gridview: true,
caption: 'My first grid'
});
});

在這個JavaScript代碼中，我們使用jQuery的$(document).ready()函數來確保文檔加載完畢之后才初始化JqGrid。我們將我們的測試數據存儲在test.php中，因此我們將url選項設置為“test.php”。同時，我們將datatype設為“json”，因為我們希望接收的數據是JSON格式的。我們還使用mtype選項將HTTP請求的類型設為POST，以便通過POST方式獲取數據。

然后我們定義了三列的列模型，也就是我們要在表格中顯示的字段。在每一列的對象中，我們定義了字段名、索引名以及該列的寬度。我們還設置了分頁器的id和每頁顯示的行數等屬性。我們通過定義sortname和sortorder選項對表格進行排序，設置viewrecords選項為true，在表格的底部顯示記錄數。最后，我們設置caption屬性為"My first grid"，并將gridview設為true，這樣可以加速表格的渲染。

下一步我們需要在PHP服務端處理Ajax請求并返回數據，代碼如下：

<?php
header("Content-type: application/json; charset=utf-8");
$con= mysqli_connect("localhost","root","","test") or die("無法連接到MySQL服務器！");
$page = @$_POST['page'];
$limit = @$_POST['rows'];
$sidx = @$_POST['sidx'];
$sord = @$_POST['sord'];
if(!$sidx) $sidx =1;
$result=mysqli_query($con,"SELECT COUNT(*) AS count FROM products");
$row = mysqli_fetch_array($result,MYSQLI_ASSOC);
$count = $row['count'];
if( $count >0 ) {
$total_pages = ceil($count/$limit);
} else {
$total_pages = 0;
}
if ($page >$total_pages) $page=$total_pages;
$start = $limit*$page - $limit;
$query=mysqli_query($con,"SELECT id,name,quantity FROM products ORDER BY $sidx $sord LIMIT $start , $limit");
$data = array();
while($row = mysqli_fetch_array($query,MYSQLI_ASSOC)) {
	$data[] = array(
'id' =>$row['id'],
'name' =>$row['name'],
'quantity' =>$row['quantity']
	);
}
$response = new stdClass();
$response->page = $page;
$response->total = $total_pages;
$response->records = $count;
$response->rows = $data;
echo json_encode($response);
?>

在這個PHP代碼中，我們首先連接到MySQL服務器，然后從POST請求中獲取分頁器的當前頁碼、每頁顯示的行數、排序字段和排序順序。我們使用COUNT獲得表格的總行數，并通過ceil()函數算出總頁數。我們還根據當前頁碼和行數來計算SQL語句中的LIMIT偏移值。接著，我們執行SQL語句并將結果存儲在$data數組中。最后，我們通過PHP的stdClass()類來創建一個對象，將分頁信息和數據存儲在其中并將其編碼為JSON格式。

最終，我們將使用數據填充JqGrid表格。打開瀏覽器并訪問您的頁面，您將看到JqGrid表格中顯示了我們從PHP服務端獲取的數據。如果您單擊表格中的列標題，數據將按升序或降序排列。此外，我們還實現了分頁器和記錄計數器，這使得使用表格更加方便。

總之，JqGrid、Ajax和PHP的結合使得構建動態Web應用程序變得更加容易和高效。通過這種方式，我們可以輕松地獲取和更新數據，并向用戶提供流暢而完整的用戶體驗。