SpringMVC框架和Bootstrap-table表格插件使用

前端：jsp

后端：IDEA

数据库：MySQL

---

记录下学到的一种方式

导入依赖:

 <dependency>
      <groupId>com.github.pagehelper</groupId>
      <artifactId>pagehelper</artifactId>
      <version>5.1.1</version>
    </dependency>

spring的applicationContext.xml中需要配置分页插件。

 <bean id="sqlSessionFactoryBean" class="org.mybatis.spring.SqlSessionFactoryBean">
        <property name="plugins">
            <array>
                <bean class="com.github.pagehelper.PageInterceptor">
                    <property name="properties">
                        <value>
                            reasonable=true
                        </value>
                    </property>
                </bean>
            </array>
        </property>
</bean>

后端代码：

        由于spring框架中提供一种直接可以将查询出的所有数据，经过一串代码后，直接设置成类似于limit查询的数据。

        所以较为简单的方式是，创建一个实体类，存储要传与前端Bootstrap-table相匹配的各个参数。

entity层：映射数据库的实体类。下面为对应分页各个参数的Page实体类

    //当前页	 
	private Integer pageNo;
	//每页展示多少条数据(页容量)
	private Integer pageSize;
	// 总页数
	private Integer pageCount;
	//总记录数
	private Long count;
	//是否有上一页
	private Boolean hasPre;
	//是否有下一页
	private Boolean hasNext;
	//当前页数据
	private Object data;

    set和get方法……
    tostring方法……
    有参构造方法……
    无参构造方法……

service层：调用mapper层中的对象接口，实现具体方法

        将查询出的分页数据"listEmployee"放入PageInfo对象中。由于PageInfo中封装了各种对象、属性方法，可以将查询的数据剖析成各个分页需要的对象和数据；之后将各个对象数据按照分页实体类进行匹配存储，具体代码如下：

@Transactional
@Service
public class EmployeeServiceImpl implements EmployeeService {
    @Resource
    private EmployeeMapper employeeMapper;//操作数据库的接口

    @Transactional
    @Override
    public Page getPageEmployee(Integer pageNo, Integer pageSize) {

        Page page = new Page();
        PageHelper.startPage(pageNo, pageSize);
        List<Employee> listEmployee = employeeMapper.getListEmployee();
        PageInfo<Employee> info = new PageInfo<>(listEmployee);

        page.setPageNo(info.getPageNum());//当前页
        page.setPageSize(info.getPageSize());//页容量
        page.setPageCount(info.getPages());//总页数
        page.setCount(info.getTotal());//总记录数
        page.setData(info.getList());//当前页
        page.setHasPre(info.isHasPreviousPage());//是否有上一页
        page.setHasNext(info.isHasNextPage());//是否有下一页
        return page;
      }
}

Controller控制层：图层页面跳转方法

@RequestMapping(value = "/employee")
@Controller
public class EmployeeController {
    @Resource
    private EmployeeService employeeService;

    //获取员工分页的方法
    @ResponseBody
    @RequestMapping(value = "/getEmployeePage")
    public Page getEmployeePage(Integer pageNumber, Integer pageSize) {
        return employeeService.getPageEmployee(pageNumber, pageSize);
    }
}

前端：

默认需要导入bootstrap-table.min.js、bootstrap-table.min.css

上述导入后，显示文字默认是英文，所以还需要中文包：bootstrap-table-zh-CN.min.js

三个文件版本保持一致

<link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.21.4/dist/bootstrap-table.min.css">
<script src="https://unpkg.com/bootstrap-table@1.21.4/dist/bootstrap-table.min.js"></script>
<!-- 中文数据包 -->
<script src="https://unpkg.com/bootstrap-table@1.21.4/dist/locale/bootstrap-table-zh-CN.min.js"></script>

代码如下：

    /*获取table标签的js对象*/
    var table = $("table");
    table.bootstrapTable({
        /*设置请求地址*/
        url: "getEmployeePage",
        /*开启bootstarp-table的分页功能*/
        pagination: true,
        /*  开启服务器分页  */
        sidePagination: "server",
        /* 设置分页参数 */
        queryParamsType: "",
        /* 修改上一页和下一页图标 */
        paginationPreText: "上一页",
        paginationNextText: "下一页",
        /* 每页显示多少条数  */
        pageSize: 5,
        /* 页容量下拉选择框 */
        pageList: [5, 10, 15, 20],
        /* 到第一页或者最后一页是否跳转 */
        paginationLoop: false,
        /* 配置表格生成的列 */
        columns: [           
            {
                title: "员工ID",
                field: "empId"
            },
            {
                title: "性别",
                field: "empName"
            },   
            ……   
            {
                title: "操作",
                formatter: function (value, row, index, field) {
                    var s = "<a onclick='if(confirm(\"确认是否删除\")){return true;}else{return false;}' href='EmployeeDeleteServlet?empId=" + row.empId + "' class='btn btn-danger btn-sm' style='margin-right:10px;'>删除</a>";
                    s += "<a href='EmployeeToUpdateServlet?empId=" + row.empId + "' class='btn btn-warning btn-sm'>更新</a>";
                    return s;
                }
            }
        ],
        /* 处理响应结果 */
        responseHandler: function (resp) {
            return {
                total: resp.count,
                rows: resp.data
            };
        }
    });

简单操作，只要不修改page分页的实体类中各个对象名 和 前端分页代码的结构，就能保证一个简单的分页的实现。

----------个人学习笔记----------