angular4 中自定義pagination組件

 

 

你用Angular 嗎?

一.介紹

    一個基於angular4 開發的能夠分頁的組件。組件的好處就是能夠複用，複用.....做爲一個前端碼農，開始的分頁功能實現是我用jquery寫的，其餘同事用的時候都要將個人代碼拷貝過去，因而我被鄙視了。爲了避免繼續被鄙視就開始了嘗試。

二.基本功能

   1.根據規定的每頁數據條數，分頁顯示數據

    2. 上下頁操做數據

   直接上界面圖可能清晰點：

項目截圖

根據圖片進行講解下：

    根據你總數據條數:totalNum; 每頁顯示條數:pageSize,經過組件會自動給你分頁顯示。

    eg：總數41 條數據,每頁顯示10條數據，則是分紅5頁。若是想每頁顯示7條，則會分紅6頁。

三.簡要代碼

  架構目錄圖：

 

項目目錄

有兩個組件：pagination和page;  pagination是用來顯示前面數據的，page是用來下面分頁的。

pagination.html示例代碼：

數據顯示部分代碼

ngb-xxx不用在乎，是用的ng-bootstrap，只是爲了讓界面好看點。其實就是一個簡單的table用來顯示數據。*ngFor用來取數據，懂Angular 的人應該都會，這不是重點就不介紹了。

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

其中pageSize和pageData是同樣的，只是後面爲了操做，多傳了一個值；

那麼：pageSize等值都是哪裏來的呢，固然是pagination.ts裏定義的：

pagination.ts代碼

        代碼中的page就是你得到到得數據，天然totalNum就會等於數據的長度。依次算出來就行了。

        pagination組件算是完成了，如今就來看看page是怎麼接收到數據並進行操做的。

       page.html頁面的代碼：     

page.ts 分頁數據的html

其實很簡單：就一個a標籤顯示條數，頁數的，三個button,一個顯示上一頁，一個頁數，一個下一頁。每一個按鈕都綁定了一個changePage事件；

看一下實現部分的代碼：

page.ts分頁實現部分代碼

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

經過三個if else判斷，對傳多來的數據進行處理。其實就分爲：數據只夠顯示一頁；數據顯示到最後一頁；數據刷新到中間頁碼；這三種狀況下的操做。

好了，基本就完成了。有些東西也是藉助網友的想法，可是思路大體都是這樣。如今我改變條數和數據量看看：

  項目截圖

詳情代碼及效果：

https://github.com/sulishibaobei/pagination