后端分页实例

最新推荐文章于 2023-12-17 13:06:18 发布

liuzhen12580

最新推荐文章于 2023-12-17 13:06:18 发布

阅读量4.3k

点赞数 4

分类专栏：个人文章标签：分页后端分页带省略号分页

本文链接：https://blog.csdn.net/liuzhen12580/article/details/80350802

版权

个人专栏收录该内容

11 篇文章 0 订阅

订阅专栏

废话不多说，先看效果图！

直接上代码：

前端页面

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://"
            + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
 
<title>分页测试</title>
 
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
 
 
<link rel="stylesheet" href="fpage/layui/css/layui.css"  media="all">
<script src="fpage/layui/layui.all.js" charset="utf-8"></script>
<script src="fpage/layui/lay/modules/laypage.js" charset="utf-8"></script>
<script src="components/plugin/jquery/jquery-1.6.0.js" charset="utf-8"></script>
 
<script>
$(document).ready(function(){
    //表格初始化
    $.ajax({
        type:"post",
        url:"SingerController/getInfo.do",//对应controller的URL
           success:function(json){
               var total=json;
               initFPage(total);
           }
    });
     
  })
    //分页器
    function initFPage(total){
        layui.use('laypage', function(){
        var laypage = layui.laypage;
         laypage.render({
              elem: 'page', //注意，这里的 page 是 ID，不用加 # 号
              //数据总数，从服务端得到
              limits:[10,20,30,40,50],
              prev:"<<",
              next:">>",
              theme:"#0099ff",
              layout: ['count', 'prev', 'page', 'next', 'limit', 'skip'],
              count:total,//总记录数
              curr:1,//初始化选中的页码
              limit:10,//每页显示记录数
              jump:function(layinit){
                  $.ajax({
                      type:"post",
                      url:"SingerController/getInfo222.do",//对应controller的URL
                      data:{
                          "page":layinit.curr,//当前页码
                          "size":layinit.limit},//请求每页数据记录数；
                          success:function(json){
                              var list=json;
                              //初始化table页面
                              var tr="";
                              for(var j=0;j < list.length;j++){
                              tr+='<td>'+list[j].singerName+'</td>';
                              }
                              $("#tbody").html(tr);
                      }
                  });
              }
         });
 
        });
    }
</script>
</head>
 
<body>
    <div class=" table-second">
        <div class="table-container">
            <table class="layui-table" id="initInfo">
                <thead id="thead">
                </thead>
                <tbody id="tbody">
                </tbody>
            </table>
        </div>
    </div>
    <div id="page" style="text-align:right"></div>
</body>
</html>

控制层：

package com.hgs.amusicweb.controller;
 
import java.io.IOException;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
 
import javax.servlet.http.HttpServletResponse;
 
import net.sf.json.JSONArray;
 
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
 
import com.hgs.amusicweb.biz.SingerBiz;
import com.hgs.amusicweb.pojo.SingerPojo;
 
//歌手页面
@Controller
@RequestMapping("/SingerController")
public class SingerController {
    @Autowired
    private SingerBiz singerBiz;
     
    @RequestMapping(value = "/getInfo")
    public void inborrowInfo(,HttpServletResponse response)
            throws IOException {
        //查询总记录数
        response.getWriter().print(singerBiz.queryCount());
    }
@RequestMapping(value = "/getInfo222")
    public void inborrowInfo(Integer page,Integer size,HttpServletResponse response)
            throws IOException {
        if(page!=null&&size!=null){
            //查询当前页记录数据
            List<SingerPojo> querySingerListLimit = singerBiz.querySingerListLimit(page,size);
            JSONArray json = JSONArray.fromObject(querySingerListLimit );
            response.getWriter().print(json);
        }
    }
}

后面的代码就只能靠自己了，哈哈。

liuzhen12580

关注

4
点赞
踩
5

收藏

觉得还不错? 一键收藏
2
评论
后端分页实例

废话不多说，先看效果图！直接上代码：前端页面，initFPage(total)方法中的pagenum属性是在laypage.js中定义的当前页实现分页就靠它了。&lt;%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%&gt;&lt;% String path = request.getContextPat...
复制链接

扫一扫

专栏目录