.net Bootstrap实现服务器分页效果

今天分享一下.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包含元素是DIVcurrentPage: 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就行。

最后安利一段话：人生如一场修行，
得意时一日看尽长安花，艰难时潦倒新停浊酒杯。
但生命的跋涉不能回头。
哪怕畏途巉岩不可攀，也要会当临绝顶；
哪怕无人会，登临意，也要猛志固常在；
从经典中汲取，从经典中汲取九万里风鹏正举”的力量，历练也无风雨也无晴的豁然，待到重阳日，我们还来就菊花。

希望对你有所帮助

.net Bootstrap实现服务器分页效果相关推荐

paginatorhelper ajax,Bootstrap Paginator+PageHelper实现分页效果_蓝瞳_前端开发者
最近需要做一个分页,找了挺多的前端分页效果,发现Bootstrap Paginator分页插件效果不错,而我页面也是用BootStrap做的响应式页面,就做了实现一个简单的分页效果. PageHelp ...
ie8 object param没有效果_如何用php实现分页效果
分页效果在网页中是常见的,可是怎样才能实现分页呢,今天做了两种方法来实现一下分页的效果首先,我们需要准备在数据库里面准备一个表,并且插入数据,这些都是必需的前提工作了,不多说,如图所示(库名为jer ...
java freemarker 分页_10小时入门java开发04 springboot+freemarker+bootstrap快速实现分页功能...
本节是建立在上节的基础上,上一节给大家讲了管理后台表格如何展示数据,但是当我们的数据比较多的时候我们就需要做分页处理了.这一节给大家讲解如何实现表格数据的分页显示. 准备工作还是老规矩,看效果图可 ...
php ajax实现分页效果
ajaxpage.php[这里是数据展示页面的代码]: <meta charset='utf-8′> <script src=" http://ajax.googleapi ...
bootstrap table 分页_Java入门007~springboot+freemarker+bootstrap快速实现分页功能
本节是建立在上节的基础上,上一节给大家讲了管理后台表格如何展示数据,但是当我们的数据比较多的时候我们就需要做分页处理了.这一节给大家讲解如何实现表格数据的分页显示. 准备工作 1,项目要引入freem ...
ASP+AJAX实现分页效果[Z]
原文地址:http://blog.xswg.com/memeber/liaoguihui/archives/2006/4544.html 在WIN200+ACCESS可以正常运行最近在网站看到AJA ...
ajax分页功能实现php,详解AJAX分页效果的简单实现
最近写一个给用户组添加角色的功能,要求一边是未添加的角色,一边是已添加的角色,还有搜索功能, 点击添加后,ajax保存操作. 本文主要为大家详细介绍了AJAX分页效果的简单实现代码,具有一定的参考价值 ...
bootstrap table排序php,BootStrap+Table排序分页序号
这次给大家带来BootStrap+Table排序分页序号,BootStrap+Table排序分页序号的注意事项有哪些,下面就是实战案例,一起来看一下. 前言在使用bootstrap table的时候难 ...
想实现数据分页，就用dataTabale+jquery语句实现分页效果和查询功能和自动排序,简单实用强烈推荐
使用jquery中的dataTables实现列表的分页 dataTables是⼀个jquery的插件,可以进行分页和实时查找数据. 官⽹:https://datatables.net/ 1.引入 (1 ...

.net Bootstrap实现服务器分页效果

今天分享一下.NET 基于Bootstrap框架实现服务器分页实现效果

引用

HTML

JS

C#

.net Bootstrap实现服务器分页效果相关推荐

最新文章

热门文章