bootstrap-table插件实现分页(服务端分页)

已于 2022-04-11 17:14:15 修改
阅读量1.5k 收藏 4
点赞数
分类专栏： jQuery bootstrap SSM 文章标签： bootstrap springmvc spring mybatis ajax
于 2021-01-01 22:26:30 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43753724/article/details/112074557
版权
SSM 同时被 3 个专栏收录
30 篇文章 3 订阅
订阅专栏
jQuery
29 篇文章 3 订阅
订阅专栏
bootstrap
17 篇文章 0 订阅
订阅专栏

文章目录

前言：

本文为服务端分页，想看客户端分页请点击这里:
https://blog.csdn.net/qq_43753724/article/details/115034595?spm=1001.2014.3001.5501

前端html部分

<%--商品列表显示--%>
            <div class="ibox-content table-responsive">
                <table id="table" class="table" data-click-to-select="true">
                </table>
            </div>

js部分

$(function () {
        
            var $table=$('#table');
            $table.bootstrapTable({
                url:"/ssm_test/productinfo/list",
                dataType:"json",    //服务器返回的数据类型
                method:'post',      //请求方式
                contentType: "application/x-www-form-urlencoded",//发送到服务器的数据编码类型
                pagination:true,    //是否显示分页
                pageSize:8,         //设置每页的记录行数
                pageList: [8,16,32,64],   //可供选择的每页的行数
                pageNumber:1,       //设置首页页码
                singleSelect:false, //设置是否单选
                checkboxHeader: true,
                sortable:true,      //是否启用排序
                sortOrder:"asc",    //排序方式
                clickToSelect:true, //是否启用点击选中行
                queryParamsType:"undefined",    //设置参数格式
                queryParams:function queryParams(params) {  //设置查询参数page和rows
                    //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
                    var param={
                        page:params.pageNumber, //首页页码
                        rows:params.pageSize    //每页的记录行数
                    };
                    return param;
                },
                cache:false,        //禁用AJAX数据缓存
                sidePagination: 'server',   //服务端处理分页
                columns:[{
                    checkbox:true
                },{
                    title:'商品编码',
                    field:'code',
                    valign:'middle'
                },{
                    title: '商品名称',
                    field:'name',
                    valign:'middle'
                },{
                    title:'商品类型',
                    field:'type',
                    formatter:function (value,row,index) {
                        if (row.type){
                            return row.type.name;
                        }else{
                            return value;
                        }
                    }
                },{
                    title:'商品品牌',
                    field:'brand',
                    valign:"middle"
                },{
                    title:'商品数量',
                    field:'num',
                    valign:'middle'
                },{
                    title:'商品价格',
                    field:'price',
                    valign:'middle'
                },{
                    title:'商品介绍',
                    field:'intro',
                    valign:'middle'
                }],
                // onLoadSuccess:function () {
                //     swal('系统提示','数据加载成功','success');
                // },
                // onLoadError:function () {
                //     swal('系统提示','数据加载失败!','warning');
                // }
            });
         });

后端

实体类:

package com.ssm.pojo;

public class ProductInfo {
	// 商品基本信息（部分）
	private int id; // 商品编号
	private String code; // 商品编码
	private String name; // 商品名称
	// 关联属性
	private Type type;    // 商品类型

	private String brand; // 商品品牌
	private String pic; // 商品小图
	private int num; // 商品数量
	private double price; // 商品价格
	private String intro; // 商品介绍
	private int status; // 商品状态	

	private double priceFrom;
	private double priceTo;

	public int getId() {
		return id;
	}

	public void setId(int id) {
		this.id = id;
	}

	public String getCode() {
		return code;
	}

	public void setCode(String code) {
		this.code = code;
	}

	public String getName() {
		return name;
	}

	public void setName(String name) {
		this.name = name;
	}

	public String getIntro() {
		return intro;
	}

	public void setIntro(String intro) {
		this.intro = intro;
	}

	public String getBrand() {
		return brand;
	}

	public void setBrand(String brand) {
		this.brand = brand;
	}

	public double getPrice() {
		return price;
	}

	public void setPrice(double price) {
		this.price = price;
	}

	public int getStatus() {
		return status;
	}

	public void setStatus(int status) {
		this.status = status;
	}

	public String getPic() {
		return pic;
	}

	public void setPic(String pic) {
		this.pic = pic;
	}
	
	public int getNum() {
		return num;
	}

	public void setNum(int num) {
		this.num = num;
	}

