基于BootStrap实现局部刷新分页实例代码


Posted in Javascript onAugust 08, 2016

在之前的工作中我用的分页有很多,一直不牢固,所以自己用起来也不是很顺手,这是一个局部刷新的分页,我试了很多,本想用mvcPager来做局部刷新,但是考虑到成本太高,放弃了,先来总结一下基于bootstrap的分页吧,便于自己以后使用

开源地址 https://github.com/lyonlai/bootstrap-paginator

首先引用

Jquery

bootstrap.min.js

bootstrap-paginator.min.js

控制器代码

[AuthorizationCodeAttribute]
[Description("评论信息")]
[HttpPost]
public ActionResult Comment(int id, int? page)
{
#region 评论列表 
var dal = new CarCommentOperator();
int pageIndex = page ?? 1;//当前页
if (!string.IsNullOrEmpty(Request.QueryString["pageindex"]))
{
if (!int.TryParse(Request.QueryString["pageindex"], out pageIndex))
{
pageIndex = 1;
}
}
const int pageSize = 2;
long totalCount;
long totalPageCount; 
IEnumerable<CarComment> list = dal.GetList(pageIndex, pageSize, out totalPageCount, out totalCount, "CarId=" + id);
var commentIPagedList = new StaticPagedList<CarComment>(list, pageIndex, pageSize, Convert.ToInt32(totalCount));
#endregion
//转成Json格式
var strResult = "{\"pageCount\":" + commentIPagedList.PageCount + ",\"CurrentPage\":" + commentIPagedList.PageNumber + ",\"list\":" + JsonConvert.SerializeObject(list) + "}"; 
return Json(strResult, JsonRequestBehavior.AllowGet);
}

js代码

<script type="text/javascript">
$(document).ready(function() { 
var carId = 1;
$.ajax({
url: "/car/Comment",
datatype:'json',
type: "Post",
data: "id=" + carId,
success: function(data) { 
if (data!=null) { 
$.each(eval("(" + data + ")").list, function(index, item) { //遍历返回的json 
$("#list").append('<table>');
$("#list").append('<tr>');
$("#list").append('<td>评论者</td>');
$("#list").append('<td>'+item.UserProfileId+'</td>');
$("#list").append('</tr>');
$("#list").append('<tr>');
$("#list").append('<td>内容</td>');
$("#list").append('<td>'+item.Content+'</td>');
$("#list").append('</tr>');
$("#list").append('</table>'); 
}); //添加select option 
$("#commentList").append('<div id="pager"><ul id="page"></ul></div>');
var element = $("#page"); 
var pageCount = eval("(" + data + ")").pageCount; //取返回的Json数据中的pageCount(把返回数据转成object类型)
var currentPage = eval("(" + data + ")").CurrentPage; //去返回的Json数据中的CurrentPage
var options = { 
bootstrapMajorVersion: 3, //版本
currentPage: currentPage, //当前页数
numberOfPages: 5, //设置显示的页码数
totalPages:pageCount, //总页数
itemTexts: function(type, page, current) {
switch (type) {
case "first":
return "首页";
case "prev":
return "上一页";
case "next":
return "下一页";
case "last":
return "末页";
case "page":
return page;
}
//}
//pageUrl: function(type, page, current) {
// return "/car/Details?page=" + page;
},//点击事件
onPageClicked: function(event, originalEvent, type, page) { 
$.ajax({
url: "/car/Comment?id="+carId,
type: "Post",
data:"page="+ page,
success: function(data1) {
if (data1!=null) {
$("#list").html("");
$.each(eval("(" + data1 + ")").list, function (index, item) { //遍历返回的json 
$("#list").append('<table style="border: 1px solid #00ced1;width: 300px">');
$("#list").append('<tr>');
$("#list").append('<td>评论者</td>');
$("#list").append('<td>'+item.UserProfileId+'</td>');
$("#list").append('</tr>');
$("#list").append('<tr>');
$("#list").append('<td>内容</td>');
$("#list").append('<td>'+item.Content+'</td>');
$("#list").append('</tr>');
$("#list").append('</table>'); 
}); 
}
}
});
}
};
element.bootstrapPaginator(options);
}
}
});
});

