server端的分頁物件的撰寫邏輯是這樣的:
如果頁數少於或等於十筆,就顯示全部頁數。
如果頁數大於十筆,就分成三種狀況做處理
目前頁數小於第五頁,就顯示1~5頁及最後兩頁,其他的用三個點號顯示
總頁數減目前頁數的絕對值小於或等於五頁,就顯示前二頁及最後五頁,其他的用三個點號顯示
非以上兩種狀況,就顯示前二頁及最後兩頁及目前頁數與目前頁數的前二頁與後二頁,其他的用三個點號顯示
分頁的外觀設定,就由client端的css做設定,server端的程式就專注在頁數的計算,將程式邏輯及外觀設定做清楚的切割。
分頁物件的css設定
在樣板中將server傳來的page資料用div包起來,設定顯示的css碼即可
假設div的設定是
server傳來的page資料
非目前頁數的css設定
.page ul li a{
css設定資料
}
目前頁數的css設定
.page ul li span{
css設定資料
}
整個物件花了不少時間思考,該怎麼做,想通後,心裡滿高興的,雖然網路上有非常多的分頁物件可以參考,不過要一行行拆解,真是花時間,而且看得頭昏眼花,眼睛不舒服,就不太想再看這些程式碼了,最後還是決定自己寫一個,比較能夠掌控,而且整個物件的用法也有一致性,不會感覺怎麼有個物件的用法跟整個程式的搭配度不太吻合。
沒有留言:
張貼留言