溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

使用jquery插件kkpager為頁面添加分頁

發(fā)布時間：2020-06-20 08:36:07 來源：網(wǎng)絡(luò) 閱讀：1754 作者：興趣e族 欄目：web開發(fā)

首先下載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:當(dāng)前頁
   totalPage:總頁數(shù)
   totalRows：總記錄條數(shù)
   rows:每頁顯示多少條
   fun：要調(diào)用的函數(shù)  一般寫填充表格數(shù)據(jù)的邏輯
 */
function initPage(nowPage,totalPage,totalRows,rows,fun){
        //生成分頁控件  
kkpager.generPageHtml({
    pno : nowPage,
    mode : 'click', //設(shè)置為click模式
    //總頁碼  
    total : totalPage,  
    //總數(shù)據(jù)條數(shù)  
    totalRecords : totalRows,
    //點擊頁碼、頁碼輸入框跳轉(zhuǎn)、以及首頁、下一頁等按鈕都會調(diào)用click
    //適用于不刷新頁面，比如ajax
    click : function(n){
        //這里可以做自已的處理
        //...
        //點擊要調(diào)用的函數(shù) 參數(shù)1 當(dāng)前頁數(shù)  參數(shù)2 每頁顯示的條數(shù)
        fun(n,rows);
        //處理完后可以手動條用selectPage進行頁碼選中切換
        this.selectPage(n);
    },
    //getHref是在click模式下鏈接算法，一般不需要配置，默認代碼如下
    getHref : function(n){
        return '#';
    }
});
}

這樣基本就搞定了。

4、在需要分頁的的頁面使用，其實現(xiàn)在只要直接調(diào)用comom.js中定義好的方法即可。

<script type="text/javascript">
//自定義方法，獲取數(shù)據(jù)并加載
/*
	nowPage:當(dāng)前頁
	rows：每頁顯示的數(shù)據(jù)條數(shù)
*/
function loadInfor(nowPage,rows){
	//TODO（例：發(fā)送ajax請求，從后臺獲取數(shù)據(jù)，構(gòu)建動態(tài)表格之類的……）
	//其中的10 和100 可以是從后臺獲取的真實數(shù)據(jù)
	//loadInfor是當(dāng)前這個函數(shù)，作為參數(shù)傳入是為了initPage中的click點擊事件
	initPage(nowPage,10,100,rows,loadInfor);
}
	$(function(){
		//kkpager.pno :插件提供的方法，獲取當(dāng)前頁碼
		loadInfor(kkpager.pno,10);
	});

</script>
</head>
<body>
	<div id="kkpager"></div>
</body>

頁面效果：


使用jquery插件kkpager為頁面添加分頁


如果有真實的數(shù)據(jù)，效果就更鮮明了，完畢！

++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

額外的：PageUtil.java,后臺封裝頁面所需的分頁數(shù)據(jù)，一并奉上！

public class PageUtil  implements java.io.Serializable{
	/**
	 * serialVersionUID
	 */
	private static final long serialVersionUID = 1L;
	// 當(dāng)前頁
	private Integer page;
	// 每頁多少條
	private Integer rows;
	// 總頁數(shù)
	private Integer totalPage;
	// 總記錄條數(shù)
	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 + "]";
	}

}


向AI問一下細節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手