Gridview分頁顯示效果

這篇三天前就該寫上來的
可惜坎尼在公司都忘記要把圖片先上傳
回到家要寫時 又發現手邊沒圖片 囧>

---

好 這次要講的是Gridview的分頁顯示
一般來講 用內建的顯示效果
只有 上一頁/下一頁 還有 1 2 3 4 5 這兩種
前者只能死板的在上下頁移動 並不能跳頁
後者則是一般開發者的喜愛 可是稍嫌太醜
所以另有需求的話 通常是利用自訂分頁方式來完成

不過這次不談自訂分頁 (留在下次再談)
這次要說的是 一般的數字型分頁 (numeric)
由於它一次只顯示10頁的選項 若是10頁之後則會以 ... 方式呈現
之前就被客戶抱怨說太醜 (囧 這不是坎尼的錯啊)
所以坎尼上網找了解決方法 (不過由於年代久遠 也忘了在哪看到的 抱歉)
以下是 DataGrid 的範例 (當時改的是DataGrid)

後來另一位同事也要這種效果
坎尼想說 Gridview 和 DataGrid 本來就是兄弟
應該改一下原本的 code 就好了吧
這一改之下 才發現 這兩兄弟長的還真的有點不一樣

我們可以看到 上面DataGrid是先把PagerRow抓出來
再把裡頭的 Controls 一個一個抓出來
GridView這麼做只會跟你講：沒效果
於是坎尼去把PagerRow裡的所有Controls給抓出來看 (見下圖)

這一抓還真的不得了
這 GridView 原來裙子底下還穿了褲子 難道這是所謂的漸層式穿法?
GridView 的 PagerRow 裡還包了個 Table !!!
不像 DataGrid 的 PagerRow 直接就把東西塞進 TableCell 裡去

知道這些就好辦了
首先 我們需要個 GridView 然後把 PageMode 改為 Numeric
接著到 RowDataBound 把下圖的程式碼鍵入

將將將 大功告成 以下圖片是執行畫面



GridView 之所以可以有自訂分頁功能 (DataGrid 不行)
就是在 PagerRow 裡多了個 Table
所以不管使用者如何亂搞
只要把使用者自訂的東西通通塞進去 Table 就對了

了解上面程式碼的人 還可以做出更多變化
比方講 在Pager裡動態地放入控制項、更改 Pager 的樣式....等等
當然 自訂分頁 會更有彈性 (下篇就來講坎尼自製的分頁 sample 好了)

對了 今天似乎是中元節 祝大家中元節快樂 ^^