技术标签： bootstrap 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>
<input type="text" class="form-control" id="ksrq" onFocus="WdatePicker({dateFmt: 'yyyy-MM-dd HH:mm:ss',maxDate:'%y-%M-%d %H:%m:%s'});" />
</div>
<div class="form-group">
<label for="jsrq">结束日期</label>
<input type="text" class="form-control" id="jsrq" onFocus="WdatePicker({dateFmt: 'yyyy-MM-dd HH:mm:ss',maxDate:'%y-%M-%d %H:%m:%s'});" />
</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请求则无需设置
文章浏览阅读790次。在实现SHA-1算法时，需要将输入字符串转换为适当格式，并填充数据，以确保数据长度满足SHA-1算法的要求。SHA-1算法标准规定，必须对消息摘要进行补位操作，即将输入的数据进行填充，使得数据长度对512求余的结果为448，填充比特位的最高位补一个1,其余位补0，如果在补位之前已经满足对512取模余数为448，则要进行补位，在其后补一位1。SHA-1对任意长度明文的分组预处理完后的明文长度是512位的整数倍，值得注意的是，SHA-1的原始报文长度不能超过2的64次方，然后SHA-1生成160位的报文摘要。_sha-1产生报文摘要的过程 预处理——对消息填充 预处理——初始向
文章浏览阅读1.5k次。前言最近项目在升级为 https ，先把一些常规的模块（页面，服务等部署在 tomcat 中的）升级了，利用 ssl 证书通过 tomcat 重定向到 443（默认） 端口就解决了，但是有一个 springboot 写的 netty-socketio 的聊天服务也要升级，刚开始思路错了以为也要 tomcat 重定向端口，折腾了半天不行；最后看到一篇文章只是在 socketio 的 configuration 中设置证书参数就行了⊙﹏⊙‖∣，因为踩了坑所以记录一下，以备不时之需。这里默认已经有一个用 sp_netty socketio设置p12证书
文章浏览阅读4.3k次。1.发现存在内存泄露。程序退出时记得调用：google::protobuf::ShutdownProtobufLibrary();2.内存有异常： 可能是：protobuf 中的嵌套消息的使用临时变量例：string sn="1111";string Algo="3333";request.set_sn(sn);request.set_algo(Algo);..._protobuf copyfrom 异常
文章浏览阅读3.5k次。名词解释：事件循环：是每个 asyncio 应用程序的核心，每个协程任务都运行在事件循环中，事件循坏来管理分配不同任务的执行，比如aiohttp 请求后会让出控制权，事件循环就会继续执行下面的任务而不会造成阻塞，达到提高并发的目的。当然不是所有协程任务都可以让出控制权，所有要使用aiohttp而不是requests协程 ：async关键字声明的特殊函数，就是协程，这时候协程已经不具备函数的特性，所以协程不是函数futures：调度的协程被包装在Tasks 中，它是一种Future类型，loop.cr_python并发请求接口
文章浏览阅读761次，点赞4次，收藏4次。有一块 STM32F407VET6 的故障开发板, 之前的问题是经常无法烧录, 必须reset之后才能连接, 并且程序运行一断时间后会halt. 原本打算把这片 STM32F407VET6 换到新板子上, 已经重新打好了板子. 今天在动手换板子前, 上电试一下, 发现烧录是正常的, 跑一个最简单的闪灯程序, 跑了十几分钟后依然在闪, 莫非这个板子又好了? 然后又跑了一个带串口输出的程序, 发现问题了, 这个 STM32F407VET6 会不断重启_stm32f407vet6烧录
文章浏览阅读3.8k次。oracle备份脚本_oracle数据库备份脚本
文章浏览阅读905次，点赞21次，收藏11次。SSH：Secure Shell Protocol，安全的远程登录，实现加密通信，替代传统telnet协议。端口：22/tcp。
文章浏览阅读2.4k次，点赞2次，收藏4次。然后将项目开发中所需要的包引用文件全部放在这下面。随着时间推移，这个文件夹越来越大，关键是位于系统盘C盘！Android Studio移动.gradle文件夹重新设置新路径。_android studio .gradle换位置
文章浏览阅读1.5k次。最近公司提交项目给苹果审核时，遇到一个奇怪的错误。如图翻译如图这个错误就是说在我在项目中使用了HealthKit，但是在审核过程中并没有看到任何需要健康或者健身数据的主要功能。经过一番查找，终于找到了原因，原来是之前设置plist文件的描述提示时，设置了如下的几种提示。<key>NSHealthShareUsageDescription</key><string>App需要您的同意,才能访问健康分享</string>&._nshealth shareusage description 没有勾选被驳回
文章浏览阅读3.2w次。聊天室_vue3聊天室排版
文章浏览阅读5.3k次。2022/02月份更新的篇章一文浅析智能门锁智能门锁：电源管理概述1智能门锁：电源管理概述2最近收到电子工程专辑寄过来的一个快递，拎着快递走在路上听到了铃铃铃的玻璃声还是很高兴电子工程专辑..._反激电源mos管振铃现象
文章浏览阅读959次，点赞18次，收藏11次。不管程序有没有显示的初始化，Java 虚拟机都会先自动给它初始化为默认值。1、整数类型（byte、short、int、long）的基本类型变量的默认值为0。2、单精度浮点型（float）的基本类型变量的默认值为0.0f。3、双精度浮点型（double）的基本类型变量的默认值为0.0d。4、字符型（char）的基本类型变量的默认为 “/u0000”。5、布尔性的基本类型变量的默认值为 false。6、引用类型的变量是默认值为 null。7、数组引用类型的变量的默认值为 null。_java各类型默认值