.net Bootstrap实现服务器分页效果
2020-03-01 08:39
916 查看
今天分享一下.NET 基于Bootstrap框架实现服务器分页实现效果
个人使用过基于Bootstrap的两种分页,可能还有其他方法
- 基于Bootstrap-table插件实现表格分页–下次分享
- 基于Bootstrap-paginator插件实现分页–下面分享
案例代码
废话少说,直接上代码
<head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" type="text/css" href="css/bootstrap.css"/> <script src="js/jquery-3.3.1.min.js"></script> <script src="js/bootstrap.js"></script> <script src="js/bootstrap-paginator.js"></script> </head>HTML
<body> <div class="row"> </div> <!-- 分页容器 --> <div id="htmlDiv"></div> <!-- 分页容器: 显示分页按钮--> <div class="col-lg-12" > <!-- 注意:3版本的分页容器标签是<ul>,2版本的容器标签是<div> --> <ul id="mypage" class="pagination"></ul> </div> </body>JS
<script> PageDate(1, 3);//初次加载显示第一页 $.ajax({ type: "post", url: "AshxAll.ashx", data: {page:1,pageCount:3}, dataType:"json", success: function (data) { var options = {//根据后台返回的分页相关信息,设置插件参数 bootstrapMajorVersion: 3, //如果是bootstrap3版本需要加此标识,并且设置包含分页内容的DOM元素为UL,如果是bootstrap2版本,则DOM包含元素是DIV currentPage: 1, //当前页数 totalPages: data[0].pageCounts, //总页数 itemTexts: function (type, page, current) {//设置分页按钮显示字体样式 switch (type) { case "first": return "首页"; case "prev": return "上一页"; case "next": return "下一页"; case "last": return "末页"; case "page": return page; } }, onPageClicked: function (event, originalEvent, type, page) {//分页按钮点击事件 PageDate(page, 3); } }; $('#mypage').bootstrapPaginator(options);//设置分页 $('#mypage').css("cursor", "pointer");//设置鼠标图标 } }); function PageDate(page, count)//页码,每页数量 { $.ajax({ type: "post", url: "AshxAll.ashx", data: {page:page,pageCount:count}, dataType:"json", success: function (data) { $("#row").html(""); $.each(data, function (i, item) { $("#row").append( "<div class='col-xs-6 col-md-2'>" + "<a href='#' class='thumbnail'>" + "<img src='img/img_20200208.jpg'>" + "<div class='text-center'>" + item.userName + "</div>" + "</a>" + "</div>" ); }); }, error: function () { } }); } </script>C#
var page = context.Request["page"]; var pageCount = context.Request["pageCount"]; string sql = string.Format("select id,userName,ceiling(1.0*t.pageCounts/{0}) as pageCounts from (select id,userName,count(0) over() as pageCounts from userInfo order by id OFFSET ({1}*({2}-1)) rows fetch next {3} rows only) t", pageCount, pageCount, page, pageCount); DataTable dt = DBHelper.GetTable(sql,null); context.Response.Write(JsonConvert.SerializeObject(dt));
这里使用的是一般处理程序,里面用了JsonConvert.SerializeObject,没有的需要去网上下载,如果是使用MVC环境的只需要return json就行。
最后安利一段话:人生如一场修行,
得意时一日看尽长安花,艰难时潦倒新停浊酒杯。
但生命的跋涉不能回头。
哪怕畏途巉岩不可攀,也要会当临绝顶;
哪怕无人会,登临意,也要猛志固常在;
从经典中汲取,从经典中汲取九万里风鹏正举”的力量, 历练也无风雨也无晴的豁然,待到重阳日,我们还来就菊花。
希望对你有所帮助
- 点赞 1
- 收藏
- 分享
- 文章举报
相关文章推荐
- Asp.Net 生成静态页并实现分页效果
- JQuery实现简单的服务器轮询效果
- Python-Flask:利用flask_sqlalchemy实现分页效果
- ASP实现分页和翻页的效果
- jQuery实现仿腾讯视频列表分页效果的方法
- android开发之&使用ViewPager加gridView实现菜单按钮分页滑动(类似QQ表情选择翻页效果)
- PHP实现简单数字分页效果
- 动态生成table并实现分页效果
- nodejs,bootstrap实现分页效果
- PageBean方式实现分页效果 泽0715
- Maven实现分页效果
- Android控件之ListView详解及实现分页效果
- thinkphp ajax 无刷新分页效果的实现
- JS+CSS实现的拖动分页效果实例
- JS+CSS实现的拖动分页效果实例
- iOS 简单实现类似于小说阅读滑动分页效果
- ssm 实现分页效果 PageHelper插件
- 纯js实现分页 原理:所有数据已加载好,js通过遍历部分显示,实现分页效果
- 分页效果的实现
- asp.net实现分页效果