Bootstrap Table API 中文版说明文档

https://blog.csdn.net/yapengliu/article/details/80191699

前端页面 thymeleaf：

使用bootstrap-table 显示数据非常方便，而且自带分页。以下是demo。

<!DOCTYPE html>
<html lang="en" xmlns:th=http://www.thymeleaf.org>
<head>
    <meta charset="UTF-8"><meta>
    <title>Title</title>
    <link  th:href="@{/css/bootstrap-table.min.css}" rel="stylesheet" href="../static/css/bootstrap-table.css" type="text/css" ></link>
    <link  th:href="@{/bootstrap-4.4.1-dist/css/bootstrap.min.css}" rel="stylesheet" href="../static/bootstrap-4.4.1-dist/css/bootstrap.min.css" type="text/css" ></link>
    <link  th:href="@{/css/jquery-confirm.min.css}" rel="stylesheet" type="text/css" ></link>

</head>
<body style="margin: 0 20px;">
<h2>前端分页</h2>
<button class='btn btn-success' onclick='add()'>创建</button>
<table id="mytable"></table>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" >
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">提示</h4>
            </div>
            <div class="modal-body">删除成功</div>
            <div class="modal-footer">
                <!--<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>-->
                <button type="button" class="btn btn-primary">确定</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
</body>
    <script type="text/javascript"    th:src="@{/js/jquery-3.4.1.min.js}"  src="../static/js/jquery-3.4.1.min.js"></script>
    <!--<script th:src="@{/bootstrap-4.4.1-dist/js/bootstrap.bundle.min.js}"></script>-->

    <script  th:src="@{/js/popper.min.js}"></script>
    <script type="text/javascript" th:src="@{/bootstrap-4.4.1-dist/js/bootstrap.min.js?ver=s5s}"  src="../static/bootstrap-4.4.1-dist/js/bootstrap.min.js"></script>
    <!--模态框插件-->
    <script  th:src="@{/js/jquery-confirm.min.js}"></script>
    <script th:src="@{/js/bootstrap-table.js}"></script>
    <script th:src="@{/js/bootstrap-table-zh-CN.js}"></script>