	public double getPriceFrom() {
		return priceFrom;
	}

	public void setPriceFrom(double priceFrom) {
		this.priceFrom = priceFrom;
	}

	public double getPriceTo() {
		return priceTo;
	}

	public void setPriceTo(double priceTo) {
		this.priceTo = priceTo;
	}

	public Type getType() {
		return type;
	}

	public void setType(Type type) {
		this.type = type;
	}

	@Override
	public String toString() {
		return "ProductInfo{" +
				"id=" + id +
				", code='" + code + '\'' +
				", name='" + name + '\'' +
				", type=" + type +
				", brand='" + brand + '\'' +
				", pic='" + pic + '\'' +
				", num=" + num +
				", price=" + price +
				", intro='" + intro + '\'' +
				", status=" + status +
				", priceFrom=" + priceFrom +
				", priceTo=" + priceTo +
				'}';
	}
}


package com.ssm.pojo;

public class Pager {
	private int curPage;// 待显示页
	private int perPageRows;// 每页显示的记录数
	private int rowCount; // 记录总数
	private int pageCount; // 总页数

	public int getCurPage() {
		return curPage;
	}

	public void setCurPage(int currentPage) {
		this.curPage = currentPage;
	}

	public int getPerPageRows() {
		return perPageRows;
	}

	public void setPerPageRows(int perPageRows) {
		this.perPageRows = perPageRows;
	}

	public int getRowCount() {
		return rowCount;
	}

	public void setRowCount(int rowCount) {
		this.rowCount = rowCount;
	}
	// 根据rowCount和perPageRows计算总页数
	public int getPageCount() {
		return (rowCount + perPageRows - 1) / perPageRows;
	}
	// 分页显示时，获取当前页的第一条记录的索引
	public int getFirstLimitParam() {
		return (this.curPage - 1) * this.perPageRows;
	}

	@Override
	public String toString() {
		return "Pager{" +
				"curPage=" + curPage +
				", perPageRows=" + perPageRows +
				", rowCount=" + rowCount +
				", pageCount=" + pageCount +
				'}';
	}
}


package com.ssm.pojo;

public class Type {
	private int id; // 产品类型编号
	private String name; // 产品类型名称

	public int getId() {
		return id;
	}

	public void setId(int id) {
		this.id = id;
	}

	public String getName() {
		return name;
	}

	public void setName(String name) {
		this.name = name;
	}

	@Override
	public String toString() {
		return "Type{" +
				"id=" + id +
				", name='" + name + '\'' +
				'}';
	}
}

Controller

package com.ssm.controller;

import com.ssm.pojo.Pager;
import com.ssm.pojo.ProductInfo;
import com.ssm.pojo.Type;
import com.ssm.service.ProductInfoService;
import com.ssm.service.TypeService;
import org.apache.ibatis.annotations.Param;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.ModelMap;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.File;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

@Controller
@RequestMapping(value = "/productinfo",method = {RequestMethod.GET,RequestMethod.POST})
public class ProductInfoController {

    @Autowired
    ProductInfoService productInfoService;
    @Autowired
    TypeService typeService;

    //后台商品列表分页显示
    @RequestMapping("/list")
    @ResponseBody
    public Map<String,Object> list(Integer page, Integer rows, ProductInfo productInfo){
        //初始化分页类对象
        Pager pager=new Pager();
        pager.setCurPage(page);
        pager.setPerPageRows(rows);
       // System.out.println(pager);
        //创建params对象，封装查询条件
        Map<String,Object> params=new HashMap<>();
        params.put("productInfo",productInfo);
        //获取满足条件的商品总数
        int totalCount=productInfoService.count(params);
        //获取满足条件的商品列表
        List<ProductInfo> productInfos=productInfoService.findProductInfo(productInfo,pager);
        //创建result对象，保存查询结果数据
        Map<String,Object> result=new HashMap<>(2);
        result.put("total",totalCount);
        result.put("rows",productInfos);
        //将结果以JSON格式发送到前端控制器
        return result;
    }
}

Service层

package com.ssm.service;

import com.ssm.pojo.Pager;
import com.ssm.pojo.ProductInfo;

import java.util.List;
import java.util.Map;

public interface ProductInfoService {
    //查询商品总数
    public Integer count(Map<String, Object> params);
    //分页显示商品
    List<ProductInfo> findProductInfo(ProductInfo productInfo, Pager pager);
}


