你用Angular 嗎?

一.介紹

    一個(gè)基于angular4 開發(fā)的可以分頁的組件。組件的好處就是可以復(fù)用，復(fù)用.....作為一個(gè)前端碼農(nóng)，開始的分頁功能實(shí)現(xiàn)是我用jquery寫的，其他同事用的時(shí)候都要將我的代碼拷貝過去，于是我被鄙視了。為了不繼續(xù)被鄙視就開始了嘗試。

二.基本功能

   1.根據(jù)規(guī)定的每頁數(shù)據(jù)條數(shù)，分頁顯示數(shù)據(jù)

    2. 上下頁操作數(shù)據(jù)

   直接上界面圖可能清晰點(diǎn)：

項(xiàng)目截圖

根據(jù)圖片進(jìn)行講解下：

    根據(jù)你總數(shù)據(jù)條數(shù):totalNum; 每頁顯示條數(shù):pageSize,通過組件會(huì)自動(dòng)給你分頁顯示。

    eg：總數(shù)41 條數(shù)據(jù),每頁顯示10條數(shù)據(jù)，則是分成5頁。如果想每頁顯示7條，則會(huì)分成6頁。

三.簡要代碼

  架構(gòu)目錄圖：

項(xiàng)目目錄

有兩個(gè)組件：pagination和page;  pagination是用來顯示前面數(shù)據(jù)的，page是用來下面分頁的。

pagination.html示例代碼：

數(shù)據(jù)顯示部分代碼

ngb-xxx不用在意，是用的ng-bootstrap，只是為了讓界面好看點(diǎn)。其實(shí)就是一個(gè)簡單的table用來顯示數(shù)據(jù)。*ngFor用來取數(shù)據(jù)，懂Angular 的人應(yīng)該都會(huì)，這不是重點(diǎn)就不介紹了。

<page ></page>  這里是引入page組件。但是傳入了一些屬性值；關(guān)于模板語法，依賴注入，自定義事件就不介紹了。只要知道這里是：pagination組件向page組件傳入了幾個(gè)值：pageSize(頁面顯示數(shù)據(jù)條數(shù))，totalNum(總數(shù)據(jù)條數(shù)),curPage(當(dāng)前頁碼
），totalPage(總頁碼),pageData(每頁顯示數(shù)據(jù))

其中pageSize和pageData是一樣的，只是后面為了操作，多傳了一個(gè)值；

那么：pageSize等值都是哪里來的呢，當(dāng)然是pagination.ts里定義的：

pagination.ts代碼

        代碼中的page就是你獲得到得數(shù)據(jù)，自然totalNum就會(huì)等于數(shù)據(jù)的長度。依次算出來就好了。

        pagination組件算是完成了，現(xiàn)在就來看看page是怎么接收到數(shù)據(jù)并進(jìn)行操作的。

       page.html頁面的代碼：     

page.ts 分頁數(shù)據(jù)的html

其實(shí)很簡單：就一個(gè)a標(biāo)簽顯示條數(shù)，頁數(shù)的，三個(gè)button,一個(gè)顯示上一頁，一個(gè)頁數(shù)，一個(gè)下一頁。每個(gè)按鈕都綁定了一個(gè)changePage事件；

看一下實(shí)現(xiàn)部分的代碼：

page.ts分頁實(shí)現(xiàn)部分代碼

@Input是接收pagination.html組件傳過來的數(shù)據(jù)。@Output是定義pagination.html頁面定義的changeCurPage事件。

通過三個(gè)if else判斷，對傳多來的數(shù)據(jù)進(jìn)行處理。其實(shí)就分為：數(shù)據(jù)只夠顯示一頁；數(shù)據(jù)顯示到最后一頁；數(shù)據(jù)刷新到中間頁碼；這三種情況下的操作。

好了，基本就完成了。有些東西也是借助網(wǎng)友的想法，但是思路大致都是這樣。現(xiàn)在我改變條數(shù)和數(shù)據(jù)量看看：

  項(xiàng)目截圖

詳情代碼及效果：

https://github.com/sulishibaobei/pagination