BootStrap分页例子——Bootstrap Paginator
段干高歌
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
<script src="./js/bootstrap-paginator.js"></script>
<style>
#content h4{
color:blue;
}
</style>
<script>
let currentPage = 1;
let pageSize = 10;
$(document).ready(function(){
$('#search').click(function(){
render();
});
});
function render(){
var keyword = $('#keyword').val();
if(!$.trim(keyword)){
alert('请输入查询关键词');
return;
}
var date1=new Date(); //开始时间
$.ajax({
//请求方式
type : "GET",
url : "http://192.168.200.56:8070/docSearch",
dataType : "jsonp",
jsonpCallback : "jsonpCallback",
jsonp : "callback",
contentType: 'application/x-www-form-urlencoded;charset=UTF-8',
data : {
keyword: keyword,
pageNum: currentPage,
pageSize: pageSize
},
//请求成功
success : function(result) {
showResult(result,date1);
// 调用分页函数
setPage(currentPage, result.totalPages, render)
},
//请求失败，包含具体的错误信息
error : function(jqXHR, textStatus, errorThrown){
alert(textStatus);
alert(errorThrown);
}
});
}
function showResult(result,date1){
var data = result.list;
var date2=new Date(); //结束时间
var date3=date2.getTime()-date1.getTime() //时间差的毫秒数
$('#ttime').empty().html(date3);
$('#totalPages').empty().html(result.totalPages);
$('#totalElements').empty().html(result.totalElements);
$('#records').empty()
var str = '';
$.each(data,function(i,item){
str = '<div class="col-md-12"><h4>' + item.title + '</h4><p>' + item.attachment.content + '</p></div>';
$('#records').append(str);
});
}
function setPage(pageCurrent, pageSum, callback) {
$("#pageLimit").bootstrapPaginator({
//设置版本号
bootstrapMajorVersion: 3,
// 显示第几页
currentPage: pageCurrent,
// 总页数
totalPages: pageSum,
numberOfPages: 10,
//当单击操作按钮的时候, 执行该函数, 调用ajax渲染页面
onPageClicked: function (event,originalEvent,type,page) {
// 把当前点击的页码赋值给currentPage, 调用ajax,渲染页面
currentPage = page
callback && callback()
}
})
}
</script>
</head>
<body>
<div class="container">
<div class="" style="padding-top:100px;">
<div class="input-group col-md-6 col-md-offset-2">
<input type="text" id="keyword" class="form-control" placeholder="Search for...">
<span class="input-group-btn ">
<button class="btn btn-primary" id="search" type="button">搜索</button>
</span>
</div>
</div>
<div id="content" class="row-fluid">
<div class="col-md-12" style="color:red">
<p>搜索到符合条件的记录共<span id="totalPages"></span>页，共<span id="totalElements"></span>条，共耗时<span id="ttime"></span>毫秒</p>
</div>
<div class="col-md-12">
<ul id="pageLimit"></ul>
</div>
</div>
</div>
</body>
</html>
类似资料：