使用bootstrap Table

落日映苍穹つ 2022-03-26 13:06 845阅读 0赞

bootstrap Table是一个基于ajax异步获取数据的插件 可以实现查询分页等多种功能  
本文博主将从零开始，一步一步的告诉大家如何在前端用bootstrap Table插件

官方下载地址：[https://bootstrap-table.wenzhixin.net.cn/docs/getting-started/download/][https_bootstrap-table.wenzhixin.net.cn_docs_getting-started_download]  
首先在jsp页面添加对插件的引用

<link href="bootstrap-table/css/bootstrap-table.min.css"
    	rel="stylesheet">
    
    <script src="bootstrap-table/js/jquery.min.js"></script>
    <script src="bootstrap-table/js/bootstrap-table.min.js"></script>
    
    <script src="bootstrap-table/js/bootstrap-table-zh-CN.min.js"></script>

然后再jsp页面添加表格要显示的位置以及查询条件

然后编写js

前端页面编写完毕，下面编写后台java传递数据的格式  
首先运用表格分页工具类 对传递的数据进行封装

/**
     * 表格分页工具类
     * @author Administrator
     *
     */
    public class PageTable {
    	
    	private Integer currentPage;//当前页
        private int limit;//每页显示记录条数
        private int totalPage;//总页数
        private List<?> dataList;//每页显示的数据
        private int offset;//开始数据
    
        public Integer getCurrentPage() {
            return currentPage;
        }
        public void setCurrentPage(Integer currentPage) {
            this.currentPage = currentPage;
        }
     
        public int getTotalPage() {
            return totalPage;
        }
        public void setTotalPage(int totalPage) {
            this.totalPage = totalPage;
        }
        public List<?> getDataList() {
            return dataList;
        }
        public void setDataList(List<?> dataList) {
            this.dataList = dataList;
        }
    	public int getLimit() {
    		return limit;
    	}
    	public void setLimit(int limit) {
    		this.limit = limit;
    	}
    	public int getOffset() {
    		return offset;
    	}
    	public void setOffset(int offset) {
    		this.offset = offset;
    	}
    }

然后再controller类 编写接口对应表格请求的地址

package com.gm.controller;
    
    import java.io.IOException;
    import java.io.PrintWriter;
    import java.util.ArrayList;
    import java.util.HashMap;
    import java.util.List;
    import java.util.Map;
    
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    
    import org.springframework.stereotype.Controller;
    import org.springframework.web.bind.annotation.RequestMapping;
    
    import com.gm.util.PageTable;
    import com.google.gson.Gson;
    
    /**
     * bootstrap table表格
     * 
     * @author Administrator
     *
     */
    @Controller
    public class TestController {
    
    	@RequestMapping("url")
    	public void test(HttpServletRequest request, HttpServletResponse response) throws IOException {
    		// 设置从request中取得的值或从数据库中取出的值的编码格式
    		request.setCharacterEncoding("UTF-8");
    		// 设置从response中取得的值或从数据库中取出的值的编码格式
    		response.setContentType("text/html;charset=utf-8");
    
    		// 获取bootstrap table 的rows参数
    		String limit = request.getParameter("rows");
    		// 获取bootstrap table 的page参数
    		String pageSize = request.getParameter("page");
    
    		// 获取查询条件的name
    		String name = request.getParameter("name");
    
    		// sql语句从数据库查询数据
    		List list = new ArrayList<>();// 从数据库获取的数据 存放到list中
    		PageTable page = new PageTable();
    		// 设置第几页
    		page.setCurrentPage(Integer.parseInt(pageSize));
    		// 刚开始的页面为第一页
    		if (page.getCurrentPage() == null) {
    			page.setCurrentPage(1);
    		} else {
    			page.setCurrentPage(page.getCurrentPage());
    		}
    		// 设置每页数据为十条
    		page.setLimit(Integer.parseInt(limit));
    		// 每页的开始数
    		page.setOffset((page.getCurrentPage() - 1) * page.getLimit());
    		// list的大小
    		int count = list.size();
    		// 设置总页数
    		page.setTotalPage(count % 10 == 0 ? count / 10 : count / 10 + 1);
    		// 对list进行截取
    		page.setDataList(list.subList(page.getOffset(),
    				count - page.getOffset() > page.getLimit() ? page.getOffset() + page.getLimit() : count));
    		list = (List) page.getDataList();
    
    		Map<String, Object> map = new HashMap<>();
    		if (list != null) {
    			map.put("total", count);
    			map.put("rows", list);
    		}
    		Gson gson = new Gson();
    		String json = gson.toJson(map);
    		PrintWriter out = null;
    		out = response.getWriter();
    		out.print(json);
    		out.close();
    	}
    }

好了代码编写完成!吃饭了。

[https_bootstrap-table.wenzhixin.net.cn_docs_getting-started_download]: https://bootstrap-table.wenzhixin.net.cn/docs/getting-started/download/