以上所述是小编给大家介绍的基于BootStrap实现局部刷新分页,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
从jQuery.camelCase()学习string.replace() 函数学习
Sep 13 Javascript
基于jquery的放大镜效果
May 30 Javascript
JavaScript通过RegExp实现客户端验证处理程序
May 07 Javascript
js confirm()方法的使用方法实例
Jul 13 Javascript
jQuery判断数组是否包含了指定的元素
Mar 10 Javascript
js下拉选择框与输入框联动实现添加选中值到输入框的方法
Aug 17 Javascript
JS实现获取键盘按下的按键并显示在页面上的方法
Nov 04 Javascript
基于javascript制作微信聊天面板
Aug 09 Javascript
js 开发之autocomplete=&quot;off&quot;在chrom中失效的解决办法
Sep 28 Javascript
Vue波纹按钮组件制作
Apr 30 Javascript
Vue动画事件详解及过渡动画实例
Feb 09 Javascript
如何在vue项目中嵌入jsp页面的方法(2种)
Feb 06 Javascript
js智能获取浏览器版本UA信息的方法
Aug 08 #Javascript
jQuery.ajax 跨域请求webapi设置headers的解决方案
Aug 08 #Javascript
一个超简单的jQuery回调函数例子(分享)
Aug 08 #Javascript
Bootstrap Table服务器分页与在线编辑应用总结
Aug 08 #Javascript
使用jQuery5分钟快速搞定双色表格的简单实例
Aug 08 #Javascript
BootStrap Table 分页后重新搜索问题的解决办法
Aug 08 #Javascript
用js读写cookie的简单方法(推荐)
Aug 08 #Javascript
You might like
德劲1104的电路分析与改良
2021/03/01 无线电
CI(CodeIgniter)模型用法实例分析
2016/01/20 PHP
PHP.vs.JAVA
2016/04/29 PHP
php简单统计中文个数的方法
2016/09/30 PHP
thinkphp 验证码 的使用小结
2017/05/07 PHP
jQuery实现原理的模拟代码 -6 代码下载
2010/08/16 Javascript
JavaScript中具名函数的多种调用方式总结
2014/11/08 Javascript
jQuery中outerHeight()方法用法实例
2015/01/19 Javascript
如何用jQuery实现ASP.NET GridView折叠伸展效果
2015/09/26 Javascript
探讨:JavaScript ECAMScript5 新特性之get/set访问器
2016/05/05 Javascript
vue2.0结合Element实现select动态控制input禁用实例
2017/05/12 Javascript
Node.js 实现简单的接口服务器的实例代码
2017/05/23 Javascript
JavaScript基本语法_动力节点Java学院整理
2017/06/26 Javascript
Javascript实现时间倒计时效果
2017/07/15 Javascript
vue使用axios跨域请求数据问题详解
2017/10/18 Javascript
AngularJS实现的根据数量与单价计算总价功能示例
2017/12/26 Javascript
使用electron将vue-cli项目打包成exe的方法
2018/09/29 Javascript
巧妙运用v-model实现父子组件传值的方法示例
2019/04/07 Javascript
详解 微信小程序开发框架(MINA)
2019/05/17 Javascript
Vue.js下拉菜单组件使用方法详解
2019/10/19 Javascript
JS深入学习之数组对象排序操作示例
2020/05/01 Javascript
利用Python的Flask框架来构建一个简单的数字商品支付解决方案
2015/03/31 Python
python使用multiprocessing模块实现带回调函数的异步调用方法
2015/04/18 Python
使用Python对Access读写操作
2017/03/30 Python
Python Pywavelet 小波阈值实例
2019/01/09 Python
python实现飞机大战小游戏
2019/11/08 Python
Python中join()函数多种操作代码实例
2020/01/13 Python
Python根据指定文件生成XML的方法
2020/06/29 Python
HTML5学习笔记之html5与传统html区别
2016/01/06 HTML / CSS
野兽派官方旗舰店:THE BEAST 野兽派
2016/08/05 全球购物
美国高品质个性化珠宝销售网站:Jewlr
2018/05/03 全球购物
英国最大的天然和有机产品在线零售商之一:Big Green Smile
2020/05/06 全球购物
公司市场部岗位职责
2013/12/02 职场文书
机械专业应届生求职信
2013/12/12 职场文书
会计专业求职信范文
2014/03/16 职场文书
2014年数学教研组工作总结
2014/12/06 职场文书