天天看點

【jQuery 分頁】jQuery分頁功能的實作

自寫的jQuery實作分頁功能的分頁元件:

功能效果如下:

【jQuery 分頁】jQuery分頁功能的實作

分頁元件就是上圖中的三部分, 分别放在表格上部  和下部 。

其中,

1》》》頁面的代碼如下:

product.jsp

其中引用bootstrap.css  和bootstrap .js是必須的

【jQuery 分頁】jQuery分頁功能的實作
【jQuery 分頁】jQuery分頁功能的實作

View Code

2》》》分頁元件的js檔案

pageSet.js

【jQuery 分頁】jQuery分頁功能的實作
【jQuery 分頁】jQuery分頁功能的實作

3》》》本頁面的js中  需要提供資料的封裝功能 bindDate()方法,【并且注意,任何頁面發生變化的地方都需要調用分頁的page.pageSet();方法,例如資料的增加,資料的删除,還有page對象初始化,頁面初始化的時候就是這幾個地方需要調用】

    3.1》》》product.js中的page對象初始化也就是在頁面初始化的時候+删除操作的時候

【jQuery 分頁】jQuery分頁功能的實作
【jQuery 分頁】jQuery分頁功能的實作

    3.2》》》productAdd.js中添加一條資料完成後

【jQuery 分頁】jQuery分頁功能的實作
【jQuery 分頁】jQuery分頁功能的實作

4》》》controller伺服器中的處理方法

@Controller

@RequestMapping("geneInfo")

public class GeneInfoController {

【jQuery 分頁】jQuery分頁功能的實作
【jQuery 分頁】jQuery分頁功能的實作

5》》》Dao的實作層 的分頁實作

【jQuery 分頁】jQuery分頁功能的實作
【jQuery 分頁】jQuery分頁功能的實作

其中主要的思想 就是 将分頁元件 分離出來,僅作分頁處理。而資料的封裝則是在不同的頁面進行不同的封裝實作。然後封裝資料的方法作為參數傳遞給分頁對象。