Bootstrap——table插件实现分页，后台传JSON即可（功能十分强大）

最新推荐文章于 2022-11-06 14:08:15 发布

大头目T

最新推荐文章于 2022-11-06 14:08:15 发布

阅读量1.6k

点赞数

分类专栏：前端文章标签： bootstrap-table分页

本文链接：https://blog.csdn.net/weixin_44315761/article/details/89527459

版权

前端专栏收录该内容

36 篇文章 0 订阅

订阅专栏

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!DOCTYPE html>
<html>
<head>
<base href="<%=basePath%>">
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="bootstrap/css/bootstrap.css" />
<link rel="stylesheet" href="bootstrap/css/bootstrap-table.css">
</head>
<body>
	<table id="table"></table>


	<script type="text/javascript" src="bootstrap/js/jquery.min.1.12.4.js"></script>
	<script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
	<script type="text/javascript" src="bootstrap/js/bootstrap-table.js"></script>
	<script type="text/javascript"
		src="bootstrap/js/bootstrap-table-zh-CN.js"></script>
	<script type="text/javascript">
	
			/* $('#table').bootstrapTable({
				method: "post",
				url : '/list',
				columns : [ {
					field : 'userid',
					title : 'Item ID'
				}, {
					field : 'username',
					title : 'Item Name'
				}, {
					field : 'password',
					title : 'Item Price'
				}, {
					field : 'salt',
					title : 'Item salt'
				}, {
					field : 'status',
					title : 'Item status'
				}]
			}); */
			
			var $table;
	        //初始化bootstrap-table的内容
	        InitMainTable ();
	        function InitMainTable () {
	            //记录页面bootstrap-table全局变量$table，方便应用
	            //var queryUrl = '/TestUser/FindWithPager?rnd=' + Math.random()
	            $table = $('#table').bootstrapTable({
	                url: '/list',                       //请求后台的URL（*）
	        	    method: 'post',                     //请求方式（*）
	                toolbar: '#toolbar',                //工具按钮用哪个容器
	                striped: true,                      //是否显示行间隔色
	                cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
	                sortable: true,                     //是否启用排序
	                sortOrder: "asc",                   //排序方式
	                pagination: true,                   //是否显示分页（*）
	                sidePagination: "client",           //分页方式：client客户端分页(默认)，server服务端分页（*）
	                pageNumber: 1,                      //初始化加载第一页，默认第一页,并记录
	                pageSize: 2,                     	//每页大小
	                pageList: [2, 3, 4],        		//可供选择的每页的行数（*）
	                search: true,                       //是否显示表格搜索
	                strictSearch: true,
	                showColumns: true,                  //是否显示所有的列（选择显示的列）
	                showRefresh: true,                  //是否显示刷新按钮
	                minimumCountColumns: 2,             //最少允许的列数
	                clickToSelect: true,                //是否启用点击选中行
	                height: 500,                        //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
	               	
	                uniqueId: "userid",                 //每一行的唯一标识，一般为主键列
	                showToggle: true,                   //是否显示详细视图和列表视图的切换按钮
	                cardView: false,                    //是否显示详细视图
	                detailView: false, 					//得到查询的参数
	                queryParams : function (params) {
	                    //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
	                   
	                    var temp = {   
	                    		rows: params.limit,                         //页面大小
	                            page: (params.offset / params.limit) + 1,   //页码
	                            sort: params.sort,      //排序列名  
	                            sortOrder: params.order //排位命令（desc，asc） 
	                    }
	                    return temp;
	                },
	                columns: [{
	                    checkbox: true,  
	                    visible: true                  //是否显示复选框  
	                }, {
	                    field: 'userid',
	                    title: 'ID',
	                }, {
	                    field: 'username',
	                    title: '姓名',
	                }, {
	                    field: 'password',
	                    title: '密码',
	                }, {
	                    field: 'salt',
	                    title: '盐值',
	                }, {
	                    field: 'status',
	                    title: '加盐'
	                } ],
	                onLoadSuccess: function () {
	                },
	                onLoadError: function () {
	                    showTips("数据加载失败！");
	                },
	                onDblClickRow: function (row, $element) {
	                    var id = row.ID;
	                    EditViewById(id, 'view');
	                },
	            });
	        };
	    
	</script>
</body>
</html>