Bootstrap实现表格分页

1.官网下载Bootstrap地址：https://v3.bootcss.com/getting-started/#download

（我的资源地址：https://download.csdn.net/download/rexueqingchun/10544681）

2.页面使用及添加所依赖的JS和CSS

<!DOCTYPE html>
<html>
<head>
<title>Bootstrap-table</title>
<script src="/script/jquery.1.12.4.min.js"></script>
<script src="/script/My97DatePicker/WdatePicker.js"></script>
<script src="/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<script src="/bootstrap-3.3.7-dist/js/bootstrap-table.min.js"></script>
<script src="/bootstrap-3.3.7-dist/js/bootstrap-table-zh-CN.min.js"></script>
<link href="/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
<link href="/bootstrap-3.3.7-dist/css/bootstrap-table.min.css" rel="stylesheet">
<script type="text/javascript">$(function(){$('#mytab').bootstrapTable({url:"jkrzList",//请求路径method: 'post',contentType:'application/x-www-form-urlencoded; charset=UTF-8',//post请求需设置striped: true, //是否显示行间隔色pageNumber: 1, //初始化加载第一页pagination:true,//是否分页pageSize:10,//单页记录数pageList:[5,10,20,30],//可选择单页记录数showRefresh:true,//刷新按钮queryParams : function (params) {//上传服务器的参数var temp = {//如果是在服务器端实现分页，limit、offset这两个参数是必须的limit : params.limit, // 每页显示数量offset : params.offset, // SQL语句起始索引ksrq : $('#ksrq').val(),jsrq : $('#jsrq').val()};return temp;},columns:[{title:'字段1',field:'SERVER_NAME',align: 'center'},{title:'字段2',field:'SERVER_IP',align: 'center'},{title:'字段3',field:'SERVER_ACTION',align: 'center',formatter: function (value, row, index){return '<a href="'+value+'" target="_black" >'+value+'</a>'}},{title:'录入时间',field:'LRSJ',align: 'center',formatter: function (value, row, index){ return new Date(value).Format("yyyy-MM-dd HH:mm:ss");}}]})})//查询按钮事件$('#search_btn').click(function(){$('#mytab').bootstrapTable('refresh');})//格式化日期Date.prototype.Format = function (fmt) {  var o = {  "M+": this.getMonth() + 1, //月份   "d+": this.getDate(), //日   "H+": this.getHours(), //小时   "m+": this.getMinutes(), //分   "s+": this.getSeconds(), //秒   "q+": Math.floor((this.getMonth() + 3) / 3), //季度   "S": this.getMilliseconds() //毫秒   };  if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));  for (var k in o)  if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));  return fmt;
}
</script>
</head>
<body><div class="container"><div class="page-header"><h1>Bootstrap-table</h1></div><form class="form-inline"><div class="form-group"><label for="ksrq">开始日期</label>&nbsp;&nbsp;<input type="text" class="form-control" id="ksrq" onFocus="WdatePicker({dateFmt: 'yyyy-MM-dd HH:mm:ss',maxDate:'%y-%M-%d %H:%m:%s'});" />&nbsp;&nbsp;</div><div class="form-group"><label for="jsrq">结束日期</label>&nbsp;&nbsp;<input type="text" class="form-control" id="jsrq" onFocus="WdatePicker({dateFmt: 'yyyy-MM-dd HH:mm:ss',maxDate:'%y-%M-%d %H:%m:%s'});" />&nbsp;&nbsp;</div><div class="form-group"><button type="button" class="btn btn-primary" id="search_btn" >查询</button></div></form><br><div id="result" class="alert alert-success"><table id="mytab" class="table table-hover"></table>   </div></div>
</body>
</html>

3.后台返回数据

@RequestMapping(value = "jkrzList", method = {RequestMethod.GET, RequestMethod.POST })
@ResponseBody
public List<Map<String, Object>> jkrzList(@RequestParam String ksrq,@RequestParam String jsrq) {List<Map<String, Object>> list = baseDao.getJkrzList();//根据业务查询库中数据return list;
}

注意：bootstrapTable发送post请求时需设置contentType:'application/x-www-form-urlencoded; charset=UTF-8'，若发送get请求则无需设置

Bootstrap实现表格分页相关推荐

Bootstrap Table表格分页的使用及分页数据（Excel）导出
####相关文档 Bootstrap Table官网:http://bootstrap-table.wenzhixin.net.cn/zh-cn/ Bootstrap 中文网:http://www.b ...
Ext.grid.Panel表格分页
Ext.grid.Panel表格分页示例代码: cshtml @{Layout = null; } <!DOCTYPE html> <html> <head>&l ...
bootstrap 获取表格修改的结果_bootstrap-table前端修改后台传来的数据重新进行渲染...
使用bootstrap-table显示数据,后台传回数据以后,可能需要对其做调整,如需要前端为数据添加单位调整数据代码 $("#"+tableId).bootstrapTable ...
vue php 分页组件,基于Vue.js的表格分页组件
有一段时间没更新文章了,主要是因为自己一直在忙着学习新的东西而忘记分享了,实在惭愧. 这不,大半夜发文更一篇文章,分享一个自己编写的一个Vue的小组件,名叫BootPage.不了解Vue.js的童鞋可 ...
基于Vue.js的表格分页组件
转载自基于Vue.js的表格分页组件有一段时间没更新文章了,主要是因为自己一直在忙着学习新的东西而忘记分享了,实在惭愧. 这不,大半夜发文更一篇文章,分享一个自己编写的一个Vue的小组件,名叫Bo ...
bootstrapr表格父子框_JS组件系列之Bootstrap table表格组件神器【二、父子表和行列调序】...
Bootstrap Table是轻量级的和功能丰富的以表格的形式显示的数据,支持单选,复选框,排序,分页,显示/隐藏列,固定标题滚动表,响应式设计,Ajax加载JSON数据,点击排序的列,卡片视图等. ...
原生js实现动态表格分页(封装版)
之前一直用的插件做表格分页,但是不同的场景用到的情况都不同,所以索性用个原生js搞一个封装好的. 后台动态获取数据进行渲染,等页面渲染成功之后在进行分页.数据的获取我用的vue,也可以用ajax等其他 ...
插件介绍: DataTables 表格分页
官网: 英文:https://datatables.net/ 中文:http://www.datatables.club/ 引入文件(结合bootstrap样式): css:<link href ...
.net Bootstrap实现服务器分页效果
今天分享一下.NET 基于Bootstrap框架实现服务器分页实现效果个人使用过基于Bootstrap的两种分页,可能还有其他方法基于Bootstrap-table插件实现表格分页–下次分享基于 ...

Bootstrap实现表格分页

Bootstrap实现表格分页相关推荐

最新文章

热门文章