您的位置：首页 > Web前端 > BootStrap

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

2020-03-01 08:39 916 查看

今天分享一下.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(
"<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
  • 收藏
  • 分享
  • 文章举报
是夜随风 发布了2 篇原创文章 · 获赞 2 · 访问量 1249 私信 关注
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航