加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 百科 > 正文

Ajax分页插件Pagination从前台jQuery到后端java总结

发布时间:2020-12-15 23:25:21 所属栏目:百科 来源:网络整理
导读:困惑了我一段时间的网页分页,今天特地整理了一下我完成不久的项目。下面我要分享下我这个项目的分页代码,前后端通吃。希望前辈多多指教。 一、效果图 下面我先上网页前台和管理端的部分分页效果图,他们用的是一套代码。 二、上代码前的一些知识点 此jQuer

困惑了我一段时间的网页分页,今天特地整理了一下我完成不久的项目。下面我要分享下我这个项目的分页代码,前后端通吃。希望前辈多多指教。

一、效果图

下面我先上网页前台和管理端的部分分页效果图,他们用的是一套代码。

二、上代码前的一些知识点

此jQuery插件为Ajax分页插件,一次性加载,故分页切换时无刷新与延迟,如果数据量较大不建议用此方法,因为加载会比较慢。

三、前台代码部分

function Init(pageIndex){ //这个参数就是点击的那个分页的页数索引值,第一页为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('

'+info.caption+'

<img src="<%=basePathPic%>'+info.refPic+'" alt="'+info.caption+' width="150" height="95"">
<dd class="shortdd">'+info.text+'发布时间:'+info.createDate+'
')
}else{
$(".neirong").append('

'+info.caption+'

<dd class="shortdd">'+info.text+'发布时间:'+info.createDate+'
');
};
}
},error: function () {
alert("请求超时,请重试!");
}
});
};

四、后台部分(java)

我用的是MVC 3层模型

servlet部分: (可以跳过)

response.setContentType("text/html;charset=utf-8");
PrintWriter out = response.getWriter();
//获取分页参数
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部分:(可以跳过)

contentlist1=(new ContentDao()).selectIndexById(indexId); Listcontentlist=paginationContent(contentlist1,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,以此类推

paginationContent(List list,int rows){ Listsmall=new ArrayList(); int beginIndex=rows*page; //rows是每页显示的内容数,page就是我前面强调多次的点击的分页的页数的索引值,第一页为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

Dao层: (可以跳过)

<div class="jb51code">
<pre class="brush:java;">
public List selectIndexById(int indexId){
Listlist=new ArrayList();
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待开发
catlog.setCatlogId(rs.getInt("CatlogId"));
content.setCatlog(catlog);
list.add(content);
}
}catch(Exception e){
e.printStackTrace();
}finally{
DBConn.closeDB(conn,pstm,rs);
}
return list;
}

精彩专题分享:

以上就是网页所实现的分页代码,easy-ui部分的分页也可以参考以上代码。

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读