一、引用CSS和JS：
<link href="/Content/Plugins/jQuery.Pagination_v2.2/pagination.css" rel="external nofollow" rel="stylesheet"type="text/css" /> <script src="/Content/Plugins/jQuery.Pagination_v2.2/jquery.pagination.js" type="text/javascript"></script>
二、HTML：
<div id="Pagination" class="flickr" style="margin-top: 10pxmargin-left: 10px"> </div>
三、JS：
$(function () { var total = parseInt("@(ViewBag.total)") var page = parseInt("@(ViewBag.page)") - 1 var pageSize = parseInt("@(ViewBag.pageSize)")$("#Pagination").pagination(total, {callback: function (page_id) { window.location = "BoardList?page=" + page_id + "&pageSize=" + this.items_per_page }, //PageCallback() 为翻页调用次函数。prev_text: " 上一页",next_text: "下一页 ",items_per_page: 10, //每页的数据个数num_display_entries: 1, //两侧首尾分页条目数current_page: page, //当前页码num_edge_entries: 11 //连续分页主体部分分页条目数 }) })
四、后台代码：
public ActionResult BoardList() { PagerModel pager = new PagerModel() if (Request["page"] == null) {pager.page = 1 pager.rows = 10 pager.sort = "Id" pager.order = "desc" } else {pager.page = int.Parse(Request["page"]) + 1 pager.rows = int.Parse(Request["pageSize"]) pager.sort = "Id" pager.order = "desc" } boardManageService.GetList(ref pager) List<BoardModel>boardList = pager.result as List<BoardModel> ViewData["BoardModelList"] = boardList ViewBag.page = pager.page ViewBag.total = pager.totalRows ViewBag.pageSize = pager.rowsreturn View() } #endregion
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
文章的内容是使用bootstrap-paginator进行分页，使用ajax获取后台数据、渲染。1. 版本说明
bootstrap 3.3.2
bootstrap-paginator v1.0 github
2. 准备工程
建立动态web工程，新建index.html页面，引入bootstrap相关css js文件。
3. 简单显示
在需要显示分页的位置添加ul标签：
<ul id="pagination"></ul>
在页面底部添加js代码：
<script>var options = { bootstrapMajorVersion: 3, alignment:'center', currentPage:1, numberOfPages:5, totalPages: 10, }$(document).ready(function(){$("#pagination").bootstrapPaginator(options)})</script>
启动web服务，访问index.html页面，可以看到分页显示。
4. 后台准备数据
建立一个servlet，负责向前台输出json数据。
PrintWriter out = response.getWriter()String s1 = "[{\"name\":\"lilei\"},{\"name\":\"lilei2\"}]"String s2 = "{\"name\":\"hanmeimei\"}"String s3 = "{\"name\":\"jim\"}"String s4 = "{\"name\":\"jim1\"}"String s5 = "{\"name\":\"jim2\"}" String page = request.getParameter("page")String cur = nullswitch (page) { case "1": cur = s1breakcase "2": cur = s2breakcase "3": cur = s3breakcase "4": cur = s4breakcase "5": cur = s5breakdefault: break} out.print(cur)out.close()
5. 前台展示数据
前台需要先获取记录的总条数和每页容量。 <ol id="content"> </ol> <ul id="pagination" pageSize="2"><script>var totalPagesvar pageSize = $("#pagination").attr("pageSize") $.ajax({ url:"/BootstrapPagination/QueryStudents", type:"POST", dataType:"json", async:false, success:function(data){ window.totalPages = Math.ceil(data /pageSize) }, error:function(error){ alert("error")} }) </script></ul>
其中pageSize设置为2,先用post方法获取totalPages，用来初始化分页插件。
<script>var options = { bootstrapMajorVersion: 3, alignment:'center', currentPage:1, totalPages: totalPages , pageUrl: function(type, page, current){ return "/BootstrapPagination/QueryStudents?page="+page }, onPageClicked: function (event, originalEvent, type, page) {originalEvent.preventDefault()originalEvent.stopPropagation() $.ajax({ url:originalEvent.target.href, type:"GET", dataType:"json", success: function(data){ $("#content li").remove()$(data).each(function(){ $("#content").append("<li>"+this.name+"</li>")}) }, error: function(error){ alert("error")}})} }$(document).ready(function(){ $("#pagination").bootstrapPaginator(options)$("#pagination li:first a").trigger("click")}) </script>
运行程序即可。详细的可以参见bootstrap-paginator说明,或者去bootstrap-paginator github查阅。
工程下载bootstrap-paginator.zip jdk1.8 tomcat 8
有文档的
http://www.layui.com/demo/laypage.html
<!DOCTYPE html><html>
<head>
<meta charset="utf-8">
<title>layui</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="//res.layui.com/layui/dist/css/layui.css" media="all">
<!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px">
<legend>总页数低于页码总数</legend>
</fieldset>
<div id="demo0"></div>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px">
<legend>总页数大于页码总数</legend>
</fieldset>
<div id="demo1"></div>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px">
<legend>自定义主题 - 颜色随意定义</legend>
</fieldset>
<div id="demo2"></div>
<div id="demo2-1"></div>
<div id="demo2-2"></div>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px">
<legend>自定义首页、尾页、上一页、下一页文本</legend>
</fieldset>
<div id="demo3"></div>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px">
<legend>不显示首页尾页</legend>
</fieldset>
<div id="demo4"></div>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px">
<legend>开启HASH</legend>
</fieldset>
<div id="demo5"></div>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px">
<legend>只显示上一页、下一页</legend>
</fieldset>
<div id="demo6"></div>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px">
<legend>显示完整功能</legend>
</fieldset>
<div id="demo7"></div>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px">
<legend>自定义排版</legend>
</fieldset>
<div id="demo8"></div>
<div id="demo9"></div>
<div id="demo10"></div>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px">
<legend>自定义每页条数的选择项</legend>
</fieldset>
<div id="demo11"></div>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px">
<legend>将一段已知数组分页展示</legend>
</fieldset>
<div id="demo20"></div>
<ul id="biuuu_city_list"></ul>
<script src="//res.layui.com/layui/dist/layui.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script>
layui.use(['laypage', 'layer'], function(){
var laypage = layui.laypage
,layer = layui.layer
//总页数低于页码总数
laypage.render({
elem: 'demo0'
,count: 50 //数据总数
})
//总页数大于页码总数
laypage.render({
elem: 'demo1'
,count: 70 //数据总数
,jump: function(obj){
console.log(obj)
}
})
//自定义样式
laypage.render({
elem: 'demo2'
,count: 100
,theme: '#1E9FFF'
})
laypage.render({
elem: 'demo2-1'
,count: 100
,theme: '#FF5722'
})
laypage.render({
elem: 'demo2-2'
,count: 100
,theme: '#FFB800'
})
//自定义首页、尾页、上一页、下一页文本
laypage.render({
elem: 'demo3'
,count: 100
,first: '首页'
,last: '尾页'
,prev: '<em>←</em>'
,next: '<em>→</em>'
})
//不显示首页尾页
laypage.render({
elem: 'demo4'
,count: 100
,first: false
,last: false
})
//开启HASH
laypage.render({
elem: 'demo5'
,count: 500
,curr: location.hash.replace('#!fenye=', '') //获取hash值为fenye的当前页
,hash: 'fenye' //自定义hash值
})
//只显示上一页、下一页
laypage.render({
elem: 'demo6'
,count: 50
,layout: ['prev', 'next']
,jump: function(obj, first){
if(!first){
layer.msg('第 '+ obj.curr +' 页')
}
}
})
//完整功能
laypage.render({
elem: 'demo7'
,count: 100
,layout: ['count', 'prev', 'page', 'next', 'limit', 'skip']
,jump: function(obj){
console.log(obj)
}
})
//自定义排版
laypage.render({
elem: 'demo8'
,count: 1000
,layout: ['limit', 'prev', 'page', 'next']
})
laypage.render({
elem: 'demo9'
,count: 1000
,layout: ['prev', 'next', 'page']
})
laypage.render({
elem: 'demo10'
,count: 1000
,layout: ['page', 'count']
})
//自定义每页条数的选择项
laypage.render({
elem: 'demo11'
,count: 1000
,limit: 100
,limits: [100, 300, 500]
})
//将一段数组分页展示
//测试数据
var data = [
'北京',
'上海',
'广州',
'深圳',
'杭州',
'长沙',
'合肥',
'宁夏',
'成都',
'西安',
'南昌',
'上饶',
'沈阳',
'济南',
'厦门',
'福州',
'九江',
'宜春',
'赣州',
'宁波',
'绍兴',
'无锡',
'苏州',
'徐州',
'东莞',
'佛山',
'中山',
'成都',
'武汉',
'青岛',
'天津',
'重庆',
'南京',
'九江',
'香港',
'澳门',
'台北'
]
//调用分页
laypage.render({
elem: 'demo20'
,count: data.length
,jump: function(obj){
//模拟渲染
document.getElementById('biuuu_city_list').innerHTML = function(){
var arr = []
,thisData = data.concat().splice(obj.curr*obj.limit - obj.limit, obj.limit)
layui.each(thisData, function(index, item){
arr.push('<li>'+ item +'</li>')
})
return arr.join('')
}()
}
})
})
</script>
</body>
</html>
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）