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

81 阅读 0 评论 54 点赞

我是靠谱客的博主大方小熊猫，最近开发中收集的这篇文章主要介绍Bootstrap——table插件实现分页，后台传JSON即可（功能十分强大），觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

<%@ 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>