zoukankan html css js c++ java

bootstrapTable 插件使用

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;">

<button class='btn btn-success' onclick='add()'>创建</button>
<table id="mytable"></table>

</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}" ></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+1,
                        "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: {
                cancelButtonClass:     'btn-default',
                确定: {
                    btnClass: 'btn-blue',
                    action:function(){
                        dele(val);
                    }},
                取消: function(){
                        console.log('取消了删除');
                }
            }
        });
    }
    function dele(val){
        $.ajax({
         url: baseUrl+"/news",
         type: "delete",
         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(){

        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;
        }
    }

<!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;">

<button class='btn btn-success' onclick='add()'>创建</button>
<table id="mytable"></table>

</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}" ></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: {
                cancelButtonClass:     'btn-default',
确定: {
                    btnClass: 'btn-blue',
action:function(){
                        dele(val);
}},
取消: function(){
                        console.log('取消了删除');
}
            }
        });
}
    function dele(val){
        $.ajax({
         url: baseUrl+"/news",
type: "delete",
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(){

        console.log("add");
window.location.href = baseUrl+"/news/toEditNewsDetails";
}
</script>
</html>

源码，是痛苦的，又是快乐的，如果没有这痛苦，也就没有了这快乐！

查看全文

相关阅读:
[DB] 数据库的连接
 JS leetcode 翻转字符串里的单词题解分析
 JS leetcode 拥有最多糖果的孩子题解分析，六一快乐。
JS leetcode 搜索插入位置题解分析
 JS leetcode 杨辉三角Ⅱ 题解分析
 JS leetcode 寻找数组的中心索引题解分析
 JS leetcode 移除元素题解分析
 JS leetcode 最大连续1的个数题解分析
 JS leetcode 两数之和 II
JS leetcode 反转字符串题解分析

原文地址：https://www.cnblogs.com/erlongxizhu-03/p/12193258.html

bootstrapTable 插件使用

Bootstrap Table API 中文版 说明文档

Bootstrap Table API 中文版说明文档