<script>
var baseUrl = "";
    $(function () {
        var pathName = window.location.pathname.substring(1);
        console.log(pathName);
        var webName = pathName == '' ? '' : pathName.substring(0, pathName.indexOf('/'));
        baseUrl = window.location.protocol + '//' + window.location.host+'/' + webName;
        console.log(baseUrl);
        var dataResponse;
        var pageNum = "";
        var pageSize = "";
        $("#mytable").bootstrapTable({
            url:baseUrl+"//news/getNewsPage",  //请求地址
            toolbar: '#toolbar',
            //queryParams：值是一个函数，函数参数params包括：search: sort: order: offset（处理过的，第一页offset为0）: limit:
            queryParams: function(params){
                    console.log(params);
                    pageNum = params.offset;
                    pageSize = params.limit;
                    return{
                        "pageNum":pageNum,
                        "pageSize":pageSize,
                    }
                },
            striped : true, //是否显示行间隔色
            pagination : true,//是否分页
            pageNumber:  1,//默认第1页，用于设置初始的页数
            sidePagination : 'server',//server:服务器端分页|client：前端分页
            pageSize : 10,//默认每页显示10条记录
            pageList : [ 1,5, 10,20],//可选择单页记录数
            showRefresh : true,//刷新按钮
            search : false,//是否启用搜索功能。
            showHeader : false,//默认为true显示表头，设为false隐藏
            locale:'zh-CN',//语言
            //导出功能设置（关键代码）
            exportDataType:'all',//'basic':当前页的数据, 'all':全部的数据, 'selected':选中的数据
            showExport: true,  //是否显示导出按钮
            buttonsAlign:"right",  //按钮位置
            exportTypes:['excel'],  //导出文件类型，[ 'csv', 'txt', 'sql', 'doc', 'excel', 'xlsx', 'pdf'],
            //columns 本质就是显示这个，测试显示可以写死
            columns : [ {
                title : 'id',
                field : 'id',
                sortable : true,
                visible : false //默认为true显示该列，设为false则隐藏该列。
            }, {
                title : '新闻标题',
                field : 'title',
                sortable : true,
            }, {
                title : '操作',
                field : 'id',
                sortable : true,
                formatter: operationTable
            }],
            responseHandler: function (res) {
            //后端返回的非total、rows数据,转换为对应的total和rows前段可处理数据并返回
                console.log("responseHandler");
                console.log(res);
                return{
                    "total":res.page.total,
                    "rows":res.page.rows
                }
            },
            /*data:dataResponse,//加载json格式的数据。
            onLoadSuccess: function (data) { //加载成功时执行,data只包含rows和total。
                console.log("onLoadSuccess");
                console.log(data);
                dataResponse = data.rows;
            },*/
            onPageChange: function (pageNumber,size) {
                pageNum = pageNumber;
                pageSize = size;
            },
            onLoadError: function (res) { //加载失败时执行
                //console.log(res);
            }
        })
    })

    /**
     * 操作列
     * @param value 代表当前单元格中的值,即field属性对应的值
     * @param row 当前行
     * @param index 代表当前行的下标,
     * @returns {string} 返回渲染数据
     */
    function operationTable(value, row, index) {
        return "<button class='btn btn-warning' update_uri= onclick='toUpdate(" + JSON.stringify(row) + ")'> 修改</button>" +
            "&nbsp;&nbsp;" +
            "<button class='btn btn-danger' id='deleBtn' del_uri='/news/toEditNewsDetails/'"+row.id+" onclick='modalDelete(" + JSON.stringify(row) + ")'> 删除</button>";
    }
    function toUpdate(val){
        var row = JSON.stringify(val);
        console.log(val);
        window.location.href = baseUrl+"/news/toEditNewsDetails?id="+val.id;
    }
    function modalDelete(val){
        $.confirm({
            title: "提示",//默认值'Hello'
            content: "确定要删除吗？",
            //keyboardEnabled: true,//设置快捷键
            //enterKeys: 'confirm', // ENTER key
            buttons: {
                确定: function(){
                       dele(val);
                },
                取消: function(){
                        console.log('取消了删除');
                }
            }
        });
    }
    function dele(val){
        $.ajax({
         url: baseUrl+"/news/deleteNews",
         type: "post",
         async:true,
         data: {
         'id':val.id,
         },
        // 预期服务器返回的数据类型
         dataType: "json",
         success: function(data){
        if(data.status="succ"){
            $(".modal-body").text("删除成功！");
            $.alert({
                title: '提示',
                content: '删除成功！',
                closeIcon: true,//右上角关闭小叉
                autoClose: '关闭|500',
                buttons: {
                    关闭: function () {
                        console.log('自动关闭');
                    }
                }
            });
         $('#mytable').bootstrapTable('refresh',{});//局部刷新
        }else{
            $.alert('删除失败!'+data.msg);
        }
        }
      });
    }

    function add(){
        $('#myModal').modal('show');
        console.log("add");
        //window.location.href = baseUrl+"/news/toEditNewsDetails";
    }
</script>
</html>

后台Java方法

   /**
     * 后端分页，效率高
     * @param pageNum
     * @param pageSize
     * @return
     */
    @RequestMapping("/getNewsPage")
    @ResponseBody
    public Map<String,Object> getNewsPage(String pageNum, String pageSize){
        Map<String,Object> res = new HashMap<>();
        try {
            int pageNumInt = Integer.parseInt(!StringUtils.isEmpty(pageNum) ? pageNum : "0");
            int pageSizeInt = Integer.parseInt(!StringUtils.isEmpty(pageSize) ? pageSize : "1");
            List<News> newsList = newsMapper.selectPage(pageNumInt, pageSizeInt);
            int total = newsMapper.selectPageCount();
            PageUtils pageUtils = new PageUtils();
            pageUtils.setTotal(total);
            pageUtils.setRows(newsList);
            res.put("status","succ");
            res.put("page",pageUtils);
            return res;
        } catch (Exception e) {
            res.put("status","error");
            res.put("msg",e.getMessage());
            return res;
        }
    }

bootstrapTable 插件使用

Bootstrap Table API 中文版说明文档

猜你喜欢

bootstrapTable 插件使用

Bootstrap Table API 中文版 说明文档

猜你喜欢

Bootstrap Table API 中文版说明文档