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

今天分享一下.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包含元素是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(
                                ""
                                );
	                    });
	                },
	                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,jquery,c#,sql)