本來不打算重復造輪子的,網上也已經有了很多關於前端分頁的框架,插件等等,但是還是打算寫出來是因為前段時間有一個功能模塊需要用到前端分頁,然后找了很多框架,以及插件,發現其內容非常的復雜或者有的干脆就是不能用的,一氣之下就准備自己動手寫一個,下面貼出代碼。。
到自己寫的時候其實發現,這個還是挺簡單的,邏輯代碼並不多,,
ajax向后台發送請求,並將請求得到的數據(下面)來計算出頁數頁碼等等這些東西。這個list設置為全局變量是可以保證不用傳參給pagelist的話它也能用
這是接收到的后端數據
這是分頁所跳轉的鏈接,就是1234等頁面頁碼所跳轉的點擊事件,里面主要是做了接收點擊的頁碼數來找到該頁碼所對應的數據。
這個判斷是如果沒有點擊,也就是頁面剛打開的狀態的話$(function)觸發該行if里面的數據。
把頁碼通過計算,i=總頁數,當I大於0的時候就減減,一直到把所有的頁碼循環完,並且把點擊事件加上,就是這個觸發本身自己的的這個方法,然后給了一個data-url屬性的值就是本身自己的頁面通過data-url來傳給自己,並且給actives來傳給自己。
如果走的是else的話就說明是頁面所點擊進來的,這樣的話就把接收到的頁碼參數重新賦值給全局變量里面的當前頁碼數。
隱藏多余分頁就是,前面得出的頁碼是所有的頁碼,當數據較多的時候頁碼會出現幾十個頁碼,這樣的話肯定是不美觀的,上面用JS來計算當前所在的頁面來顯示隱藏掉前面三個和后面三個頁碼數就像這樣
當點擊到頁碼5的時候1為自動隱藏掉。
empty是清空body里面的所有數據,並且重新賦值(也就是頁面數據並且下面重新賦值)
這段代碼就是核心代碼了,start_page和curr就是計算循環數據了。
start_page=(每頁數據X當前頁碼)-每頁數據
curr=(每頁數據X頁碼)
例如:每頁顯示十條數據,當前是第一頁的話那開始數據就是(10X1)-10等於0,循環從0開始也就是數組的第一個元素
當前頁數是10X1=10就是循環的次數
循環的邏輯:第一頁,當i=0並且i小於10的時候就i++,這樣得出來的數組下標數據就是0-9,剛好十條,正是我們想要數據,至於第二頁第三頁,后面的大家可以自己去算。
到了這里基本上是完了,然后重點就是上面一段開始數據和當前數據的計算了,其他的都只是頁面美化等等一些東西。
有不懂的地方可以給我留言,看到會回復。
這是隨手寫的一個小玩意,我不太善於寫前端請大神輕噴,可能有人能比我寫的更好,歡迎大家指點。
作者 --PDO