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中判断页面关闭、页面刷新的实现代码
Aug 27 Javascript
浅析node.js中close事件
Nov 26 Javascript
详解javascript传统方法实现异步校验
Jan 22 Javascript
谈谈对JavaScript原生拖放的深入理解
Sep 20 Javascript
JavaScript实现动态增删表格的方法
Mar 09 Javascript
详解webpack2+node+react+babel实现热加载(hmr)
Aug 24 Javascript
详解babel升级到7.X采坑总结
May 12 Javascript
webpack4手动搭建Vue开发环境实现todoList项目的方法
May 16 Javascript
微信小程序实现图片上传
May 23 Javascript
解决使用layui对select append元素无效或者未及时更新的问题
Sep 18 Javascript
js中位数不足自动补位扩展padLeft、padRight实现代码
Apr 06 Javascript
javascript中call,apply,bind的区别详解
Dec 11 Javascript
完美解决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
PHP简单系统数据添加以及数据删除模块源文件下载
2008/06/07 PHP
PHP中strpos、strstr和stripos、stristr函数分析
2016/06/11 PHP
[原创]smarty简单模板变量输出方法
2016/07/09 PHP
form自动提交实例讲解
2017/07/10 PHP
php记录搜索引擎爬行记录的实现代码
2018/03/02 PHP
PHP实现根据数组某个键值大小进行排序的方法
2018/03/13 PHP
tp5(thinkPHP5)框架连接数据库的方法示例
2018/12/24 PHP
js静态方法与实例方法分析
2011/07/04 Javascript
jQuery事件绑定.on()简要概述及应用
2013/02/07 Javascript
jQuery实现的一个自定义Placeholder属性插件
2014/08/11 Javascript
js判断一个字符串是否包含一个子串的方法
2015/01/26 Javascript
javascript通过元素id和name直接取得元素的方法
2015/04/28 Javascript
js实现简单div拖拽功能实例
2015/05/12 Javascript
javascript瀑布流布局实现方法详解
2016/02/17 Javascript
总结JavaScript设计模式编程中的享元模式使用
2016/05/21 Javascript
jQuery绑定自定义事件的魔法升级版
2016/06/30 Javascript
利用Vue.js指令实现全选功能
2016/09/08 Javascript
jQuery事件对象总结
2016/10/17 Javascript
AngularJS指令用法详解
2016/11/02 Javascript
JS简单实现点击跳转登陆邮箱功能的方法
2017/10/31 Javascript
在react中使用vuex的示例代码
2018/07/30 Javascript
在移动端使用vue-router和keep-alive的方法示例
2018/12/02 Javascript
python实现的文件夹清理程序分享
2014/11/22 Python
django之session与分页(实例讲解)
2017/11/13 Python
Python 实现字符串中指定位置插入一个字符
2018/05/02 Python
不管你的Python报什么错,用这个模块就能正常运行
2018/09/14 Python
Django项目主urls导入应用中views的红线问题解决
2019/08/10 Python
Python全面分析系统的时域特性和频率域特性
2020/02/26 Python
浅谈Keras的Sequential与PyTorch的Sequential的区别
2020/06/17 Python
香港草莓网土耳其网站:Strawberrynet TR
2017/03/02 全球购物
创先争优标语
2014/06/27 职场文书
集团财务总监岗位职责
2015/04/03 职场文书
html+css实现分层金字塔的实例
2021/06/02 HTML / CSS
MySql 8.0及对应驱动包匹配的注意点说明
2021/06/23 MySQL
详解Mysql事务并发(脏读、不可重复读、幻读)
2022/04/29 MySQL
CSS子盒子水平和垂直居中的五种方法
2022/07/23 HTML / CSS