利用 Linq+Jquery+Ajax 实现异步分页功能可简化带宽压力
39 浏览量
2020-12-08
23:11:18
上传
评论
收藏 387KB PDF 举报
利用利用 Linq+Jquery+Ajax 实现异步分页功能可简化带宽压力实现异步分页功能可简化带宽压力
在Web显示的时候我们经常会遇到分页显示，而网上的分页方法甚多，但都太过于消耗带宽，所以我想到了用Ajax来分页，利用返回的Json
来处理返回的数据，大大简化了带宽的压力。先说下思路，无非就是异步执行ajax 把新列表所需要的数据用json格式返回来，输出table,你
可以输出ui li(输出效率高) 在页面上。
效果图：
Html代码：
代码如下:
设置它们的Class = “page” 以便于给它们增加Click事件操作分页
<div id=”showPage” style=”width: 650px; margin: 0 auto; display: none” class=”pages”>
<div style=”float: left”>
<a id=”first” class=”pages”>首页</a>
<a id=”prev” class=”pages”>上页</a>
<a id=”next” class=”pages”>下页</a>
<a id=”last” class=”pages”>尾页</a>
跳转到第<input type=”text” id=”txtGoPage” style=”width: 45px; height: 15px; border: 1px solid” />
页
</div>
<div style=”margin: 0; float: left”>
<input type=”button” class=”pages btn btn-info” id=”go” value=”跳转” />
共<span id=”SumCount”></span> 条数据，每页<span id=”ItemCount”></span> 条，
当前<span id=”Index”></span>/<span id=”PageCount”></span>页
</div>
</div>
用下面的div输出返回的结果
<div id=”divBadProductInfo”></div>
Css代码：
代码如下:
/*分页*/
.pages {
cursor: pointer;
text-align: center;
margin: 0 auto;
padding-right: 0px;
padding-bottom: 2px;
padding-top: 2px;
font-family: verdana, helvetica, arial, sans-serif;
}
.pages a {
border-right: 1px solid;
padding-right: 6px;
border-top: 1px solid;
padding-left: 6px;
padding-bottom: 0px;
overflow: hidden;
border-left: 1px solid;
line-height: 20px;
margin-right: 2px;
padding-top: 0px;
border-bottom: 1px solid;
height: 30px;
}
.pages a {
border-left-color: #e6e7e1;
border-bottom-color: #e6e7e1;
color: #09c;
border-top-color: #e6e7e1;
background-color: #fff;
border-right-color: #e6e7e1;
}
.pages a:hover {
text-decoration: none;
border-left-color: #09c;
border-bottom-color: #09c;
border-top-color: #09c;
border-right-color: #09c;
}
.pages a.next {
border-left-color: #09c;
border-bottom-color: #09c;
border-top-color: #09c;
评论0