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 相关文章推荐
js函数返回多个返回值的示例代码
Nov 05 Javascript
中止javascript执行的方法
Feb 14 Javascript
js实现使用鼠标拖拽切换图片的方法
May 04 Javascript
jquery动态遍历Json对象的属性和值的方法
Jul 27 Javascript
JavaScript中this的用法及this在不同应用场景的作用解析
Apr 13 Javascript
vue项目常用组件和框架结构介绍
Dec 24 Javascript
Vue项目全局配置微信分享思路详解
May 04 Javascript
JS中使用new Option()实现时间联动效果
Dec 10 Javascript
vue学习笔记之给组件绑定原生事件操作示例
Feb 27 Javascript
vue实现简单瀑布流布局
May 28 Javascript
node.js如何根据URL返回指定的图片详解
Oct 21 Javascript
node.js文件的复制、创建文件夹等相关操作
Feb 05 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中Enum(枚举)用法实例详解
2015/12/07 PHP
WordPress开发中自定义菜单的相关PHP函数使用简介
2016/01/05 PHP
Laravel5框架自定义错误页面配置操作示例
2019/04/17 PHP
DLL+ ActiveX控件+WEB页面调用例子
2010/08/07 Javascript
JavaScript中的typeof操作符用法实例
2014/04/05 Javascript
jQuery中对未来的元素绑定事件用bind、live or on
2014/04/17 Javascript
Javascript 读取操作Sql中的Xml字段
2014/10/09 Javascript
对Web开发中前端框架与前端类库的一些思考
2015/03/27 Javascript
jQuery版本升级踩坑大全
2016/01/12 Javascript
jQuery EasyUI中DataGird动态生成列的方法
2016/04/05 Javascript
js判断所有表单项不为空则提交表单的实现方法
2016/09/09 Javascript
用move.js库实现百叶窗特效
2017/02/08 Javascript
jQuery条件分页 代替离线查询(附代码)
2017/08/17 jQuery
Vue波纹按钮组件制作
2018/04/30 Javascript
webpack里使用jquery.mCustomScrollbar插件的方法
2018/05/30 jQuery
浅谈js闭包理解
2019/03/28 Javascript
postman自定义函数实现 时间函数的思路详解
2019/04/17 Javascript
ES6基础之数组和对象的拓展实例详解
2019/08/22 Javascript
微信小程序页面调用自定义组件内的事件详解
2019/09/12 Javascript
基于JavaScript获取base64图片大小
2019/10/18 Javascript
python中enumerate的用法实例解析
2014/08/18 Python
Python是编译运行的验证方法
2015/01/30 Python
基于Django模板中的数字自增(详解)
2017/09/05 Python
Python实现的绘制三维双螺旋线图形功能示例
2018/06/23 Python
PyQt5中QTableWidget如何弹出菜单的示例代码
2020/02/23 Python
详解python 支持向量机(SVM)算法
2020/09/18 Python
使用Python提取文本中含有特定字符串的方法示例
2020/12/09 Python
python 基于selenium实现鼠标拖拽功能
2020/12/24 Python
css3实现简单的白云飘动背景特效
2020/10/28 HTML / CSS
英国的屈臣氏:Boots博姿
2017/12/23 全球购物
在校学生职业规划范文
2014/01/08 职场文书
大学生最新职业生涯规划书范文
2014/01/12 职场文书
电焊工岗位职责
2014/03/06 职场文书
公司总经理任命书
2014/06/05 职场文书
2016年清明节红领巾广播稿
2015/12/17 职场文书
Python中json.load()和json.loads()有哪些区别
2021/06/07 Python