1. 程式人生 > >原生JS分頁

原生JS分頁

首先我們先捋順一下分頁的思路

目的:為了在客戶端能更快更好的渲染呈現,讓頁面的資料看起來整潔、不臃腫、不造成頁面過度的寬度長度,為了降低伺服器記憶體的負載,加快系統執行速度。

在開始寫之前先弄清楚分頁需要用到的幾個引數: (1)總的資料有多少條 (2)一頁要顯示幾條資料 (3)一共多少頁

程式碼開始

先上一下最終的效果圖

其中資料是自己寫的假資料,到時用後臺傳過來的資料 在這裡插入圖片描述

首先寫html,寫一個table用來顯示資料,一個ul用於分頁,圖:

在這裡插入圖片描述

css:

在這裡插入圖片描述

動態改變共多少頁,第幾頁

在這裡插入圖片描述

頁碼標籤改變效果

在這裡插入圖片描述在這裡插入圖片描述在這裡插入圖片描述

動態改變當前頁碼效果

在這裡插入圖片描述

上下翻頁

在這裡插入圖片描述

首頁、尾頁