bootstraptable实现前端分页和后端分页简单使用。

最新推荐文章于 2024-07-17 20:57:53 发布

源码plus

最新推荐文章于 2024-07-17 20:57:53 发布

阅读量787

点赞数 1

文章标签： html css jquery

本文链接：https://blog.csdn.net/qq_38310446/article/details/105073009

版权

添加头文件

<link href="//cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<meta name="viewport" content="width=device-width,initial-scale=1" />
<script src="//cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>


<link rel="stylesheet"href="https://unpkg.com/bootstrap-table@1.15.3/dist/bootstrap-table.min.css">
<script src="https://unpkg.com/bootstrap-table@1.15.3/dist/bootstrap-table.min.js"></script>
<script src="https://unpkg.com/bootstrap-table@1.15.3/dist/locale/bootstrap-table-zh-CN.js"></script>

    /**
     * bootstrap前端分页
     * @return
     */
    @RequestMapping(value = "/bootTableClientGetAll")
    @ResponseBody
    public  List<Map<String, Object>> bootTableGetAll(){
        List<Map<String, Object>> all = cityDao.getAll();
        return all;
    }

// url: '/bootTableClientGetAll',
// sidePagination: 'client',

  /**
     * bootstrap后端分页
     */
    @RequestMapping(value = "/bootstrapServerGetAll")
    @ResponseBody
    public    Map<String,Object> bootstrapServerGetAll(HttpServletRequest request){
        System.out.println("-------------------------------");
        Map<String, String[]> parameterMap = request.getParameterMap();
        Map<String,Object>paramterNewMap=new HashMap<>();
        for (Map.Entry<String, String[]> entry : parameterMap.entrySet()) {
            System.out.println(entry.getKey() + "-------------" + entry.getValue()[0]);
            paramterNewMap.put(entry.getKey(),entry.getValue()[0]);
        }
        Integer pageNum=Integer.parseInt(request.getParameter("pageNum"));
        Integer pageSize=Integer.parseInt(request.getParameter("pageSize"));
        PageHelper.startPage(pageNum,pageSize);
//        List<Map<String, Object>> all = cityDao.getAll();
        List<Map<String, Object>> all = cityDao.getAll();
        PageInfo info=new PageInfo(all);
        Map<String,Object>resultMap=new HashMap<>();
        resultMap.put("total",info.getTotal());
        resultMap.put("data",info.getList());
        return resultMap;
    }

url: '/bootstrapServerGetAll',//后端分页的路径
sidePagination: 'server',//可选server,或者client

简单的业务逻辑可以直接前端分页，那个查询特别好，各个字段模糊查询连接一起了。有兴趣可以研究。

全部代码：

<%--
  Created by IntelliJ IDEA.
  User: lhl
  Date: 2020/3/17
  Time: 9:16
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<html>
<head>
    <title>Title</title>
    <link href="//cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <script src="//cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
    <script src="//cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>


    <link rel="stylesheet"href="https://unpkg.com/bootstrap-table@1.15.3/dist/bootstrap-table.min.css">
    <script src="https://unpkg.com/bootstrap-table@1.15.3/dist/bootstrap-table.min.js"></script>
    <script src="https://unpkg.com/bootstrap-table@1.15.3/dist/locale/bootstrap-table-zh-CN.js"></script>


</head>
<body>
<div class="panel panel-default">
    <div class="panel-body table-responsive">
        <table class="table table-striped table-bordered table-hover" id="tableL01">

        </table>
    </div>
</div>
<script>
    $(function () {
        var tableColumns =[
            {field : 'id', title:'编号', align: 'center', index: 'id', classes: 'myId', sortable: true},
            {field: 'name', title:'名称',align: 'center',sortable: false, index: 'name'},
            {field: 'countryCode',title:'国家代码', align: 'center',sortable: false, index: 'countryCode'},
            {field: 'district', title:'区域', align: 'center', sortable: false,index: 'district'},
            {field: 'population',title:'人口',  align: 'center',sortable: false, index: 'population'},
            {field: 'status', title:'状态', index: 'status',sortable: false, align: 'center'},
            {field: 'sex', title:'性别', index: 'sex', align: 'center', sortable: false},
            {field: 'birthday', title:'生日', index: 'birthday', sortable: false, align: 'center'},
            {field: 'createTime',title:'创建时间',  index: 'createTime', sortable: false, width: 200, align: 'center'},
            {field: 'operate',title:'操作', align:'center',sortable: false,
                formatter: function (value, row, index) {
                    return [
                        '<a class="edit ml10" href="javascript:void(0)" onclick="editBut('+row.id+')" 0-toggle="tooltip" title="Edit"><i class="glyphicon glyphicon-edit"></i></a>　',
                        '<a class="remove ml10" href="javascript:void(0)" onclick="delBut('+row.id+')" data-toggle="tooltip" title="Remove"><i class="glyphicon glyphicon-remove"></i></a>'
                    ].join('');
                }
            }];
        // $('#tableL01').bootstrapTable('destroy');   //动态加载表格之前，先销毁表格
        $('#tableL01').bootstrapTable({//表格初始化
            columns: tableColumns,  //表头
            // url: '/bootTableClientGetAll',
            // sidePagination: 'client',
            url: '/bootstrapServerGetAll',//后端分页的路径
            sidePagination: 'server',//可选server,或者client
            contentType: "application/json",
            width:300,
            height:550,
            method: 'get',
            pageSize: 10,
            pageNumber: 1,
            pageList: [],
            cache: false,
            striped: true,
            pagination: true,
            columns:tableColumns,
            responseHandler: function (result) {//定义后台分页返回数据
                //如果后台返回的json格式不是{rows:[{...},{...}],total:100},可以在这块处理成这样的格式
                return {
                    total : result.total, //总页数,前面的key必须为"total"
                    rows : result.data //行数据，前面的key要与之前设置的dataField的值一致.
                };
            },//请求数据成功后，渲染表格前
// queryParamsType: '', //默认值为 'limit' ,在默认情况下 传给服务端的参数为：offset,limit,sort。设置为 ''  在这种情况下传给服务器的参数为：pageSize,pageNumber
            queryParams: function (params) {
                console.log(params);
                return {
                    pageIndex: params.offset / params.limit + 1,//当前页面,默认是上面设置的1(pageNumber)
                    pageSize: params.limit //每一页的数据行数，默认是上面设置的10(pageSize)
                    // param : "Your Param" //这里是其他的参数，根据自己的需求定义，可以是多个
                }
            },//请求服务器时所传的参数
            showRefresh: true,//刷新按钮
            search: true,
            showExport: true,
            showFooter: false,
            exportTypes: ['csv', 'txt', 'xml'],
            clickToSelect: true,
        });

        /**
         * 编辑弹窗
         * @param id
         */
        editBut=function (id) {
            alert("编辑"+id);
        };

        /**
         * 删除弹窗
         * @param id
         */
        delBut=function(id) {
            alert("删除"+id);
        }

    });
</script>
</body>
</html>