package com.ssm.service.impl;

import com.ssm.dao.ProductInfoDao;
import com.ssm.pojo.Pager;
import com.ssm.pojo.ProductInfo;
import com.ssm.service.ProductInfoService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Isolation;
import org.springframework.transaction.annotation.Propagation;
import org.springframework.transaction.annotation.Transactional;

import java.util.HashMap;
import java.util.List;
import java.util.Map;
@Service("productInfoService")
@Transactional(propagation = Propagation.REQUIRED,isolation = Isolation.DEFAULT)
public class ProductInfoServiceImpl implements ProductInfoService {

    @Autowired
    ProductInfoDao productInfoDao;

    @Override
    public Integer count(Map<String, Object> params) {
        return productInfoDao.count(params);
    }

    @Override
    public List<ProductInfo> findProductInfo(ProductInfo productInfo, Pager pager) {
        //创建对象params
        Map<String,Object> params=new HashMap<>();
        //将封装有查询条件的productInfo对象放入params
        params.put("productInfo",productInfo);
        //根据条件计算商品总数
        int recordCount=productInfoDao.count(params);
        //给pager对象设置rowCount属性值(记录总数)
        pager.setRowCount(recordCount);
        if(recordCount>0){
            //将pager对象放入params
            params.put("pager",pager);
        }
        //分页获取商品信息
        return productInfoDao.selectByPage(params);
    }
}

Dao层

package com.ssm.dao;

import com.ssm.dao.provider.ProductInfoDynaSqlProvider;
import com.ssm.pojo.ProductInfo;
import org.apache.ibatis.annotations.*;
import org.apache.ibatis.mapping.FetchType;

import java.util.List;
import java.util.Map;

public interface ProductInfoDao {
    //根据条件查询商品总数
    @SelectProvider(type = ProductInfoDynaSqlProvider.class,method = "count")
    Integer count(Map<String, Object> params);

    // 分页获取商品
    @Results({ @Result(id = true, column = "id", property = "id"), @Result(column = "code", property = "code"),
            @Result(column = "name", property = "name"), @Result(column = "brand", property = "brand"),
            @Result(column = "pic", property = "pic"), @Result(column = "num", property = "num"),
            @Result(column = "price", property = "price"), @Result(column = "intro", property = "intro"),
            @Result(column = "status", property = "status"),
            @Result(column = "tid", property = "type", one = @One(select = "com.ssm.dao.TypeDao.selectById", fetchType = FetchType.EAGER)) })
    @SelectProvider(type = ProductInfoDynaSqlProvider.class, method = "selectWithParam")
    List<ProductInfo> selectByPage(Map<String, Object> params);
}


package com.ssm.dao;

import com.ssm.pojo.Type;
import org.apache.ibatis.annotations.Select;

import java.util.List;

public interface TypeDao {

    //根据类型编号查询类型对象
    @Select("select * from type where id=#{id}")
    public Type selectById(int id);
}


package com.ssm.dao.provider;

import com.ssm.pojo.Pager;
import com.ssm.pojo.ProductInfo;
import org.apache.ibatis.jdbc.SQL;

import java.util.Map;

public class ProductInfoDynaSqlProvider {

    // 分页动态查询
    public String selectWithParam(final Map<String, Object> params) {
        String sql = new SQL() {
            {
                SELECT("*");
                FROM("product_info");
                if (params.get("productInfo") != null) {
                    ProductInfo productInfo = (ProductInfo) params.get("productInfo");
                    if (productInfo.getCode() != null && !"".equals(productInfo.getCode())) {
                        WHERE(" code = #{productInfo.code} ");
                    }
                    if (productInfo.getName() != null && !productInfo.getName().equals("")) {
                        WHERE("  name LIKE CONCAT ('%',#{productInfo.name},'%') ");
                    }
                    if (productInfo.getBrand() != null && !productInfo.getBrand().equals("")) {
                        WHERE("  brand LIKE CONCAT ('%',#{productInfo.brand},'%') ");
                    }
                    if (productInfo.getType() != null && productInfo.getType().getId() > 0) {
                        WHERE(" tid = #{productInfo.type.id} ");
                    }
                    if (productInfo.getPriceFrom() > 0) {
                        WHERE(" price > #{productInfo.priceFrom} ");
                    }
                    if (productInfo.getPriceTo() > 0) {
                        WHERE(" price <= #{productInfo.priceTo} ");
                    }
                }
            }
        }.toString();
        if (params.get("pager") != null) {
            //第一条记录的索引                     每页显示的记录数
            sql += " limit #{pager.firstLimitParam} , #{pager.perPageRows}  ";
        }
        return sql;
    }



