基于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 相关文章推荐
使用js获取QueryString的方法小结
Feb 28 Javascript
兼容IE、FireFox、Chrome等浏览器的xml处理函数js代码
Nov 30 Javascript
JS delegate与live浅析
Dec 21 Javascript
在Ubuntu上安装最新版本的Node.js
Jul 14 Javascript
jQuery右侧选项卡焦点图片轮播特效代码分享
Sep 05 Javascript
js实现可键盘控制的简单抽奖程序
Jul 13 Javascript
jQuery自定义组件(导入组件)
Nov 08 Javascript
微信小程序实现顶部普通选项卡效果(非swiper)
Jun 19 Javascript
详解Angular中通过$location获取地址栏的参数
Aug 02 Javascript
Vue 技巧之控制父类的 slot
Feb 24 Javascript
angular组件间传值测试的方法详解
May 07 Javascript
关于vue3默认把所有onSomething当作v-on事件绑定的思考
May 15 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
ADODB的数据库封包程序库
2006/12/31 PHP
解析php下载远程图片函数 可伪造来路
2013/06/25 PHP
关于php循环跳出的问题
2013/07/01 PHP
php接口实现拖拽排序功能
2018/04/23 PHP
laravel框架查询数据集转为数组的两种方法
2019/10/10 PHP
动态修改DOM 里面的 id 属性的弊端分析
2008/09/03 Javascript
jquery固定底网站底部菜单效果
2013/08/13 Javascript
javascript处理表单示例(javascript提交表单)
2014/04/28 Javascript
一个简单的jquery进度条示例
2014/04/28 Javascript
js构造函数、索引数组和属性的实现方式和使用
2014/11/16 Javascript
JavaScript函数作用域链分析
2015/02/13 Javascript
原生的强大DOM选择器querySelector介绍
2016/12/21 Javascript
微信小程序 共用变量值的实现
2017/07/12 Javascript
基于Datatables跳转到指定页的简单实例
2017/11/09 Javascript
jQuery实现简单聊天室
2020/02/08 jQuery
小程序实现背景音乐播放和暂停
2020/06/19 Javascript
Vue router传递参数并解决刷新页面参数丢失问题
2020/12/02 Vue.js
Python判断操作系统类型代码分享
2014/11/22 Python
Python中的迭代器与生成器高级用法解析
2016/06/28 Python
基于python 字符编码的理解
2017/09/02 Python
Python wxpython模块响应鼠标拖动事件操作示例
2018/08/23 Python
python实现简易数码时钟
2021/02/19 Python
用python打印1~20的整数实例讲解
2019/07/01 Python
Python编写带选项的命令行程序方法
2019/08/13 Python
Python学习笔记之For循环用法详解
2019/08/14 Python
Python Pandas对缺失值的处理方法
2019/09/27 Python
django rest framework serializer返回时间自动格式化方法
2020/03/31 Python
keras 多任务多loss实例
2020/06/22 Python
python中子类与父类的关系基础知识点
2021/02/02 Python
ziaja齐叶雅官方海外旗舰店:来自波兰的天然护肤品牌
2017/01/02 全球购物
荷兰和比利时时尚鞋店:Van Dalen
2018/04/23 全球购物
老人祝寿主持词
2014/03/28 职场文书
2014年教学工作总结
2014/11/13 职场文书
导游词之舟山普陀山
2019/11/06 职场文书
一小时迅速入门Mybatis之bind与多数据源支持 Java API
2021/09/15 Javascript
详解Python+OpenCV绘制灰度直方图
2022/03/22 Python