BootStrap_实现分页查询【实例】
⼀、前⾔
这个假期有点⼉长，撸代码有点⼉⼿⽣了，就空余时间总结⼀下这个很经典的BootStrap。计划总结以下⼏个部分：列表查询、列表导出、列表导⼊。
注：总结过程中使⽤的开发环境，开发⼯具，项⽬基础结构如下： jdk1.8；tomcat7；maven3.5 ；idea；mysql；springboot；mybatis-plus。
⼆、背景
我们以学⽣信息为基础，实现查询学⽣信息，学⽣信息列表导出和学⽣信息列表导⼊三个功能。
三、数据库建⽴
四、列表分页查询
4.1根据数据库，建⽴开发此功能所需要的接⼝和类，这⾥不重复叙述，不懂得可以看我初学Spring-boot系列的前⼏篇⽂章。
4.2html页⾯
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>学⽣信息</title>
<link rel="stylesheet" href="../static/common/bootstrap-3.3.7-dist/css/bootstrap.min.css">
<link rel="stylesheet" href="../static/common/bootstrap-table/bootstrap-table.css">
</head>
<body>
<div class="wrapper wrapper-content animated fadeInRight"id="tablediv">
<!--列表搜索条件-->
<div class="row">
<div class="col-sm-12">
<div class="ibox float-e-margins">
<div class="ibox-title">
<h5>学⽣列表筛选条件</h5>
<!--<div class="ibox-tools">
<a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
<a class="close-link"><i class="fa fa-times"></i></a>
</div>-->
</div>
<div class="ibox-content search-query">
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label class="control-label col-sm-2">学⽣id:</label>
<div class="input-group col-sm-4">
<input type="text" class="form-control" id="sId" name="sId">
</div>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label class="control-label col-sm-2">学⽣学号:</label>
<div class="input-group col-sm-4">
<input type="text" class="form-control" id="sNumber" name="sNumber">
</div>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label class="control-label col-sm-2">学⽣姓名:</label>
<div class="input-group col-sm-4">
<input type="text" class="form-control" id="sName" name="sName">
</div>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label class="control-label col-sm-2">学⽣年龄:</label>
<div class="input-group col-sm-4">
<input type="text" class="form-control" id="sAge" name="sAge">
</div>
</div>
</div>
</div>
</div>
<!--<div class="hr-line-dashed"></div>-->
<div class="ibox-content search-query">
<div class="row">
<div class="col-sm-2">
<div class="form-group">
<button class="btn btn-primary infoSearchSubmit" type="button" id="studentSearchSubmit">搜索
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--列表内容-->
<div class="row">
<div class="col-sm-12">
<div class="ibox float-e-margins">
<div class="ibox-title">
<h2>学⽣信息列表</h2>
</div>
<div class="alarm">
<button class="btn btn-danger" id="export" onclick="exportData()">导出Excle</button>
<button class="btn btn-danger" id="import" onclick="importData()">批量导⼊</button>
</div>
<div class="ibox-content">
<div class="row row-lg">
<div class="col-sm-12">
<div class="example-wrap">
<div class="example" >
<table id="studentTable"></table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="../static/common/jquery-3.2.0.min.js"></script>
<script src="../static/common/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<script src="../static/common/bootstrap-table/bootstrap-table.js"></script>
<script src="../static/common/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script> <script src="../static/student_detail.js"></script>
</body>
</html>
4.3 student_detail.js
关于bootstarp-table的解释
function initExplainTable() {
$('#explainTable').bootstrapTable({
url: ctp + '/system/explain/selectPage',// controller⽅法的路径
method: 'post',// 请求⽅式 post 请求
striped: true,// 是否显⽰⾏间隔⾊ true 隔⾏变⾊
cache: false,//是否使⽤缓存，默认为true，所以⼀般情况下需要设置⼀下这个属性（*）false 禁⽤ajax数据缓存 pagination: true,// 表格底部显⽰分页条
sortable: false,// 是否启⽤排序 false 不排列
sortOrder: "asc",// ⾃定义排序⽅式 asc 升序
sidePagination: 'server',//,//分页⽅式：client客户端分页，server服务端分页（*）
queryParamsType: 'limit',// 设置为 'limit' 则会发送符合 RESTFul 格式的参数。
queryParams: defaultQueryParams,//传递参数
pageNumber: 1,// 初始化加载第⼀页默认第⼀页
pageSize: 10,// 每页的记录⾏数（*）
pageList: [10, 50, 100],// 可供选择的每页的⾏数（*）
clickToSelect: true,//是否启⽤点击选中⾏ true 启⽤点击选中⾏
uniqueId: 'id',//每⼀⾏的唯⼀标识⼀般为主键列
showRefresh: true,//是否显⽰刷新按钮 true 显⽰刷新按钮
checkboxHeader: true,
undefinedText: "-",//未定义⽂本
search: true,//是否显⽰表格搜索，此搜索是客户端搜索，不会进服务端，严格搜索
searchOnEnterKey: true,
searchTimeOut: 30,
strictSearch: true,//true 严格搜索
showColumns: true,//是否显⽰所有的列 true 显⽰所有的列
height: 500, //⾏⾼，如果没有设置height属性，表格⾃动根据记录条数觉得表格⾼度
showToggle: true,//true 显⽰详细视图和列表视图的切换按钮
showPaginationSwitch: true,//true 显⽰页⾯切换
minimumCountColumns: 2, //最少允许的列数
toolbar: '#toolbar',//样式
idField: 'id',//指定主键列
columns: [{
field: 'explainName',//列字段名
title: '说明名称' //页⾯上展⽰的列名
}, {
field: 'explainValue',
title: '说明内容'
},{
title: '操作',
class: 'td-manage',
formatter: function (value, row, index) {
var editBtn = '';
var delBtn = '';
editBtn += '<a class="edit m-l-sm text-warning" title="编辑">';
editBtn += '<i class="glyphicon glyphicon-edit"></i></a>';
delBtn += '<a class="remove m-l-sm text-danger" title="删除">';
delBtn += '<i class="glyphicon glyphicon-remove"></i></a>';
return editBtn + delBtn;
}
}]
});
}
我的代码：
$(function(){
initProjectTable();
})
//初始化学⽣列表
function initProjectTable(){
//初始化列表
$('#studentTable').bootstrapTable({
url: 'getAllStudents',
method: 'post',
contentType:'application/x-www-form-urlencoded; charset=UTF-8',
striped: true,
cache: false,
pagination: true,
sortable: false,
sortOrder: "asc",
queryParamsType: 'limit',
queryParams: defaultQueryParams,
sidePagination: 'server',
pageNumber: 1,
pageSize: 5,
pageList: [5,10, 50],
clickToSelect: true,
uniqueId: 'sId',
showRefresh: true,
checkboxHeader: true,
undefinedText: "-",
strictSearch: true,
showColumns: true,
showToggle: true,
showPaginationSwitch: true,
toolbar: '#toolbar',
columns: [{
field: 'sId',
title: '学⽣id'
},{
field: 'sNumber',springboot结构
title: '学⽣编号'
},{
field: 'sName',
title: '学⽣姓名'
},{
field: 'sAge',
title: '学⽣年龄'
}, {
field: 'sId',
title: '操作',
class: 'td-manage',
formatter: function (value, row, index) {
var editBtn = '';
var delBtn = '';
editBtn += ' <button class="edit btn btn-primary btn-sm" data-toggle="modal" data-target=".bs-example-modal-lg" title="编辑">编辑</button> '; delBtn += ' <button class="remove btn btn-danger btn-sm" title="删除">删除</button> ';
return editBtn + delBtn;
}
}]
});
}
//表格⾃定义参数
function defaultQueryParams(params) {
params.pageNumber= this.pageNumber;//当前页码
params.limit = this.pageSize;//查多少条（每页显⽰数量）
//params.offset=(this.pageNumber-1)*this.pageSize;//sql语句起始索引
return params;
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论