    //根据条件动态查询订单总记录数
    public String count(final Map<String,Object> params){
        return new SQL(){
            {
                SELECT("count(*)");
                FROM("product_info");
                if(params.get("productInfo")!=null){
                    ProductInfo productInfo=(ProductInfo)params.get("productInfo");
                    if(productInfo.getCode()!=null&&!"".equals(productInfo.getCode())){
                        WHERE("code=#{productInfo.code}");
                    }
                    if(productInfo.getName()!=null&&!"".equals(productInfo.getName())){
                        WHERE("name LIKE CONCAT('%',#{productInfo.name},'%')");
                    }
                    if(productInfo.getBrand()!=null&&!"".equals(productInfo.getBrand())){
                        WHERE("brand LIKE CONCAT('%',#{productInfo.brand},'%')");
                    }
                    if(productInfo.getType()!=null&& productInfo.getType().getId()>0){
                        WHERE("tid=#{productInfo.type.id}");
                    }
                    if(productInfo.getPriceFrom()>0){
                        WHERE("price>=#{productInfo.priceFrom}");
                    }
                    if(productInfo.getPriceTo()>0){
                        WHERE("price<=#{productInfo.priceTo}");
                    }
                }
            }

        }.toString();
    }
}

实现效果

在这里插入图片描述

在这里插入图片描述

