DWZ table的原生分頁淺談

最近在項目開發當中很少會用到DWZ原生的table分頁，往往是使用jqgrid or grid這種第三方資料繫結的表格外掛程式，如今在項目中要求了，就必須要使用DWZ內建的table了

接下來看一段代碼，我會給大家詳細介紹DWZ中table分頁的使用方式，以下是在MVC中實現的方式。

?<div class="pagination" targetType="navTab" totalCount="@ViewBag.totalCount" numPerPage="@ViewBag.numPerPage" pageNumShown="@ViewBag.pageNumShown" <BR>currentPage="@ViewBag.currentPage"></div>
 屬性介紹

targetType:綁定方式，DWZ這裡提供了"navTab" and "dialog"這兩種方式，顧名思義就是分頁是在標籤頁上還是彈出層上

totalCount:資料總行數

numPerPage:當前頁資料行數

pageNumShown:總頁數

currentPage:當前頁碼

複製代碼 代碼如下:
@using (Html.BeginForm("BidPrjList", "TbUnify", null, FormMethod.Post, new { id = "pagerForm" }))
{
    <input type="hidden" name="pageNum" value="1" />
    <input type="hidden" name="numPerPage" value="@ViewBag.numPerPage" />
}

注意DWZ下分頁的表單必須加上id="pagerForm"屬性，否則不會執行。DWZ中表格的分頁實質是將分頁的方式以表單提交的形式傳遞至後台，由後台接收參數，擷取分頁資訊：例如：

複製代碼 代碼如下:
Request.Form["numPerPage"]

擷取分頁資訊表單的值就是你在View中pagerForm表單下定義隱藏文本域的name，在後台接收後去請求資料來源中分頁後的資料，再返回至前台。

而這裡存在一個小問題：首次進入此頁面時，是無法觸發當前分頁的的表單提交事件的，所以在上面我定義了ViewBag.numPerPage動態賦值，每頁分取多少條資料，前台介面只是將分頁樣式定義，實質資料沒有綁定，所以必須要將前台傳遞過來的分頁資訊作為後台資料分頁的依據，這樣前台的分頁才能與資料對接一致，不會造成錯亂，這點要注意。

在實際項目的開發當中，我們總會把表格與過濾條件放在一起，DWZ中表格傳入限制條件的方式也很簡單，如上在分頁表單上加入需要傳入的隱藏文本域例如：

複製代碼 代碼如下:
<input type="hidden" name = "Common_TbUnify_BidPrjList_HtxtPrjName" />

這樣在後台就能夠接受到傳入的過濾條件了。

DWZ 的table分頁實質是將當前標籤頁的資料reload，致使標籤頁重新整理，若限制條件與分頁共同使用時，這樣就會存在一個問題，頁面reload後會使你 的過濾條件丟失，而這裡我解決的辦法還是在分頁的表單中加入隱藏文本域，每次把過濾條件賦值，在後台判斷是否為空白，是否加入過濾條件，希望大家能夠注意這 點。

最後再說一點，在上面介紹了targetType，表示當前分頁的方式與分頁實質是標 簽頁的重新整理，所以如果我們把包含table的View層作為部分頁用非同步去進行載入時，就會發現，DWZ的分頁控制項是不會顯示的，也就無法分頁，在上面已 經告訴大家每次分頁是要指定type的，如果使用$.load或者@Html.Partial都是只能載入出第一頁的資料，這也是DWZ中存在缺陷的地方吧，畢竟DWZ的興起也是近年，還是存在很多問題與BUG的，尤其是他的table分頁與資料繫結真心不好用，但是總體來說，DWZ其他組件與樣式還是很不錯的。

好了關於DWZ table分頁今天就介紹到這裡。