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

个人使用过基于Bootstrap的两种分页,可能还有其他方法

  1. 基于Bootstrap-table插件实现表格分页–下次分享
  2. 基于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实现服务器分页效果相关推荐

  1. paginatorhelper ajax,Bootstrap Paginator+PageHelper实现分页效果_蓝瞳_前端开发者

    最近需要做一个分页,找了挺多的前端分页效果,发现Bootstrap Paginator分页插件效果不错,而我页面也是用BootStrap做的响应式页面,就做了实现一个简单的分页效果. PageHelp ...

  2. ie8 object param没有效果_如何用php实现分页效果

    分页效果在网页中是常见的,可是怎样才能实现分页呢,今天做了两种方法来实现一下分页的效果 首先,我们需要准备在数据库里面准备一个表,并且插入数据,这些都是必需的前提工作了,不多说,如图所示(库名为jer ...

  3. java freemarker 分页_10小时入门java开发04 springboot+freemarker+bootstrap快速实现分页功能...

    本节是建立在上节的基础上,上一节给大家讲了管理后台表格如何展示数据,但是当我们的数据比较多的时候我们就需要做分页处理了.这一节给大家讲解如何实现表格数据的分页显示. 准备工作 还是老规矩,看效果图 可 ...

  4. php ajax实现分页效果

    ajaxpage.php[这里是数据展示页面的代码]: <meta charset='utf-8′> <script src=" http://ajax.googleapi ...

  5. bootstrap table 分页_Java入门007~springboot+freemarker+bootstrap快速实现分页功能

    本节是建立在上节的基础上,上一节给大家讲了管理后台表格如何展示数据,但是当我们的数据比较多的时候我们就需要做分页处理了.这一节给大家讲解如何实现表格数据的分页显示. 准备工作 1,项目要引入freem ...

  6. ASP+AJAX实现分页效果[Z]

    原文地址:http://blog.xswg.com/memeber/liaoguihui/archives/2006/4544.html 在WIN200+ACCESS可以正常运行 最近在网站看到AJA ...

  7. ajax分页功能实现php,详解AJAX分页效果的简单实现

    最近写一个给用户组添加角色的功能,要求一边是未添加的角色,一边是已添加的角色,还有搜索功能, 点击添加后,ajax保存操作. 本文主要为大家详细介绍了AJAX分页效果的简单实现代码,具有一定的参考价值 ...

  8. bootstrap table排序php,BootStrap+Table排序分页序号

    这次给大家带来BootStrap+Table排序分页序号,BootStrap+Table排序分页序号的注意事项有哪些,下面就是实战案例,一起来看一下. 前言在使用bootstrap table的时候难 ...

  9. 想实现数据分页,就用dataTabale+jquery语句实现分页效果和查询功能和自动排序,简单实用强烈推荐

    使用jquery中的dataTables实现列表的分页 dataTables是⼀个jquery的插件,可以进行分页和实时查找数据. 官⽹:https://datatables.net/ 1.引入 (1 ...

最新文章

  1. java避免使用orderby_java – Spring安全配置@Order不是唯一的例外
  2. Spring MVC常用注解说明
  3. 网页授权有时候获取不到openid 的坑
  4. Storm 06_Storm 容错机制
  5. g++编译时:No such file or directory
  6. 使用IDM下载,不适用默认浏览器下载
  7. Hazelcast的MapLoader陷阱
  8. C#用注册表开机自动启动某某软件
  9. 华为一所英国研发中心建设项目获当地批准 计划总投资4亿英镑
  10. ajax 购物车 c#,c#购物车功能实现及收藏功能实现
  11. Aspose.Words.dll根据模板生成word详解
  12. 数据分析 - Kaggle TMDB 票房预测
  13. 安装sql2017时提示Polybase 要求安装Oracle JRE 7更新51 (64位)或更高版本”规则失败...
  14. JAVA对接大汉三通短信http接口
  15. 用python做自动化控制-python用于自动化控制编程
  16. 用oracle 11g bbed copy替换同一个表数据块block为另一个数据块之系列八
  17. PUN☀️二、局域网的搭建
  18. cf1009 C. Annoying Present
  19. PS作业【利用新蒙版再生图像】的一些经验和提示
  20. java web 打印 Cl0dup

热门文章

  1. 简单WIFI定位分析与比较(文末有手机采集RSSI软件推荐!!!)
  2. 因聚而变——“聚·变”
  3. 《Python自然语言处理-雅兰·萨纳卡(Jalaj Thanaki)》学习笔记:09 NLU和NLG问题中的深度学习
  4. 常用的Internet的即时通信(IM)软件-腾讯QQ官方版提供下载
  5. Red hat Linux 重启、关机、退出X、启动X 命令
  6. AQR资本20年精选20篇之:风格因子工匠精神Alpha
  7. 计算机二级考试学校会有课程安排吗,沈阳达尔文学校从多角度操控国家计算机二级考试...
  8. Linux 符号命令及符号问题
  9. webview.addJavascriptInterface() doen not work on API 16+
  10. Seq2Seq模型应用案例