項目中涉及清單顯示的地方都會用到分頁控件,為了能更好地與目前網站的樣式比對,這次要自己實作一個。
是以選擇了模闆中提供的分頁樣式,基于模闆改造以能夠動态生成:
![](https://img.laitimes.com/img/__Qf2AjLwojIjJCLyojI0JCLi8CXlx2YpRnch9CXt92Yu4Wd5lGbh5iclB3bsVmdlR2Lc9CX6MHc0RHaiojIsJye.jpg)
http://images2015.cnblogs.com/blog/844205/201706/844205-20170606225606043-2137817722.png" >
![](https://img.laitimes.com/img/__Qf2AjLwojIjJCLyojI0JCLi8CXlx2YpRnch9CXt92Yu4Wd5lGbh5iclB3bsVmdlR2Lc9CX6MHc0RHaiojIsJye.jpg)
http://images2015.cnblogs.com/blog/844205/201706/844205-20170606225609887-709741290.png" >
一 控件的行為規則
a) 可設定顯示幾個頁碼(預設5個,隻能是奇數)
如果目前頁顯示5個,則預設前後各有兩個,比如目前頁是5,顯示頁碼為“3 4 5 6 7
如果目前頁在最前面,比如為1,顯示頁碼為:1 2 3 4 5
同樣目前頁在最後面,比如為9,顯示頁碼為:5 6 7 8 9
如果總頁數少于5,比如隻有3頁,則頁碼全部顯示:1 2 3
b) 關于跳轉首頁(<<)、尾頁(>>)、上一頁(<)、下一頁(>)
如果目前頁是第一頁,首頁和上一頁禁用
如果目前頁是最後一頁,尾頁和下一頁禁用
c) 目前頁的樣式要差別于其它頁碼
二 代碼編寫
a) 分頁元件類、屬性、常量
page_count為預設顯示的頁碼數量,這裡為了便于測試設定成了2;靜态屬性分别為目前頁、總頁數、資料總條數,但剛剛發現totalpage、totalcount實際上是備援的,兩者可以互相計算得出,這要盡早重構。
b) 局部變量
根據目前的實作,需要這麼一坨局部變量。startpage、endpage限定了顯示頁碼的範圍。将跳轉連結放在了hrefstr,以後其它清單需要使用這個工具類時,可把hrefstr改造成屬性。最後的以attr和href結尾的變量用于設定4個跳轉按鈕的禁用屬性和超連結。
c) 核心方法
核心的方法如下,主要實作“一 控件的行為規則”中a) 所描述的規則。
![](https://img.laitimes.com/img/__Qf2AjLwojIjJCLyojI0JCLi8CXlx2YpRnch9CXt92Yu4Wd5lGbh5iclB3bsVmdlR2Lc9CX6MHc0RHaiojIsJye.jpg)
http://images2015.cnblogs.com/blog/844205/201706/844205-20170606225749887-1529658259.png" >
<a>e) 傳回html的方法</a>
f) 分頁元件的使用
在前端頁面中,使用razor文法,html元素的輸出要用@html.raw()方法,另外因為相關的變量都是靜态的,每次使用完要記得調用reset重置狀态。
這樣自己的分頁元件就實作了,原本就知道這個小小的控件不好寫,經過很多次單元測試、內建測試,費了不少時間終于能夠使用了。
© 著作權歸作者所有