使用SpringBoot的pagehelper分页插件搭配layui分页组件

最新推荐文章于 2022-09-22 10:15:50 发布

We Never say die

最新推荐文章于 2022-09-22 10:15:50 发布

阅读量224

点赞数

分类专栏：知识点文章标签： layui spring boot java

本文链接：https://blog.csdn.net/Oracleone1/article/details/120450969

版权

知识点专栏收录该内容

24 篇文章 2 订阅

订阅专栏

1.在 pom.xml 中添加 pagehelper 依赖

    <!--pagehelper-->
    <dependency>
      <groupId>com.github.pagehelper</groupId>
      <artifactId>pagehelper-spring-boot-starter</artifactId>
      <version>RELEASE</version>
    </dependency>

2.配置 application.yml

  #分页插件配置
pagehelper:
  helper-dialect: mysql
  reasonable: true
  support-methods-arguments: true
  params: count

3.编写主要代码

controller中

    /**
     * 分页查询商品基本信息
     * @return  分页信息
     */
    @RequestMapping("/getTrainSchemeFY")
    @ResponseBody
    public PageInfo<DangdangProduct> getTrainschemeinfosFY(...){
        
        //根据需求传参，这里我已经将信息保存至dangdangProduct中
        //省略部分代码

        //开启分页 Mybatis -通用分页拦截器类似拦截器的实现方法
        PageHelper.startPage(pageNum,pageSize);
        List<DangdangProduct> trainschemeinfoByCondition = null;
        try {
            trainschemeinfoByCondition =  dangdangProductService.queryProductListPaged(dangdangProduct,category2);
        } catch (Exception e) {
            e.printStackTrace();
        }
        PageInfo<DangdangProduct> pageInfo = new PageInfo<DangdangProduct>(trainschemeinfoByCondition);
        return pageInfo;
    }

我对应的查询数据库代码是

<!--商品-->
  <select id="selectProductAndCategory" parameterType="com.gxy.entity.DangdangProduct" resultMap="BaseResultMap">
    SELECT
    p.product_id,
    p.product_name,
    p.product_author,
    p.product_img,
    p.product_press,
    p.product_presstime,
    p.product_edition,
    p.product_printtime,
    p.product_printcount,
    p.product_isbn,
    p.product_wordcount,
    p.product_pagecount,
    p.product_format,
    p.product_paper,
    p.product_pack,
    p.product_price,
    p.product_ddprice,
    p.product_count,
    p.product_addtime,
    p.product_recommend,
    p.product_brief,
    p.product_authorbrief,
    p.product_directory,
    p.product_mediacomment,
    p.product_excerpt,
    p.product_create_date
    FROM
    dangdang_product AS p
    LEFT JOIN dangdang_category2 AS c2 ON p.category2_id = c2.category2_id
    <where>
        <if test="category2.category2Id!=null and category2.category2Id > 0">
          p.category2_id = #{category2.category2Id}
        </if>
        <if test="category2.category1Id!=null and category2.category1Id > 0">
          and c2.category1_id = #{category2.category1Id}
        </if>
        <if test="product.productName!=null and !product.productName.equals('')">
          and p.product_name LIKE CONCAT('%',#{product.productName},'%')
        </if>
        <if test="product.productAuthor!=null and !product.productAuthor.equals('')">
          and product_author LIKE CONCAT('%',#{product.productAuthor},'%')
        </if>
        <if test="product.productPress!=null and !product.productPress.equals('')">
          and product_press LIKE CONCAT('%',#{product.productPress},'%')
        </if>
    </where>
  </select>

4.前端 layui 组件分页

<head>
<title>分页</title>
<link href="${pageContext.request.contextPath}/layui/css/layui.css" rel="stylesheet" type="text/css"/>
</head>

<body>
<%--当前页--%>
<input type="hidden" name="pageNum"/>

<%--显示几条--%>
<input type="hidden" name="pageSize"/>

<%--显示图书--%>
<div id="list_r"></div>

<%--分页组件--%>
<div id="pageDiv"></div>
</body>

js接受后端数据

<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-2.1.4.min.js"></script>
<script src="${pageContext.request.contextPath}/layui/layui.js"></script>
<script type="text/javascript">

//全局加载
$(function(){
  queryTrainSchemeFY();
})

/***** 分页查询相关方法**********/
function queryTrainSchemeFY(){
  var pageNum = $("[name='pageNum']").val();//向隐藏域设置当前页的值
  var pageSize = $("[name='pageSize']").val();//向隐藏域设置当前页的大小

  //省略获取需要传递给后端的值
  
  $.ajax({
	url:"${pageContext.request.contextPath}/product/getTrainSchemeFY",
	data:{
		//需要的返回后端的值
	},
	dataType:'json',
	type:'post',
	async:true,
	success:showTrainSchemeTable
   });
}  

function showTrainSchemeTable(pageInfo){
	// alert(JSON.stringify(pageInfo))
	var total = pageInfo.total;//页总数
	var pageNum = pageInfo.pageNum;//页号
	var pageSize = pageInfo.pageSize;//页大小
	var trainschemes = pageInfo.list;
	$("#list_r").html("");//清空表格中数据并重新填充数据
	for(var i=0,length_1 = trainschemes.length;i<length_1;i++){
		var index = (pageNum - 1) * pageSize + i + 1;
		var tr = 将数据结合到html标签;
        //将html标签添加到页面
		$("#list_r").append(tr);
	};
	//开启分页组件
	trainschemesPage(total,pageNum,pageSize);
}  

/**
* layui的分页插件
* @param total 总数
* @param pageNum   当前页
* @param pageSize  页大小
*/
function trainschemesPage(total,pageNum,pageSize){
    //使用layui的分页插件
	layui.use(['laypage', 'layer'], function(){
	var laypage = layui.laypage,layer = layui.layer;

	//执行一个laypage实例
	laypage.render({
		elem: 'pageDiv', //注意，这里的 test1 是 ID，不用加 # 号
		count: total, //数据总数，从服务端得到
		limit:pageSize,//每页显示的条数。laypage将会借助 count 和 limit 计算出分页数。
		curr:pageNum,//当前页号
		limits:[3,6,10,20],
		layout:['limit','prev', 'page', 'next','skip','count'],//显示哪些分页组件
		jump: function(obj, first){//点击页号的时候执行的函数
		//obj包含了当前分页的所有参数，比如：
		// console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
		// console.log(obj.limit); //得到每页显示的条数

		$("[name='pageNum']").val(obj.curr);//向隐藏域设置当前页的值
		$("[name='pageSize']").val(obj.limit);//向隐藏域设置当前页的大小
		if(!first){//首次不执行(点击的时候才执行)
			queryTrainSchemeFY();//执行查询分页函数(这个函数必须写在这里)
		}
	}

});
});
}

</script>

layui 分页组件需要在layui网站上下载layui文件，将其放入到项目中即可

We Never say die

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
使用SpringBoot的pagehelper分页插件搭配layui分页组件

1.在 pom.xml 中添加 pagehelper 依赖  <dependency> <groupId>com.github.pagehelper</groupId> <artifactId>pagehelper-spring-boot-starter</artifactId> <version>RELEASE</version
复制链接

扫一扫