别团等shy哥发育
关注
专栏目录
bootstraptable控制分页_bootstrapTable服务器端分页
weixin_39723441的博客
01-12 447
前几天项目中使用的bootstrapTable出错，检查后才发现随着项目运行数据越来越多，一次性将所有数据返回到前台进行分页出现问题，rest请求数据有限制，超过这个限制值的数据将会抛弃，导致返回到前台的数据不完整，系统出错。为解决这个问题尝试研究了下bootstrapTable插件的server端分页功能，更深入的了解这个插件的使用。table的动态生成$('#agencyTable').boo...
Bootstrap 5 分页组件使用指南
最新发布
csbysj2020的博客
07-16 812
Bootstrap 5 的分页组件是一个简单的列表，通常用于显示一系列的链接，允许用户在不同的页面或数据集之间导航。响应式设计：分页组件可以根据屏幕大小自动调整其布局。易于定制：可以通过 CSS 变量或预定义的类来定制分页组件的外观。无障碍性：分页组件支持键盘导航和屏幕阅读器，确保所有用户都能使用。
bootstrap表格分页功能
qq_32871893的博客
08-17 1772
2、后端分页：每次向后台请求页数，也就是每次只查询当前页面加载所需要的那几条数据。1、前端分页：数据库查询所有的数据，也就是数据一次性加载出来，在前端进行分页。
BootStrapTable 分页
m0_74299308的博客
02-25 880
Bootstrap Table是一个可扩展的表格，可集成众多CSS框架，支持Bootstrap, Semantic UI, Bulma, Material Design, Foundation框架。1.使用bootstrap的时候，我们经常需要使用到表格，这时候通常又会设及到一些增删改查等功能，通常是以按钮的形式嵌入表格中，在column参数中，增加一列，title是操作里面定义了events:触发时的事件函数，formatter:添加按钮的函数。这里我们将编辑和删除功能以按钮的形式嵌入表格。
bootstrap table 服务端分页
Noodles小飞
05-08 1931
bootstrap table分页功能分为前端分页和服务端分页两种，前端分页是一次性把数据全部查询到前端，再在前端页面进行分页，当数据量较少时可以使用前端分页，但当数据量较大时，前端分页就不太适用了，一次性查询大量数据耗费大量时间，有时会造成系统崩溃。这时，可以使用服务端分页。服务端分页的原理是根据设置的每页显示数据条数，每次只从数据库中查出这么多数据，这样可以大大减少查询时长，快速响应前端需求。 使用bootstrap table需要引入一些css和js文件，这里不再赘述。 一、前端代码 1.设置表格 &
Bootsrap Table 分页
冰淇淋真好吃
08-12 1392
一、需要准备的文件 如果想使用bootstrap必须要引入bootstrap的相关文件，bootstrap的js与css文件与普通的js和css文件引入到页面的方式一样，在本例中用到的文件有以下几个：注：jQuery文件必须在bootstrap文件引入之前引入。 二、在bootstrap table中有两种分页的方式，一种是客户端（client）分页，一种是服务端（server）分页，以下分别介
bootstrap-table分页功能
qq_37741863的博客
09-25 3267
引入bootstrap-table-scroll.min.js和bootstrap.min.js 这里记录的是bootstrat-table的后端分页功能，前端分页功能没用过，个人感觉不太实用 后端返回参数的json格式有要求，如下图： 1.必须要返回total–总共的记录的条数 2.list—每一条的内容 其他字段可以根据需求返回 前端的代码: var table=$("#table"); ...
手把手教你springboot整合bootstrap-table、pagehelper实现表格生成、页面美化、客户端和服务端分页
04-24
内容：手把手教你springboot整合bootstrap-table、pagehelper实现表格生成、页面美化、客户端和服务端分页（实战项目），博客原文讲解：https://blog.csdn.net/weixin_50369395/article/details/124334085
bootstrap-table配合laravel 实现服务端分页效果
qq_28482479的博客
03-12 483
bootstrap-table有客户端分页和服务端分页两种方式，本文记录服务端分页方式，请求为GET方式，与post方式略有差别。 初始化bootstrap-bable $('#bootstrap-table').bootstrapTable({ url: '{{url('admin/house/list')}}', pagination: "true",//开启分页 pageSize
bootstrap-table插件实现ajax服务端分页显示
热门推荐
never never land
03-24 1万+
利用bootstrap-table插件实现ajax服务端分页 1、引入bootstrap-table插件核心js、css以及中文语言文件 网上提供的在线cdn，如果加载时间过长，请下载插件到项目引入                                       2、初始化bootstrap-table插件 1.在html页面table中
SSM+PageHelper+Bootstrap-table服务端分页
02-24
SSM+PageHelper+Bootstrap-table服务端分页是一种常见的Web开发技术组合，用于构建高效、易维护的数据展示页面。在本项目中，Struts2、Spring和Mybatis作为后端框架，共同负责业务逻辑处理和数据访问，而PageHelper...
Bootstrap table 服务器端分页功能实现方法示例
10-15
主要介绍了Bootstrap table 服务器端分页功能实现方法,结合实例形式详细分析了Bootstrap table 服务器端后台交互与分页功能相关操作技巧,需要的朋友可以参考下
bootstrap-table,前端分页框架
11-19
bootstrap-table是基于 bootstrap与query的分页框架，支持前端分页与后端分页，支持前端数据导出(word、excel、sql、json、pdf等)
bootstrap-table表格插件
azyslwj的博客
12-08 363
bootstrap-table表格插件 Document </table> </div> <!-- 1.bootstrap-table表格插件 纯js格式化写法 --> <script> //初始化bootst...
使用Bootstrap-Table实现分页
w1824575989的博客
11-27 3307
使用Bootstrap-Table分页 <link href="~/Content/bootstrap-table.min.css" rel="stylesheet" /> <script src="~/Scripts/bootstrap-table.min.js"></script> <script src="~/Scripts/bootstrap-table-zh-CN.min.js"></script> ...
使用bootstraptable实现分页
勇敢的兵
09-22 4011
文章目录Bootstrap-table介绍效果图如下：js代码如下：html代码如下：java代码如下：html完整代码：js完整代码：参考资料： Bootstrap-table介绍 在业务系统开发中，对表格记录的查询、分页、排序等处理是非常常见的，在Web开发中，可以采用很多功能强大的插件来满足要求，且能极大的提高开发效率。Bootstrap-table插件提供了非常丰富的属性设置，可以实现查询...
bootstrap table分页（前后端两种方式实现）
acxx2010的博客
03-18 673
bootstrap table分页的两种方式： 前端分页：一次性从数据库查询所有的数据，在前端进行分页（数据量小的时候或者逻辑处理不复杂的话可以使用前端分页） 服务器分页：每次只查询当前页面加载所需要的那几条数据 bootstrap 下载地址：bootstrap下载 bootstrap-table 下载地址：bootstrap-table下载 jquery下载地址：jqu...
bootstrap table 服务端分页
weixin_30835649的博客
08-31 148
前端js $(function () { //$('#MDTable').bootstrapTable('destroy'); $("#MDTable").bootstrapTable({ //'destroy' 是必须要加的==作用是加载服务器数据，初始化表格的内容Destroy the bootstrap table. ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

别团等shy哥发育

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值