Ajax分頁插件Pagination從前臺jQuery到后端java總結
困惑了我一段時間的網(wǎng)頁分頁,今天特地整理了一下我完成不久的項目。下面我要分享下我這個項目的分頁代碼,前后端通吃。希望前輩多多指教。
一、效果圖
下面我先上網(wǎng)頁前臺和管理端的部分分頁效果圖,他們用的是一套代碼。


二、上代碼前的一些知識點
此jQuery插件為Ajax分頁插件,一次性加載,故分頁切換時無刷新與延遲,如果數(shù)據(jù)量較大不建議用此方法,因為加載會比較慢。

三、前臺代碼部分
var pageSize =6; //每頁顯示多少條記錄
var total; //總共多少記錄
$(function() {
Init(0); //注意參數(shù),初始頁面默認傳到后臺的參數(shù),第一頁是0;
$("#Pagination").pagination(total, { //total不能少
callback: PageCallback,
prev_text: '上一頁',
next_text: '下一頁',
items_per_page: pageSize,
num_display_entries: 4, //連續(xù)分頁主體部分顯示的分頁條目數(shù)
num_edge_entries: 1, //兩側顯示的首尾分頁的條目數(shù)
});
function PageCallback(index, jq) { //前一個表示您當前點擊的那個分頁的頁數(shù)索引值,后一個參數(shù)表示裝載容器。
Init(index);
}
});
function Init(pageIndex){ //這個參數(shù)就是點擊的那個分頁的頁數(shù)索引值,第一頁為0,上面提到了,下面這部分就是AJAX傳值了。
$.ajax({
type: "post",
url:"../getContentPaixuServ?Cat="+str+"&rows="+pageSize+"&page="+pageIndex,
async: false,
dataType: "json",
success: function (data) {
$(".neirong").empty();
/* total = data.total; */
var array = data.rows;
for(var i=0;i<array.length;i++){
var info=array[i];
if(info.refPic != null){
$(".neirong").append('<dl><h3><a href="'+info.CntURL+'?ContentId='+info.contentId+'" title="'+info.caption+'" >'+info.caption+'</a></h3><dt><a href="sjjm.jsp?ContentId='+info.contentId+'" title="'+info.caption+'" ><img src="<%=basePathPic%>'+info.refPic+'" alt="'+info.caption+' width="150" height="95""></a></dt> <dd class="shortdd">'+info.text+'</dd><span>發(fā)布時間:'+info.createDate+'</span></dl>')
}else{
$(".neirong").append('<dl ><h3><a href="'+info.CntURL+'?ContentId='+info.contentId+'" title="'+info.caption+'" >'+info.caption+'</a></h3><dd class="shortdd">'+info.text+'</dd><span>發(fā)布時間:'+info.createDate+'</span></dl>');
};
}
},
error: function () {
alert("請求超時,請重試!");
}
});
};
四、后臺部分(java)
我用的是MVC 3層模型
servlet部分: (可以跳過)
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html;charset=utf-8");
PrintWriter out = response.getWriter();
//獲取分頁參數(shù)
String p=request.getParameter("page"); //當前第幾頁(點擊獲?。?
int page=Integer.parseInt(p);
String row=request.getParameter("rows"); //每頁顯示多少條記錄
int rows=Integer.parseInt(row);
String s=request.getParameter("Cat"); //欄目ID
int indexId=Integer.parseInt(s);
JSONObject object=(new ContentService()).getContentPaiXuById(indexId, page, rows);
out.print(object);
out.flush();
out.close();
}
Service部分:(可以跳過)
public JSONObject getContentPaiXuById(int indexId, int page, int rows) {
JSONArray array=new JSONArray();
List<Content>contentlist1=(new ContentDao()).selectIndexById(indexId);
List<Content>contentlist=paginationContent(contentlist1,page,rows);
for(Content content:contentlist){
JSONObject object=new JSONObject();
object.put("contentId", content.getContentId());
object.put("caption", content.getCaption());
object.put("createDate", content.getCreateDate());
object.put("times", String.valueOf(content.getTimes()));
object.put("source", content.getSource());
object.put("text", content.getText());
object.put("pic", content.getPic());
object.put("refPic", content.getRefPic());
object.put("hot", content.getHot());
object.put("userId", content.getAuthorId().getUserId());
int id = content.getAuthorId().getUserId();
String ShowName = (new UserService()).selectUserById(id).getString("ShowName");
object.put("showName", ShowName);
array.add(object);
}
JSONObject obj=new JSONObject();
obj.put("total", contentlist1.size());
obj.put("rows", array);
return obj;
}
獲取出每頁的的起止id(這部分是重點),同樣寫在Service中,比如說假設一頁有6條內容,那么第一頁的id是從1到6,第二頁的id是從7到12,以此類推
//獲取出每頁的內容 從哪個ID開始到哪個ID結束。
private List<Content> paginationContent(List<Content> list,int page,int rows){
List<Content>small=new ArrayList<Content>();
int beginIndex=rows*page; //rows是每頁顯示的內容數(shù),page就是我前面強調多次的點擊的分頁的頁數(shù)的索引值,第一頁為0,這樣子下面就好理解了!
System.out.println(beginIndex);
int endIndex;
if(rows*(page+1)>list.size()){
endIndex=list.size();
}
else{
endIndex=rows*(page+1);
}
for(int i=beginIndex;i<endIndex;i++){
small.add(list.get(i));
}
return small;
}
Dao層: (可以跳過)
public List selectIndexById(int indexId){
List<Content>list=new ArrayList<Content>();
try{
conn = DBConn.getCon();
String sql = "select * from T_Content,T_User where T_Content.AuthorId = T_User.UserId and CatlogId=? order by CreateDate desc";
pstm = conn.prepareStatement(sql);
pstm.setInt(1, indexId);
rs = pstm.executeQuery();
SimpleDateFormat ff=new SimpleDateFormat("yyyy年MM月dd日 hh時mm分");
while(rs.next()){
Content content = new Content();
content.setContentId(rs.getInt("ContentId"));
content.setCaption(rs.getString("Caption"));
content.setCreateDate(f.format(rs.getTimestamp("CreateDate")));
content.setTimes(rs.getInt("Times"));
content.setSource(rs.getString("Source"));
content.setText(rs.getString("Text"));
content.setPic(rs.getString("Pic"));
content.setRefPic(rs.getString("RefPic"));
content.setHot(rs.getInt("Hot"));
User user = new User();
user.setUserId(rs.getInt("UserId"));
content.setAuthorId(user);
Catlog catlog = new Catlog(); //CntURL待開發(fā)
catlog.setCatlogId(rs.getInt("CatlogId"));
content.setCatlog(catlog);
list.add(content);
}
}catch(Exception e){
e.printStackTrace();
}finally{
DBConn.closeDB(conn, pstm, rs);
}
return list;
}
精彩專題分享:jquery分頁功能操作 JavaScript分頁功能操作
以上就是網(wǎng)頁所實現(xiàn)的分頁代碼,easy-ui部分的分頁也可以參考以上代碼。
- jQuery Pagination Ajax分頁插件(分頁切換時無刷新與延遲)中文翻譯版
- jquery分頁插件jquery.pagination.js使用方法解析
- Jquery 分頁插件之Jquery Pagination
- 最實用的jQuery分頁插件
- 分享一個自己動手寫的jQuery分頁插件
- jQuery ajax分頁插件實例代碼
- 基于bootstrap3和jquery的分頁插件
- jQuery插件分享之分頁插件jqPagination
- jquery ajax分頁插件的簡單實現(xiàn)
- jquery+css3打造一款ajax分頁插件(自寫)
- 使用JQuery實現(xiàn)的分頁插件分享
- jQuery實現(xiàn)的分頁插件完整示例
相關文章
Jquery對新插入的節(jié)點 綁定Click事件失效的解決方法
下面小編就為大家?guī)硪黄狫query對新插入的節(jié)點 綁定Click事件失效的解決方法。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-06-06
jQuery插件multiScroll實現(xiàn)全屏鼠標滾動切換頁面特效
本文給大家分享的是一款jQuery整屏(全屏)滾動插件網(wǎng)頁特效,滾動鼠標滾輪整屏一屏滾動切換代碼,可設置文字/圖片絕對上下左右居中顯示JS代碼,時下最流行的jQuery全屏滾動插件?。嫒轀y試:IE6及以上、Firefox、Chrome、Opera、Safari、360等主流瀏覽器)2015-04-04
jQuery實現(xiàn)網(wǎng)頁頂部固定導航效果代碼
這篇文章主要介紹了jQuery實現(xiàn)網(wǎng)頁頂部固定導航效果代碼,涉及jQuery響應scroll事件動態(tài)操作頁面元素樣式的相關技巧,需要的朋友可以參考下2015-12-12
jQuery插件zTree實現(xiàn)刪除樹子節(jié)點的方法示例
這篇文章主要介紹了jQuery插件zTree實現(xiàn)刪除樹子節(jié)點的方法,結合實例形式分析了jQuery樹形插件zTree針對節(jié)點的遍歷與刪除操作相關技巧,需要的朋友可以參考下2017-03-03

