首先下載kkpager插件：https://github.com/pgkk/kkpager
1、將下載下來的js和css拷貝到項目中，在需要分頁的頁面引入kkpager插件所需的js和css,如下：
<script type="text/javascript" src="js/kkpager.js"></script> <script type="text/javascript" src="js/jquery-1.8.3.js"></script> <link rel="stylesheet" type="text/css" href="css/kkpager_orange.css">
其中css有兩個，一個是橘色的，一個是藍色的，選擇喜歡的顏色任意引入一個就可以。
2、在需要分頁的頁面添加div：
<div id="kkpager"></div>
3、因為使用時這個插件初始化頁面時代碼挺多，所以我就新建了一個js文件，并在其中封裝了一個初始化的方法。
新建common.js(記得將這個js引入到要分頁的頁面哦),定義方法initPage;
/**
* 生成分頁控件
nowPage:當前頁
totalPage:總頁數
totalRows：總記錄條數
rows:每頁顯示多少條
fun：要調用的函數 一般寫填充表格數據的邏輯
*/
function initPage(nowPage,totalPage,totalRows,rows,fun){
//生成分頁控件
kkpager.generPageHtml({
pno : nowPage,
mode : 'click', //設置為click模式
//總頁碼
total : totalPage,
//總數據條數
totalRecords : totalRows,
//點擊頁碼、頁碼輸入框跳轉、以及首頁、下一頁等按鈕都會調用click
//適用于不刷新頁面，比如ajax
click : function(n){
//這里可以做自已的處理
//...
//點擊要調用的函數 參數1 當前頁數 參數2 每頁顯示的條數
fun(n,rows);
//處理完后可以手動條用selectPage進行頁碼選中切換
this.selectPage(n);
},
//getHref是在click模式下鏈接算法，一般不需要配置，默認代碼如下
getHref : function(n){
return '#';
}
});
}這樣基本就搞定了。
4、在需要分頁的的頁面使用，其實現在只要直接調用comom.js中定義好的方法即可。
<script type="text/javascript">
//自定義方法，獲取數據并加載
/*
nowPage:當前頁
rows：每頁顯示的數據條數
*/
function loadInfor(nowPage,rows){
//TODO（例：發送ajax請求，從后臺獲取數據，構建動態表格之類的……）
//其中的10 和100 可以是從后臺獲取的真實數據
//loadInfor是當前這個函數，作為參數傳入是為了initPage中的click點擊事件
initPage(nowPage,10,100,rows,loadInfor);
}
$(function(){
//kkpager.pno :插件提供的方法，獲取當前頁碼
loadInfor(kkpager.pno,10);
});
</script>
</head>
<body>
<div id="kkpager"></div>
</body>頁面效果：
如果有真實的數據，效果就更鮮明了，完畢！
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
額外的：PageUtil.java,后臺封裝頁面所需的分頁數據，一并奉上！
public class PageUtil implements java.io.Serializable{
/**
* serialVersionUID
*/
private static final long serialVersionUID = 1L;
// 當前頁
private Integer page;
// 每頁多少條
private Integer rows;
// 總頁數
private Integer totalPage;
// 總記錄條數
private Integer totalRows;
public Integer getPage() {
return page;
}
public void setPage(Integer page) {
this.page = page;
}
public Integer getRows() {
if(rows==null){
rows=10;
}
return rows;
}
public void setRows(Integer rows) {
this.rows = rows;
}
public Integer getTotalPage() {
if(totalRows==null){
totalRows=0;
}
if (totalRows % getRows() == 0) {
totalPage = totalRows / getRows();
} else {
totalPage = totalRows / getRows() + 1;
}
return totalPage;
}
public void setTotalPage(Integer totalPage) {
this.totalPage = totalPage;
}
public Integer getTotalRows() {
return totalRows;
}
public void setTotalRows(Integer totalRows) {
this.totalRows = totalRows;
}
public PageUtil(Integer page, Integer rows, Integer totalPage,
Integer totalRows) {
super();
this.page = page;
this.rows = rows;
this.totalPage = totalPage;
this.totalRows = totalRows;
}
public PageUtil() {
super();
}
@Override
public String toString() {
return "PageUtil [page=" + page + ", rows=" + rows + "]";
}
}免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
