jQuery Pagination分页插件使用方法详解


Posted in Javascript onFebruary 28, 2017

本文实例为大家分享了jQuery Pagination分页插件的具体代码,供大家参考,具体内容如下

一、引用CSS和JS:

<link href="/Content/Plugins/jQuery.Pagination_v2.2/pagination.css" rel="external nofollow" rel="stylesheet"
 type="text/css" />
<script src="/Content/Plugins/jQuery.Pagination_v2.2/jquery.pagination.js" type="text/javascript"></script>

二、HTML:

<div id="Pagination" class="flickr" style="margin-top: 10px; margin-left: 10px;">
</div>

三、JS:

$(function () {
 var total = parseInt("@(ViewBag.total)");
 var page = parseInt("@(ViewBag.page)") - 1;
 var pageSize = parseInt("@(ViewBag.pageSize)");

 $("#Pagination").pagination(total, {
 callback: function (page_id) {
  window.location = "BoardList?page=" + page_id + "&pageSize=" + this.items_per_page;
 }, //PageCallback() 为翻页调用次函数。
 prev_text: " 上一页",
 next_text: "下一页 ",
 items_per_page: 10, //每页的数据个数
 num_display_entries: 1, //两侧首尾分页条目数
 current_page: page, //当前页码
 num_edge_entries: 11 //连续分页主体部分分页条目数
 });
});

四、后台代码:

public ActionResult BoardList()
{
 PagerModel pager = new PagerModel();
 if (Request["page"] == null)
 {
 pager.page = 1;
 pager.rows = 10;
 pager.sort = "Id";
 pager.order = "desc";
 }
 else
 {
 pager.page = int.Parse(Request["page"]) + 1;
 pager.rows = int.Parse(Request["pageSize"]);
 pager.sort = "Id";
 pager.order = "desc";
 }

 boardManageService.GetList(ref pager);
 List<BoardModel> boardList = pager.result as List<BoardModel>;
 ViewData["BoardModelList"] = boardList;
 ViewBag.page = pager.page;
 ViewBag.total = pager.totalRows;
 ViewBag.pageSize = pager.rows;

 return View();
}
#endregion

更多精彩内容请点击:jquery分页功能汇总进行学习。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript针对DOM的应用实例(一)
Apr 15 Javascript
使用JavaScript开发IE浏览器本地插件实例
Feb 18 Javascript
JavaScript判断是否为数字的4种方法及效率比较
Apr 01 Javascript
浅谈javascript实现八大排序
Apr 27 Javascript
JS中artdialog弹出框控件之提交表单思路详解
Apr 18 Javascript
jQuery插件Flexslider实现图片轮播、图文结合滑动切换效果
Apr 16 Javascript
form表单转Json提交的方法(推荐)
Sep 23 Javascript
jquery编写日期选择器
Mar 16 Javascript
angularJs select绑定的model取不到值的解决方法
Oct 08 Javascript
Vue CLI项目 axios模块前后端交互的使用(类似ajax提交)
Sep 01 Javascript
ES6函数和数组用法实例分析
May 23 Javascript
JS+JQuery实现无缝连接轮播图
Dec 30 jQuery
完美解决input[type=number]无法显示非数字字符的问题
Feb 28 #Javascript
canvas红包照片实例分享
Feb 28 #Javascript
详解本地Node.js服务器作为api服务器的解决办法
Feb 28 #Javascript
jquery操作select取值赋值与设置选中实例
Feb 28 #Javascript
JS使用面向对象技术实现的tab选项卡效果示例
Feb 28 #Javascript
基于cookie实现zTree树刷新后展开状态不变
Feb 28 #Javascript
js中Number数字数值运算后值不对的解决方法
Feb 28 #Javascript
You might like
phpExcel中文帮助手册之常用功能指南
2014/08/18 PHP
php实现删除空目录的方法
2015/03/16 PHP
php使用socket post数据到其它web服务器的方法
2015/06/02 PHP
PHP基于socket实现的简单客户端和服务端通讯功能示例
2017/07/10 PHP
浅谈php调用python文件
2019/03/29 PHP
PHP判断函数是否被定义的方法
2019/06/21 PHP
php获取是星期几的的一些常用姿势
2019/12/15 PHP
JS打印gridview实现原理及代码
2013/02/05 Javascript
JS分页效果示例
2013/10/11 Javascript
jQuery 实现侧边浮动导航菜单效果
2014/12/26 Javascript
jQuery实现长按按钮触发事件的方法
2015/02/02 Javascript
很棒的Bootstrap选项卡切换效果
2016/07/01 Javascript
基于bootstrap实现多个下拉框同时搜索功能
2017/07/19 Javascript
js中bool值的转换及“&amp;&amp;”、“||”、 “!!”详解
2017/12/21 Javascript
vue中动态绑定表单元素的属性方法
2018/02/23 Javascript
json对象及数组键值的深度大小写转换问题详解
2018/03/30 Javascript
ES6 中可以提升幸福度的小功能
2018/08/06 Javascript
vue项目移动端实现ip输入框问题
2019/03/19 Javascript
如何使用JavaScript检测空闲的浏览器选项卡
2020/05/28 Javascript
[01:08:10]2014 DOTA2国际邀请赛中国区预选赛 SPD-GAMING VS LGD-CDEC
2014/05/22 DOTA
[00:47]DOTA2荣耀之路6:玩不了啦!
2018/05/30 DOTA
详解Python的迭代器、生成器以及相关的itertools包
2015/04/02 Python
python单例模式实例分析
2015/04/08 Python
python中logging包的使用总结
2018/02/28 Python
详解如何减少python内存的消耗
2019/08/09 Python
使用Pandas的Series方法绘制图像教程
2019/12/04 Python
使用python实现希尔、计数、基数基础排序的代码
2019/12/25 Python
Python任务调度利器之APScheduler详解
2020/04/02 Python
用python监控服务器的cpu,磁盘空间,内存,超过邮件报警
2021/01/29 Python
Aerosoles爱柔仕官网:美国舒软女鞋品牌
2017/07/17 全球购物
汽车销售顾问求职自荐信
2014/01/01 职场文书
安全协议书
2014/04/23 职场文书
党员群众路线整改措施及今后努力方向
2014/10/28 职场文书
2015年招商引资工作总结
2015/04/25 职场文书
2019年励志签名:致拼搏路上的自己
2019/10/11 职场文书
vue项目proxyTable配置和部署服务器
2022/04/14 Vue.js