快捷導(dǎo)航

DWZ table的原生分頁淺談

更新時間：2013年03月01日 10:25:57 作者：

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

最近在項目開發(fā)當中很少會用到DWZ原生的table分頁，往往是使用jqgrid or grid這種第三方數(shù)據(jù)綁定的表格插件，如今在項目中要求了，就必須要使用DWZ自帶的table了

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

?<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:數(shù)據(jù)總行數(shù)

numPerPage:當前頁數(shù)據(jù)行數(shù)

pageNumShown:總頁數(shù)

currentPage:當前頁碼

復(fù)制代碼代碼如下:

@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"屬性，否則不會執(zhí)行。DWZ中表格的分頁實質(zhì)是將分頁的方式以表單提交的形式傳遞至后臺，由后臺接收參數(shù)，獲取分頁信息：例如：

復(fù)制代碼代碼如下:

Request.Form["numPerPage"]

獲取分頁信息表單的值就是你在View中pagerForm表單下定義隱藏文本域的name，在后臺接收后去請求數(shù)據(jù)源中分頁后的數(shù)據(jù)，再返回至前臺。

而這里存在一個小問題：首次進入此頁面時，是無法觸發(fā)當前分頁的的表單提交事件的，所以在上面我定義了ViewBag.numPerPage動態(tài)賦值，每頁分取多少條數(shù)據(jù)，前臺界面只是將分頁樣式定義，實質(zhì)數(shù)據(jù)沒有綁定，所以必須要將前臺傳遞過來的分頁信息作為后臺數(shù)據(jù)分頁的依據(jù)，這樣前臺的分頁才能與數(shù)據(jù)對接一致，不會造成錯亂，這點要注意。

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

復(fù)制代碼代碼如下:

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

DWZ 的table分頁實質(zhì)是將當前標簽頁的數(shù)據(jù)reload，致使標簽頁刷新，若限制條件與分頁共同使用時，這樣就會存在一個問題，頁面reload后會使你的過濾條件丟失，而這里我解決的辦法還是在分頁的表單中加入隱藏文本域，每次把過濾條件賦值，在后臺判斷是否為空，是否加入過濾條件，希望大家能夠注意這點。

最后再說一點，在上面介紹了targetType，表示當前分頁的方式與分頁實質(zhì)是標簽頁的刷新，所以如果我們把包含table的View層作為部分頁用異步去進行加載時，就會發(fā)現(xiàn)，DWZ的分頁控件是不會顯示的，也就無法分頁，在上面已經(jīng)告訴大家每次分頁是要指定type的，如果使用$.load或者@Html.Partial都是只能加載出第一頁的數(shù)據(jù)，這也是DWZ中存在缺陷的地方吧，畢竟DWZ的興起也是近年，還是存在很多問題與BUG的，尤其是他的table分頁與數(shù)據(jù)綁定真心不好用，但是總體來說，DWZ其他組件與樣式還是很不錯的。

好了關(guān)于DWZ table分頁今天就介紹到這里。

您可能感興趣的文章: