bootstrap-table真香系列-数据渲染与导出

最新推荐文章于 2023-06-14 15:50:09 发布
最新推荐文章于 2023-06-14 15:50:09 发布
阅读量4.2k 收藏 23
点赞数 1
分类专栏： 【前端笔记】 文章标签： bootstrap table bootstrap 导出excel
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/linmengmeng_1314/article/details/109716764
版权

bootstrap-table：

1. 数据渲染与分页

第一次使用bootstrap-table，感觉就是简洁，真的简洁，接口返回json数据，前端引入对应的js，然后js处理下json数据，页面就自动分页了，根本不用再写额外的分页代码了。
数据格式只要是标准的api接口，然后后面就是前端js处理的事了。

    <!-- bootstrap && table -->
    <link href="${ctx!}/common/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="${ctx!}/common/plugins/bootstrap-table/bootstrap-table.css" rel="stylesheet" >
    <script src="${ctx!}/common/plugins/jquery-3.5.1/jquery-3.5.1.min.js"></script>
    <!-- JS定位引擎 点击页面的翻页和下拉框  高版本的bootstrap需要用到 -->
    <script src="${ctx!}/common/plugins/popper/popper-1.14.7.js"></script>
    
    <!-- from表单转为json -->
    <script src="${ctx!}/common/plugins/jquery-serializejson/jquery.serializejson.js"></script>
	<!-- Bootstrap table tableExport  new -->
	<script src="${ctx!}/common/plugins/bootstrap/js/bootstrap.min.js"></script>
	<script src="${ctx!}/common/plugins/bootstrap-table/bootstrap-table.min.js"></script>
	<script src="${ctx!}/common/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>

页面直接定义一个div，声明一下table的Id

<div class="row row-lg">
	<div class="col-sm-12">
       <!-- Example Card View -->
       <div class="example-wrap">
           <div class="example">
           	<table id="table_list"></table>
           </div>
       </div>
       <!-- End Example Card View -->
	</div>
</div>

   <script>
        $(document).ready(function () {
        	//初始化表格,动态从服务器加载数据  
			$("#table_list").bootstrapTable({
			    //使用get请求到服务器获取数据  
			    method: "POST",
			    //必须设置，不然request.getParameter获取不到请求参数
			    contentType: "application/x-www-form-urlencoded",
			    //获取数据的Servlet地址  
			    url: "${ctx!}/admin/user/queryUserList",
			    //表格显示条纹  
			    striped: true,
			    //启动分页  
			    pagination: true,
				sortable: true,      //是否启用排序
				sortOrder: "asc",     //排序方式
				showColumns: true,                  //是否显示所有的列
			    //每页显示的记录数  
			    pageSize1: 10,
			    //当前第几页  
			    pageNumber1: 1,
			    //记录数可选列表  
			    pageList: [2, 5, 10, 15, 20, 25],
			    //是否启用查询  
			    //search: true,
			    //是否启用详细信息视图  与detailFormatter 结合使用，detailFormatter为显示的具体字段名称
			    //detailView:true,
			    //detailFormatter:detailFormatter,
			    //表示服务端请求  
			    sidePagination: "server",
			    //设置为undefined可以获取pageNumber，pageSize，searchText，sortName，sortOrder  
			    //设置为limit可以获取limit, offset, search, sort, order  
			    queryParamsType: "undefined",
			    //得到查询的参数
				queryParams : function (params) {
					//console.log(params);
					var temp = $("#query_form").serializeJSON();
					//console.log(temp);
					temp["sortName"]= params.sortName,
					temp["sortOrder"]= params.sortOrder,
					temp["page"]= params.pageNumber,
					temp["rows"]= params.pageSize;
					console.log(temp);
					return temp;
				},
			    //json数据解析
			    responseHandler: function(data) {
			    	if(data.code == 200){
			    		return {
				            "rows": data.resultList,
				            "total": data.count
				        };
			    	}else{
			    		console.log("接口异常。。。。。。");
			    	}
			    },
			    //数据列
			    columns: [{
			        title: "ID",
			        field: "id",
			        sortable: true
			    },{
			        title: "用户名",
			        field: "userName"
			    } ,{
			        title: "昵称",
			        field: "nickName"
			    },{
			        title: "性别",
			        field: "sex",
			        formatter: function(value, row, index) {
                        if (value == '0') 
                        	return '<span class="label label-warning">女</span>';
                        return '<span class="label label-primary">男</span>';
                    }
			    },{
			        title: "出生日期",
			        field: "birthday",
			        formatter: function(value, row, index) {
			        	if(value){
			        		return value.substring(0, 10);
			        	}
                    	return value;
                    } 
			    },{
			        title: "电话",
			        field: "telephone"
			    },{
			        title: "邮箱",
			        field: "email"
			    },{
			        title: "状态",
			        sortable: true,
			        field: "deleteStatus",
                    formatter: function (value, row, index) {
                        if (value == '0') 
                        	return '<span class="label label-info">未删除</span>';
                        return '<span class="label label-danger">已删除</span>';
                    }
			    },{
			        title: "锁定",
			        field: "locked",
			        formatter: function (value, row, index) {
                        if (value == '0') 
                        	return '<span class="label label-info">未锁定</span>';
                        return '<span class="label label-danger">已锁定</span>';
                    }
			    },{
			        title: "创建时间",
			        field: "createTime",
			        sortable: true
			    },{
			        title: "更新时间",
			        field: "updateTime",
			        sortable: true
			    }]
			});
        });

在这里插入图片描述
分页和展示就结束了。
后面的跳转至多少页，可引入`bootstrap-table-page-jump-to.min.jscolumns

	<link href="${ctx!}/common/plugins/bootstrap-table/extensions/page-jump-to/bootstrap-table-page-jump-to.min.css" rel="stylesheet" >
    <script src="${ctx!}/common/plugins/bootstrap-table/extensions/page-jump-to/bootstrap-table-page-jump-to.min.js"></script>

然后在表格渲染时，开启页面跳转即可：showJumpTo: true, //是否显示页面跳转至多少页
在这里插入图片描述

2. boostrap-table 渲染动态页面

如果做成动态的列，大体思路为：先定义一个模板，然后显示的列可以使用后台返回，然后在responseHandler里面接收列对应的表头和属性，然后调用自定义函数，进行拼接columns即可。

这里附上一个用到的动态弹窗页面，其中弹窗页面的列和表头，查询条件，都是动态的。

这里前端页面是用的freemarker，如果前端用的HTML页面，则直接将ftl文件转为html文件即可。同时如果页面里面包含ftl标签，则需要转换下。

首先是模板文件：newSearch.ftl，

逻辑可能有点乱，大致功能描述是：父页面点击input框，弹出一个模态框，模态框的内容是一个动态列表，表格的内容和查询条件都是动态的。然后对弹窗的表格添加了双击事件，双击某一行，可以将当前行作为一个json对象传入父页面的回调函数里面，可以在父页面进行自定义操作。同时支持多选。

需要用到的文件放在github上面了，地址：https://github.com/linmengmeng-1314/collectionData/tree/main/%E5%89%8D%E7%AB%AF/dynamic_new_search
在这里插入图片描述

可以参考下newSearchResult.ftl文件中$(document).ready(function () {里面的逻辑，页面加载后，读取父页面js中定义的参数，来动态生成弹窗内容。

其中弹窗页面的js：commonSearch.js里面定义了多个参数，作为子页面和父页面交互。需要在父页面引入该js。

后端接口的话，参考Controller文件夹里面的controller类，引用的包在import文件夹下，只把业务无关的java文件贴出来了。

使用了com.github.pagehelper.PageHelper;工具包，封装查询分页功能。

		<!--分页插件 pagehelper -->
		<dependency>
		   <groupId>com.github.pagehelper</groupId>
		   <artifactId>pagehelper-spring-boot-starter</artifactId>
		   <!-- 特别注意版本问题 -->
		   <version>1.2.3</version>
		</dependency>

3. 列表数据导出

正常导出页面：
在这里插入图片描述

在使用bootstrap-table的过程中，由于用到数据导出excel的功能，刚开始用的bootstrap-table的1.11.1版本的js，结果导出图标一直不显示，就很无奈。。。。

显示导出按钮showExport就够用了，可结合showColumns，实现前端可自定义导出的列：

showColumns: true,      //是否显示所有的列
showExport: true,		//工具栏上显示导出按钮

但是呢，我用了之后，一直不显示导出图标，showColumns可以正常使用，查了半天，没找到什么原因，后来偶然意识到，会不会是js版本的问题，然后试着换个版本。

换新版本的js，建议使用配套的，不然部分js换了新版本，如果其依赖的js还是旧版本，可能会不兼容。这里我直接将整个包复制到静态资源目录下：
导出功能需要用的js
在这里插入图片描述


    <!-- bootstrap && table -->
    <link href="${ctx!}/common/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="${ctx!}/common/plugins/bootstrap-table/bootstrap-table.css" rel="stylesheet" >

    <script src="${ctx!}/common/plugins/jquery-3.5.1/jquery-3.5.1.min.js"></script>
    
    <!-- JS定位引擎 点击页面的翻页和下拉框  高版本的bootstrap需要用到 -->
    <script src="${ctx!}/common/plugins/popper/popper-1.14.7.js"></script>

	<!-- Bootstrap table tableExport  new -->
	<script src="${ctx!}/common/plugins/bootstrap/js/bootstrap.min.js"></script>
	<script src="${ctx!}/common/plugins/bootstrap-table/bootstrap-table.min.js"></script>
	<script src="${ctx!}/common/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>
	
	<script src="${ctx!}/common/plugins/tableExport/FileSaver/FileSaver.min.js"></script>
	<script src="${ctx!}/common/plugins/tableExport/js-xlsx/xlsx.core.min.js"></script>
	<script src="${ctx!}/common/plugins/tableExport/tableExport.min.js"></script>
	<script src="${ctx!}/common/plugins/bootstrap-table/extensions/export/bootstrap-table-export.min.js"></script>

导出功能可参考：https://www.freesion.com/article/870763773/

js插件下载地址：
jquery ----- https://www.jq22.com/jquery-info122
popper.js ----- https://popper.js.org/docs/v2/
-------- https://unpkg.com/@popperjs/core@2.5.4/dist/umd/popper.js
--------https://blog.csdn.net/jhzhahuaiyu/article/details/90213582
bootstrap ---- https://github.com/twbs/bootstrap
bootstrap-table ---- https://github.com/wenzhixin/bootstrap-table
tableExport ---- https://github.com/hhurz/tableExport.jquery.plugin

其中bootstrap 源码文件夹里的dist即为我们要用的
在这里插入图片描述
tableExport 源码libs文件夹下包含了导出excel，PDF等插件，这里导出excel只用fileSaver和js-xlsx即可。
在这里插入图片描述
bootstrap-table
在这里插入图片描述
引入必要的js之后，只需要在渲染表格时指定显示导出按钮：

showColumns: true,                  //是否显示所有的列
showExport: true,		//工具栏上显示导出按钮
//showToggle:true,                    //是否显示详细视图和列表视图的切换按钮
exportDataType: "basic",			//导出表格方式（默认basic：只导出当前页的表格数据；all：导出所有数据；selected：导出选中的数据）
exportTypes: ['json', 'xml', 'csv', 'txt', 'sql', 'excel'],	//导出文件类型
//exportTypes:['excel','xlsx'],	
//exportButton: $('#btn_export'),     //为按钮btn_export  绑定导出事件  自定义导出按钮(可以不用)
Icons: 'glyphicon-export icon-share',//导出图标  未显示
exportOptions:{  
    //ignoreColumn: [0,0],            //忽略某一列的索引  当显示  detailView (详细视图时可设置索引，导出时会忽略该列)
    fileName: '我是数据导出的文件名',              //文件名称设置  生效
    worksheetName: 'Sheet1',          //表格工作区名称  未生效
    tableName: '商品数据表',  //未生效
    excelstyles: ['background-color', 'color', 'font-size', 'font-weight'],  
    //onMsoNumberFormat: DoOnMsoNumberFormat  //防止js将长数字串 科学计数 未生效  DoOnMsoNumberFormat函数未执行
},

可根据需求，设置导出的数据格式。
其中DoOnMsoNumberFormat函数如下，但是没有执行，不知道是不是插件版本的原因导致的。

        function DoOnMsoNumberFormat(cell, row, col){
        	console.log("111111111111111111");
        	console.log(cell);
        	console.log(row);
        	console.log(row);
        	var result = "";
        	if(row > 0 && col == 6){
        		result = "\\@";
        	}
        	return result;
        }

导出文件内容如下：
在这里插入图片描述
看了下github里面源码的说明：https://github.com/hhurz/tableExport.jquery.plugin#options
也没看懂这个到底是怎么去除长数字串，被科学计数法了的问题。

$('table').tableExport({type:'excel',
                        mso: {fileFormat:'xmlss',
                              worksheetName: ['Table 1','Table 2', 'Table 3']}});

源码里面这里提到自定义文件表格worksheetName，加上之后，worksheetName确实可以自定义了，但是导出的文件名却变成了xml了。
在这里插入图片描述
在这里插入图片描述
github的Options里面没有提到的参数，是被遗弃了么？？？？ 反正没提到的，配置了也不报错，但是就是没效果。

完整页面：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title>welcome用户列表</title>
    <meta name="keywords" content="">
    <meta name="description" content="">


	<!-- 网页标题前添加一个小图标 -->
    <link rel="shortcut icon" href="favicon.ico"> 
    <!-- 矢量图标css -->
    <link href="${ctx!}/assets/css/font-awesome.css?v=4.4.0" rel="stylesheet">
    <!-- CSS3动画库css -->
    <link href="${ctx!}/assets/css/animate.css" rel="stylesheet">
    
    <link href="${ctx!}/assets/css/style.css?v=4.1.0" rel="stylesheet">
    
    
    <!-- bootstrap && table -->
    <link href="${ctx!}/common/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="${ctx!}/common/plugins/bootstrap-table/bootstrap-table.css" rel="stylesheet" >
</head>

<body class="gray-bg">
    <div class="wrapper wrapper-content  animated fadeInRight">
        <div class="row">
            <div class="col-sm-12">
                <div class="ibox ">
                    <div class="ibox-title">
                        <h5>用户管理</h5>
                    </div>
                    <!-- 查询参数 form... -->
					<div class="form-group" class="col-sm-12">
						<form id="query_form">
							<div class="col-sm-12">
								<label class="col-sm-1 control-label">账户名：</label>
								<input class="col-sm-1 control-label" id="userName" name="userName" type="text" value="">
								<label class="col-sm-1 control-label">昵称：</label>
								<input class="col-sm-1 control-label" id="nickName" name="nickName" type="text" value="">
								<button type="button" class="btn btn-success" onclick="search('table_list')" data-icon="search">查询</button>
							<div>
						</form>
                    </div>
                    <div class="ibox-content">
                        <p>
                        	<@shiro.hasPermission name="system:user:add">
                        		<button class="btn btn-success " type="button" onclick="add();"><i class="fa fa-plus"></i>&nbsp;添加</button>
                        	</@shiro.hasPermission>
                        </p>
                        <hr>
                        <div class="row row-lg">
		                    <div class="col-sm-12">
		                        <!-- Example Card View -->
		                        <div class="example-wrap">
		                            <div class="example">
		                            	<table id="table_list"></table>
		                            </div>
		                        </div>
		                        <!-- End Example Card View -->
		                    </div>
	                    </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 全局js -->
    <!-- <script src="${ctx!}/assets/js/jquery.min.js?v=2.1.4"></script> -->
    <script src="${ctx!}/common/plugins/jquery-3.5.1/jquery-3.5.1.min.js"></script>
    
    <!-- JS定位引擎 点击页面的翻页和下拉框  高版本的bootstrap需要用到 -->
    <script src="${ctx!}/common/plugins/popper/popper-1.14.7.js"></script>
    
    <!-- from表单转为json -->
    <script src="${ctx!}/common/plugins/jquery-serializejson/jquery.serializejson.js"></script>
	<!-- Bootstrap table tableExport  new -->
	<script src="${ctx!}/common/plugins/bootstrap/js/bootstrap.min.js"></script>
	<script src="${ctx!}/common/plugins/bootstrap-table/bootstrap-table.min.js"></script>
	<script src="${ctx!}/common/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>
	
	<script src="${ctx!}/common/plugins/tableExport/FileSaver/FileSaver.min.js"></script>
	<script src="${ctx!}/common/plugins/tableExport/js-xlsx/xlsx.core.min.js"></script>
	<script src="${ctx!}/common/plugins/tableExport/tableExport.min.js"></script>
	<script src="${ctx!}/common/plugins/bootstrap-table/extensions/export/bootstrap-table-export.min.js"></script>
	
    <!-- Peity -- jQuery简单图表peity.js -->
    <script src="${ctx!}/assets/js/plugins/peity/jquery.peity.min.js"></script>

    <script src="${ctx!}/assets/js/plugins/layer/layer.min.js"></script>

    <!-- 自定义js -->
    <script src="${ctx!}/assets/js/content.js?v=1.0.0"></script>
 	
    <!-- Page-Level Scripts -->
    <script>
        $(document).ready(function () {
        	//初始化表格,动态从服务器加载数据  
			$("#table_list").bootstrapTable({
			    //使用get请求到服务器获取数据  
			    method: "POST",
			    //必须设置，不然request.getParameter获取不到请求参数
			    contentType: "application/x-www-form-urlencoded",
			    //获取数据的Servlet地址  
			    url: "${ctx!}/admin/user/queryUserList",
			    //表格显示条纹  
			    striped: true,
			    //启动分页  
			    pagination: true,
				sortable: true,      //是否启用排序
				sortOrder: "asc",     //排序方式
				showColumns: true,                  //是否显示所有的列
				showExport: true,		//工具栏上显示导出按钮
				//showToggle:true,                    //是否显示详细视图和列表视图的切换按钮
				exportDataType: "basic",			//导出表格方式（默认basic：只导出当前页的表格数据；all：导出所有数据；selected：导出选中的数据）
				exportTypes: ['json', 'xml', 'csv', 'txt', 'sql', 'excel'],	//导出文件类型
				//exportTypes:['excel','xlsx'],	
				//exportButton: $('#btn_export'),     //为按钮btn_export  绑定导出事件  自定义导出按钮(可以不用)
				Icons: 'glyphicon-export icon-share',//导出图标  未显示
				exportOptions:{  
				    //ignoreColumn: [0,0],            //忽略某一列的索引  当显示  detailView (详细视图时可设置索引，导出时会忽略该列)
				    fileName: '我是数据导出的文件名',              //文件名称设置  
				    worksheetName: 'Sheet1',          //表格工作区名称  未生效
				    tableName: '商品数据表',  //未生效
				    excelstyles: ['background-color', 'color', 'font-size', 'font-weight'],  
				    onMsoNumberFormat: DoOnMsoNumberFormat  //防止js将长数字串 科学计数
				},
			    //每页显示的记录数  
			    pageSize1: 10,
			    //当前第几页  
			    pageNumber1: 1,
			    //记录数可选列表  
			    pageList: [2, 5, 10, 15, 20, 25],
			    //是否启用查询  
			    //search: true,
			    //是否启用详细信息视图  与detailFormatter 结合使用，detailFormatter为显示的具体字段名称
			    //detailView:true,
			    //detailFormatter:detailFormatter,
			    //表示服务端请求  
			    sidePagination: "server",
			    //设置为undefined可以获取pageNumber，pageSize，searchText，sortName，sortOrder  
			    //设置为limit可以获取limit, offset, search, sort, order  
			    queryParamsType: "undefined",
			    //得到查询的参数
				queryParams : function (params) {
					//console.log(params);
					var temp = $("#query_form").serializeJSON();
					//console.log(temp);
					temp["sortName"]= params.sortName,
					temp["sortOrder"]= params.sortOrder,
					temp["page"]= params.pageNumber,
					temp["rows"]= params.pageSize;
					console.log(temp);
					return temp;
				},
			    //json数据解析 处理服务端返回的数据
			    responseHandler: function(data) {
			    	if(data.code == 200){
			    		return {
				            "rows": data.resultList,
				            "total": data.count
				        };
			    	}else{
			    		console.log("接口异常。。。。。。");
			    	}
			    },
			    //数据列
			    columns: [{
			        title: "ID",
			        field: "id",
			        sortable: true
			    },{
			        title: "用户名",
			        field: "userName"
			    },{
			        title: "昵称",
			        field: "nickName"
			    },{
			        title: "性别",
			        field: "sex",
			        formatter: function(value, row, index) {
                        if (value == '0') 
                        	return '<span class="label label-warning">女</span>';
                        return '<span class="label label-primary">男</span>';
                    }
			    },{
			        title: "出生日期",
			        field: "birthday",
			        formatter: function(value, row, index) {
			        	if(value){
			        		return value.substring(0, 10);
			        	}
                    	return value;
                    } 
			    },{
			        title: "电话",
			        field: "telephone"
			    },{
			        title: "邮箱",
			        field: "email"
			    },{
			        title: "状态",
			        sortable: true,
			        field: "deleteStatus",
                    formatter: function (value, row, index) {
                        if (value == '0') 
                        	return '<span class="label label-info">未删除</span>';
                        return '<span class="label label-danger">已删除</span>';
                    }
			    },{
			        title: "锁定",
			        field: "locked",
			        formatter: function (value, row, index) {
                        if (value == '0') 
                        	return '<span class="label label-info">未锁定</span>';
                        return '<span class="label label-danger">已锁定</span>';
                    }
			    },{
			        title: "创建时间",
			        field: "createTime",
			        sortable: true
			    },{
			        title: "更新时间",
			        field: "updateTime",
			        sortable: true
			    },{
			        title: "操作",
			        field: "empty",
                    formatter: function (value, row, index) {
                    	var operateHtml = '<@shiro.hasPermission name="system:user:edit"><button class="btn btn-primary btn-sm" type="button" οnclick="edit(\''+row.id+'\')"><i class="fa fa-edit"></i>&nbsp;修改</button> &nbsp;</@shiro.hasPermission>';
                    	operateHtml = operateHtml + '<@shiro.hasPermission name="system:user:deleteBatch"><button class="btn btn-danger btn-sm" type="button" οnclick="del('+row.id+',' + row.versionOptimizedLock+')"><i class="fa fa-remove"></i>&nbsp;删除</button> &nbsp;</@shiro.hasPermission>';
                    	operateHtml = operateHtml + '<@shiro.hasPermission name="system:user:grant1"><button class="btn btn-info btn-sm" type="button" οnclick="grant(\''+row.id+'\')"><i class="fa fa-arrows"></i>&nbsp;关联角色</button></@shiro.hasPermission>';
                        return operateHtml;
                    }
			    }]
			});
        });
        
        function DoOnMsoNumberFormat(cell, row, col){
        	var result = "";
        	if(row > 0 && col == 6){
        		result = "\\@";
        	}
        	return result;
        }
        
        function edit(id){
        	layer.open({
        	      type: 2,
        	      title: '用户修改',
        	      shadeClose: true,
        	      shade: false,
        	      area: ['893px', '600px'],
        	      content: '${ctx!}/admin/user/edit/' + id,
        	      end: function(index){
        	    	  $('#table_list').bootstrapTable("refresh");
       	    	  }
        	    });
        }
        function add(){
        	layer.open({
        	      type: 2,
        	      title: '用户添加',
        	      shadeClose: true,
        	      shade: false,
        	      area: ['893px', '600px'],
        	      content: '${ctx!}/admin/user/add',
        	      end: function(index){
        	    	  $('#table_list').bootstrapTable("refresh");
       	    	  }
        	    });
        }
        function grant(id){
        	layer.open({
        	      type: 2,
        	      title: '关联角色',
        	      shadeClose: true,
        	      shade: false,
        	      area: ['893px', '600px'],
        	      content: '${ctx!}/admin/user/grant/'  + id,
        	      end: function(index){
        	    	  $('#table_list').bootstrapTable("refresh");
       	    	  }
        	    });
        }
        function del(id, versionOptimizedLock){
        	layer.confirm('确定删除吗?', {icon: 3, title:'提示'}, function(index){
        		$.ajax({
    	    		   type: "POST",
    	    		   dataType: "json",
    	    		   url: "${ctx!}/admin/user/delete",
    	    		   //url: "${ctx!}/admin/user/delete/" + id,
    	    		   data: {"id":id, "versionOptimizedLock":versionOptimizedLock},
    	    		   success: function(msg){
	 	   	    			layer.msg(msg.message, {time: 2000},function(){
	 	   	    				$('#table_list').bootstrapTable("refresh");
	 	   	    				layer.close(index);
	 	   					});
    	    		   }
    	    	});
       		});
        }
        
        function detailFormatter(index, row) {
	        var html = [];
	        html.push('<p><b>描述:</b> ' + row.description + '</p>');
	        return html.join('');
	    }
	    
	    function search(){
    		console.log("search.....");
    		$('#table_list').bootstrapTable('refresh');
    	}
    </script>
</body>

</html>

后台接口返回数据格式为：

使用bootstrap table的自动分页功能时，至少需要返回总的条数，和数据列对象，其中参数名称可以自定义，使用responseHandler进行处理一下即可。

{"code":"200","msg":"成功","page":1,"rows":5,"count":9,"resultList":[{"id":1,"userName":"admin","password":"d04d4c356a1031da523d33b81510fec4","address":"成都","birthday":"2020-11-03","createTime":"2020-11-09 14:27:46","deleteStatus":0,"description":"超级管理员","email":"whoismy8023@163.com","locked":0,"nickName":"admin","sex":0,"telephone":"1592393000111111","updateTime":"2020-11-09 14:27:28","versionOptimizedLock":0},{"id":2,"userName":"test","password":"d04d4c356a1031da523d33b81510fec4","address":"北京","birthday":"2020-11-09","createTime":"2020-11-09 14:50:56","deleteStatus":1,"description":"测试","email":"test@163.com","locked":0,"nickName":"test001","sex":0,"telephone":"15923930123","updateTime":"2020-11-09 14:51:31","versionOptimizedLock":0},{"id":3,"userName":"linmm","password":"d04d4c356a1031da523d33b81510fec4","address":"beijing ","birthday":"2020-11-09","createTime":"2020-11-09 15:44:05","deleteStatus":0,"description":"测试","email":"1632284989@qq.com","locked":0,"nickName":"LMMA","sex":1,"telephone":"159239300234","updateTime":"2020-11-09 15:44:00","versionOptimizedLock":1},{"id":4,"userName":"jadl","password":"d04d4c356a1031da523d33b81510fec4","address":"beijing ","birthday":"2020-11-09","createTime":"2020-11-09 15:41:37","deleteStatus":0,"description":"测试","email":"1632284989@qq.com","locked":0,"nickName":"LMMA","sex":1,"telephone":"1592393000111111","updateTime":"2020-11-09 15:41:37","versionOptimizedLock":1},{"id":5,"userName":"jadl1","password":null,"address":"beijing ","birthday":"2020-11-09","createTime":"2020-11-09 15:46:41","deleteStatus":0,"description":"测试","email":"1632284989@qq.com","locked":0,"nickName":"LMMA1","sex":1,"telephone":"159239300234","updateTime":"2020-11-09 15:46:41","versionOptimizedLock":1}],"totalPage":2}

使用bootstrap的下拉框时，点击下拉框不显示选项:https://blog.csdn.net/qq_45327886/article/details/108923196

如果感觉写的比较乱，可以直接参考官网的demo，虽然是英文版的，但是简洁易懂：
https://examples.bootstrap-table.com/#extensions/export.html#view-source

linmengmeng_1314
关注
专栏目录
Bootstrap的表格渲染
weixin_34032792的博客
02-13 2054
html <div class="bootstrap-table"> <div class="fixed-table-container" style="padding-bottom: 0px;"> <div class="fixed-table-body"> ...
Bootstrap+JS渲染数据表格
橙乐果果
07-18 3191
比较常用的JS搭配Bootstrap生成生成表格～ 1.定义一个表格 emm...引入css、js这些基本的就忽略了 <div class="container"> <div class="row"> <div class="col-md-12"> <table class="table table-hover " id="m...
BootstrapTable 渲染表格数据
我怀念的是-无话不说的博客
09-06 3394
<div class="panel panel-default"> <div class="panel-body form-horizontal"> <table id="cusTableModel" cell...
记Bootstrap Table两种渲染方式
weixin_30802273的博客
01-07 1220
这里主要区别两种Bootstrap Table的数据渲染方式，一、属性渲染方式，二、JS渲染方式 工作直接接手前人的，之前都直接在table标签上渲染属性，后面因为项目需要，同一页面的表格，需要申请不同的接口获取数据，写两个表格后期数据量大的时候浪费页面资源还增加了请求，所以最后改成了JS渲染方式，先贴表格效果： 一是属性渲染方式：省去表格所在项目引用的样式，单论数据加载，HTML代码就是...
Bootstrap-table的客户端分页渲染表格
冲出仁川，走出马德里，故事还会再继续
03-20 1065
文章目录一、前言：1、服务端分页地址：2、下载地址：二、客户端分页步骤:1、table标签:2、js渲染：2.1、表格初始化2.2、页脚格式化处理:3、后端处理:4、前端页面渲染效果: 一、前言： 具有单选，复选框，排序，分页，扩展和其他添加功能的扩展Bootstrap表 1、服务端分页地址： https://blog.csdn.net/qq_43753724/article/details/112074557 2、下载地址： https://download.csdn.net/download/qq_43
完美解决bootstraptable父子表子表渲染问题
11-29
bootstraptable父子表，子表找不到bootstraptable初始化方法的解决方案
bootstrap-table为空_bootstrap-table如何默认渲染本地数据
weixin_34530164的博客
02-06 751
我使用bootstrap-table，由于数据是从后端返回的对象中拿到其中的一个list来展示的，所以不能直接在js配置里写接口和返回数据，我默认ajax请求到数据之后如何默认渲染到table中，我看网上教程大多数都是动态从服务器渲染的。希望有大神可以教一套靠谱的可以获取到ajax等数据并渲染到页面的方案！！！！！！！！！这里假设我已经拿到数据的数组 projectListvar $table =...
bootstrap-table头部错位已完美解决
10-31
$('#myTable').bootstrapTable({ fixedColumns: true, fixedNumber: 1 // 如果需要第一列固定，将数字1替换为需要固定的列数 }); ``` 6. **更新或修复插件**：有时，问题可能出在Bootstrap表格插件本身。确保...
bootstrap-table formatter 使用vue组件的方法
11-28
Bootstrap Table 是一个基于 jQuery 的表格插件，设计用于与 Bootstrap 框架集成，提供了一系列强大的功能，如单选、多选、排序、分页、编辑、导出和过滤等。由于其简单易用和丰富的特性，Bootstrap Table 在 GitHub...
bootstrap table导出表格支持中文csv、pdf、txt等
08-03
$('#table').bootstrapTable({ columns: [/* 表格列定义 */], data: [/* 表格数据 */], exportTypes: ['csv', 'pdf', 'txt'], // 设置支持的导出类型 exportOptions: { format: { body: function(data, type,...
动态加载bootstrap表格数据
11-29
对bootstrap表格的自定义demo，js动态加载表格数据
Bootstrap Table 在指定列中添加下拉框控件并获取所选值
12-03
$('#table').bootstrapTable('updateCell', {index: indexSelected, field: 'name', value: valueSelected}); }); ``` 这里，我们为下拉框绑定了`change`事件，当用户更改选项时，会触发这个事件，更新相应的...
bootstrap table 分页设置为false渲染不出数据原因
hunagzheng123456的博客
10-18 1257
因为后台返回到前端的数据，是封装的分页格式对象如：而在前端设置前端控件自动化查询不包含total 的对象，从而报错所以渲染不出数据，所以想去掉分页的效果，后台返回的对象得就只是List集合。
Bootstrap学习-bootstrap渲染表单+bootstrap导航栏
Helen27706的博客
05-08 2861
导航栏是网页响应式的基本组件，导航栏在移动设备中是堆叠的，Bootstrap中的导航栏包含了站点名称和基本的导航定义样式。 创建默认的导航栏 1.向标签添加元素class.navbar、.navbar-default. 2.向上面的元素中添加role="navigation",有助于增加可访问性 3.向元素中添加一个标题class.navbar-header,内部包含了带有class na
模态框配合Bootstrap-Table渲染数据展示异常错位问题
FeiSir_PC的博客
11-14 1671
下面多出来了一行，当然了，自己试的话能够清晰，这里图上不容易看出来，而且上传到这上面的图片会被压缩，更不清晰，最好自己线下试一下，当然了，当你正在看我这个问题的时候，可能你也遇到了这种问题，然后看一下更严重的下现象，像下图这样，这样就更明显了吧，其实就是u浏览器渲染数据的时候，底部数据没有个和模态框范文范围对其齐，实际应用中，只要布局是按照bootstrap官方布局文档布局，不会出现下图的情况，只会出现图1的错误，多出来一行，显眼又不显眼，下图我是为了更明显的展示错误。这里是模态框渲染出来的样式。
在flask中，用bootstrap5对表单进行渲染。一个简单的示例
最新发布
liangbilin的博客
06-14 628
参考链接：https://bootstrap-flask.readthedocs.io/en/stable/macros/#render-form 2. 基于wtf，做一个Form 其实就是继承类，然后创建字段。 3. 做一个视图函数，并将 Form 传入模板 4. 模板 注意看，下面这个模板，有几点： 来看看实际效果
bootstrapTable动态渲染数据获取
JSF的博客
06-14 2万+
在其动态渲染表格之前获取有后台传递的数据时，可采用如下代码：
bootstrap table 动态列数据加载（一）
热门推荐
Ping
12-01 2万+
bootstrap table 动态列数据加载（一） 1.动态列原理 将js中的columns属性通过Ajax查询得到 jsp页面准备 &amp;amp;amp;amp;lt;div class=&amp;amp;amp;quot;ibox float-e-margins&amp;amp;amp;quot;&amp;amp;amp;amp;gt; &amp;amp;amp;amp;lt;div&amp;amp;amp;amp;gt; &
ajax基于bootstrap获取并渲染图书列表的数据（还有添加图书信息和删除图书信息）
W_wjinb_B的博客
02-13 545
只写了部分代码，样式代码没有给出，大家有兴趣的可以自己去敲一下嘻嘻 代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, init
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值