困惑了我一段时间的网页分页,今天特地整理了一下我完成不久的项目。下面我要分享下我这个项目的分页代码,前后端通吃。希望前辈多多指教。
一、效果图
下面我先上网页前台和管理端的部分分页效果图,他们用的是一套代码。
二、上代码前的一些知识点
此jQuery插件为Ajax分页插件,一次性加载,故分页切换时无刷新与延迟,如果数据量较大不建议用此方法,因为加载会比较慢。
三、前台代码部分
var pageSize =6; //每页显示多少条记录 var total; //总共多少记录 $(function() { Init(0); //注意参数,初始页面默认传到后台的参数,第一页是0; $("#Pagination").pagination(total, { //total不能少 callback: PageCallback, prev_text: '上一页', next_text: '下一页', items_per_page: pageSize, num_display_entries: 4, //连续分页主体部分显示的分页条目数 num_edge_entries: 1, //两侧显示的首尾分页的条目数 }); function PageCallback(index, jq) { //前一个表示您当前点击的那个分页的页数索引值,后一个参数表示装载容器。 Init(index); } }); function Init(pageIndex){ //这个参数就是点击的那个分页的页数索引值,第一页为0,上面提到了,下面这部分就是AJAX传值了。 $.ajax({ type: "post", url:"../getContentPaixuServ"+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+'" title="'+info.caption+'" >'+info.caption+'</a></h3><dt><a href="sjjm.jsp" title="'+info.caption+'" ><img src="/UploadFiles/2021-04-02/<%=basePathPic%>'+info.refPic+'">四、后台部分(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(); //获取分页参数 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是每页显示的内容数,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<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="; 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; }精彩专题分享:jquery分页功能操作 JavaScript分页功能操作
以上就是网页所实现的分页代码,easy-ui部分的分页也可以参考以上代码。
华山资源网 Design By www.eoogi.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
华山资源网 Design By www.eoogi.com
暂无评论...
RTX 5090要首发 性能要翻倍!三星展示GDDR7显存
三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。
首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。
据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。
更新日志
2024年11月16日
2024年11月16日
- 那英《如今》引进版[WAV+CUE][1G]
- 蔡幸娟.1991-真的让我爱你吗【飞碟】【WAV+CUE】
- 群星.2024-好团圆电视剧原声带【TME】【FLAC分轨】
- 陈思安.1990-国语钢琴酒吧5CD【欣代唱片】【WAV+CUE】
- 莫文蔚《莫后年代20周年世纪典藏》3CD[WAV+CUE][2G]
- 张惠妹《我要快乐》华纳[WAV+CUE][1G]
- 罗大佑1982《之乎者也》无法盗版的青春套装版 [WAV+CUE][1G]
- 曾庆瑜1989-款款柔情[日本东芝版][WAV+CUE]
- Scelsi-IntegraledesquatuorsacordesetTrioacordes-QuatuorMolinari(2024)[24bit-WAV]
- 房东的猫2017-房东的猫[科文音像][WAV+CUE]
- 杨乃文.2016-离心力(引进版)【亚神音乐】【WAV+CUE】
- 群星.2024-珠帘玉幕影视原声带【TME】【FLAC分轨】
- 芝麻龙眼.2008-光阴隧道民歌记录3CD【乡城】【WAV+CUE】
- 谭艳《再度重相逢HQII》头版限量[低速原抓WAV+CUE][549M]
- ABC唱片《蔡琴三十周年纪念版》6N纯银镀膜 [WAV+CUE][1.1G]