在日常工作中，當數(shù)據(jù)或信息過多時，我們可能會需要分頁顯示，這個時候，你要怎么實現(xiàn)根據(jù)表格數(shù)據(jù)自動生成頁碼的效果？本篇文章里，作者便分享了如何在Axure中實現(xiàn)這一效果的方式。一起來看看作者的總結(jié)。

當表格數(shù)據(jù)較多時，我們經(jīng)常會分頁顯示，這時我們就需要用到頁碼的元件了。所以作者今天就教大家如何在Axure中制作一個能自動根據(jù)中繼器表格的數(shù)據(jù)以及分頁情況，自動生成對應(yīng)頁碼的原型模板。

一、效果展示

1. 頁碼能根據(jù)表格數(shù)據(jù)和每頁顯示條數(shù)自動生成。
2. 點擊頁碼可以跳轉(zhuǎn)至對應(yīng)的頁面。
3. 增加、刪除、搜索、篩選、分頁后自動生成對應(yīng)的頁面。

二、制作教程

1. 中繼器表格的制作

這個比較簡單，我們在中繼器里添加矩形即可，有多少列就添加多少個矩形。

中繼器表格也是，有多少列就新增多少列，這里注意操作列是不需要增加的，內(nèi)容列才需要增加，案例中就是員工編號、姓名、職位、愛好、籍貫、學(xué)歷6列主要內(nèi)容。

填寫好表格內(nèi)容后，在中繼器每項加載時，我們用設(shè)置文本的交互，將每列的內(nèi)容設(shè)置到中繼器表格里對應(yīng)的矩形內(nèi)。

這樣中繼器表格內(nèi)容部分就完成了。

2. 頁碼的制作

這里頁碼我們也是用中繼器來制作，因為只有中繼器才能實現(xiàn)增減的動態(tài)效果。

在中繼器里放入矩形元件，矩形要增加選中樣式，案例中是藍色，用于回顯當前是在第幾頁。

中繼器表格里共兩列，一列（Column0列）是記錄頁數(shù)的，第二列（true列）是用來記錄哪列被選中的。兩列默認為空即可，后面會通過交互讓頁碼自動增加。

中繼器每項加載時，我們用設(shè)置文本的交互，將index的值（就是第幾行）設(shè)置到矩形里，后面通過交互對應(yīng)的值就是12345的頁碼。

如果true列的值等于1，用設(shè)置選中的交互，設(shè)置頁碼矩形為選中狀態(tài)，因為前面設(shè)置了選中樣式，所以就會變色顯示。

如果前面主內(nèi)容中繼器加載到最后一行之后，我們就要做一個添加行的操作，中繼器有幾頁我們就添加幾條數(shù)據(jù)在頁碼中繼器里。在這之前我們要先增加一個文本標簽作為觸發(fā)分頁的事件。

在載入時，我們通過pagecount的函數(shù)，記錄中繼器里面總共有多少頁。

然后在根據(jù)條件來判斷，這個條件判斷我們可以寫在觸發(fā)分頁元件鼠標單擊時。

如果當前文本記錄內(nèi)容中繼器的頁數(shù)大于當前頁面中繼器的行數(shù)，我們可以用datacount獲取行數(shù)。這是我們就用添加行的交互，添加一行。然后在觸發(fā)該交互繼續(xù)循環(huán)。例如，主中繼里有5頁內(nèi)容，我們就記錄數(shù)字5，因為一開始頁碼中繼器里1行都沒有，行數(shù)為0，我們就添加一行，行數(shù)就變成1，還是小于5，就繼續(xù)添加，一直添加到第五行。這樣就可以對應(yīng)生成5個頁碼了。

這里需要注意的是，一般頁碼右邊都是有其他元件的，案例中有右箭頭和統(tǒng)計文字，所以我們還要用移動的交互，將右側(cè)的元件組合移動到頁面中繼器右側(cè)的位置。

然后我們在中繼器表格里加載到最后一行的時候，觸發(fā)分頁事件載入時就可以了，這樣每次中繼器表格數(shù)據(jù)發(fā)生改變，包括增加行、刪除行、搜索數(shù)據(jù)、篩選、重新分頁……都會相當于自動重新生成一次頁碼。

不過這里需要注意，因為后續(xù)操作在前面已經(jīng)有頁碼了，所以我們要先做一個還原的操作，就是把頁面中繼器里所有行數(shù)據(jù)先刪除，然后在自動添加新的頁碼。

頁碼出來之后，我們要考慮的是當前哪個頁碼應(yīng)該變色顯示，我們用pageindex的函數(shù)就可以獲取到主中繼器在第幾頁，因為頁碼中繼器我們在前面做了如果true值等于1，就選中變色，所以我們只需要用更新行的交互，將對應(yīng)行true列的值更新為1即可。例如現(xiàn)在在第三頁的位置，我們就把頁碼中繼器第三行true值更新為1。

這里同樣需要考慮還原的問題，因為前面會先選中其他頁碼，所以我們可以在該操作前，先更新所有行的true值等于0，這樣就相當于全部取消選中，然后在更新對應(yīng)行true列的值即可。

鼠標單擊頁碼時，我們用設(shè)置當前顯示頁面的交互，就可以將內(nèi)容中繼器設(shè)置到對應(yīng)的頁數(shù)了，這里我們也是用到index函數(shù)，因為index就是在第幾行，和頁碼是對應(yīng)的。

3. 其他元件

到這里根據(jù)表格數(shù)據(jù)自動生成對應(yīng)頁碼的模板已經(jīng)做好了。剩下的一些元件，例如表頭、按鈕、分頁的上拉列表、左右翻頁箭頭、統(tǒng)計文字、搜索框、篩選的下拉列表、排序按鈕等都可以自己添加，如果不會這些基礎(chǔ)效果的話也可以看回我之前的視頻教程。

增加了增刪改查分頁的效果之后，預(yù)覽的時候也可以根據(jù)表格動態(tài)變化自動分頁的，因為我們邏輯已經(jīng)寫好了，只要表格數(shù)據(jù)變動自動分頁，所以這個模板是非常實用的。

這樣我們就完成了根據(jù)表格數(shù)據(jù)自動生成頁碼的中繼器表格的原型模板了，后續(xù)使用也是很方便，默認的表格內(nèi)容只需要在中繼器表格里維護，即可自動生成頁碼的交互效果，后續(xù)需要其他中繼器表效果（如增刪改查分頁翻頁統(tǒng)計排序等）的話也可以在原基礎(chǔ)上添加。

以上就是本期教程的全部內(nèi)容，感興趣的同學(xué)們可以動手試試哦，感謝您的閱讀，我們下期見。