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>





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




        

	      

	    

	  

	  

	    
      
        【推广】
        免费学中医，健康全家人
      
	  

    

    

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