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

2024-05-01 07:09:35

本文实例为大家分享了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分页功能汇总进行学习。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

jQuery插件分享之分页插件jqPagination

使用方法: 添加 jQuery 类库.jqPagination 插件的 JS 和 CSS 文件复制代码代码如下: <link rel="stylesheet" href="jqpagination.css"/><script src="jquery-1.6.2.min.js"></script><script src="jquery.jqpagination.min.js">
Jquery 分页插件之Jquery Pagination

实用jQuery分页特效插件jquery.pagination.js,基于jQuery实现,可根据pageselectCallback函数callback调用通过ajax调用动态数据,目前的方法是生成JSON数据到JS文件,调用的数据是JSON格式数据,缺点是数据是一次性读出来的,效率会差些,插件支持众多参数的自定义配置功能,还是很不错的,大家可以根据自己的想法进行改进. 有同学问道jquery的简单分页插件,原来有同事写过一个简单[Javascript 使用回调函数的自定义分页插件--自带样式
asp.net jquery无刷新分页插件(jquery.pagination.js)

采用Jquery无刷新分页插件jquery.pagination.js 实现无刷新分页效果友情提示:本示例Handler中采用StringBuilder的append方法追加HTML,小数据量可以,但是大数据或是布局常变,建议返回JSON格式的数据,性能和灵活性更好! 1.插件参数列表 2.页面内容: 复制代码代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Defaul
Ajax分页插件Pagination从前台jQuery到后端java总结

困惑了我一段时间的网页分页,今天特地整理了一下我完成不久的项目.下面我要分享下我这个项目的分页代码,前后端通吃.希望前辈多多指教. 一.效果图下面我先上网页前台和管理端的部分分页效果图,他们用的是一套代码. 二.上代码前的一些知识点此jQuery插件为Ajax分页插件,一次性加载,故分页切换时无刷新与延迟,如果数据量较大不建议用此方法,因为加载会比较慢. 三.前台代码部分 var pageSize =6; //每页显示多少条记录 var total; //总共多少记录 $(function(
jQuery Pagination Ajax分页插件(分页切换时无刷新与延迟)中文翻译版

原项目地址:http://plugins.jquery.com/project/pagination版本:v1.2源文件下载:英文原版或中文翻译修改版一.相关demo 基本demo页面 Ajax demo页面参数可编辑demo页面二.简介与说明此jQuery插件为Ajax分页插件,一次性加载,故分页切换时无刷新与延迟,如果数据量较大不建议用此方法,因为加载会比较慢. 原插件CSS不太合理,使用浮动,故无法方便实现左右方向的定位,且未清除浮动,在中文修改版中我对其进行了优化,使其支持tex
jQuery Pagination分页插件_动力节点Java学院整理

插件简介 此jQuery插件为Ajax分页插件,一次性加载,故分页切换时无刷新与延迟,如果数据量较大不建议用此方法,因为加载会比较慢. 原插件CSS不太合理,使用浮动,故无法方便实现左右方向的定位,且未清除浮动,在中文修改版中我对其进行了优化,使其支持text-align的定位. 使用方法跟一般的jQuery插件一样,此插件使用也很简单便捷.方法是pagination,例如$("#page").pagination(100); 参数参数名描述参数值 maxentries 总
jQuery Pagination分页插件使用方法详解

本文实例为大家分享了jQuery Pagination分页插件的具体代码,供大家参考,具体内容如下一.引用CSS和JS: <link href="/Content/Plugins/jQuery.Pagination_v2.2/pagination.css" rel="external nofollow" rel="stylesheet" type="text/css" /> <script src=&quo
Bootstrap Paginator分页插件使用方法详解

最近做的asp.netMVC项目中需要对数据列表进行分类,这个本来就是基于bootstrap开发的后台,因此也就想着bootstrap是否有分页插件呢,或者说是基于jquery支持的分页功能,这样整体的网站后台风格便能够统一,又不用自己去写一套分页的功能. 首先便是要下载Bootstrap Paginator了,下载地址:Bootstrap Paginator分页插件首先视图的上面应该需要引入js和css文件,主要有三个文件,分别是bootstrap的css,jquery以及Paginator
laypage.js分页插件使用方法详解

本文实例为大家分享了laypage.js分页插件的使用方法,供大家参考,具体内容如下 1.引用依赖 a.layui.js b.layui.css c.laypage.js 2.HTML代码部分 <div id="page-nav" style="float: right"></div> 3.js代码部分 <script> $(function(){ //加载菜单列表数据 menuPageData(); }); function m
Mybatis分页插件使用方法详解

本文实例为大家分享了Mybatis分页插件使用的具体代码,供大家参考,具体内容如下 1.分页插件简介 pagehelper源码都说这是史上最好用的分页插件,支持多种数据库以多种方式分页. 2.分页插件的使用 2.1导入maven依赖 <dependency> <groupId>com.github.pagehelper</groupId> <artifactId>pagehelper</artifactId> <version>最新
jQuery弹框插件使用方法详解

本文实例为大家分享了jQuery弹框插件使用的具体代码,供大家参考,具体内容如下要点 : 1.匿名函数包裹器(可搜索一下) 2.面向对象的编程 3.插件的要素(扩展jQuery本身的方法,$.extend : 给jQuery对象添加方法,对jQuery.prototype进行扩展 :添加一个函数到jQuery.fn(jQuery.prototype)对象,该函数的名称就是你的插件名称) 4.代码部分: 注意html中 a 标签的内容 , js中格式的注意 , css的话嫌麻烦你可以自己定义 5
jquery pagination分页插件使用详解（后台struts2）

页面是用的纯css的效果,没有使用bootstrap的框架,不然自带的分页是挺好用的,就不用麻烦了这边使用了jquery pagination分页插件来实现这个功能的,这边后台用的是struts2的框架,ssh的,jquery返回json数据,然后循环拼接table输入到页面,这个分页插件使用起来感觉还是比较简单,代码编辑比较少,也有样式可以选择,但是那样要导入pagination.css在div中的class修改样式不导入的话就只有默认样式,这边样式也没有调节,不是很美观,功能实现了,干货:
MyBatisPlus PaginationInterceptor分页插件的使用详解

实现配置插件来到项目下的applicationContext.xml中配置sqlSessionFactoryBean的地方.  <bean id="sqlSessionFac
Mybatis分页插件的实例详解

Mybatis分页插件的实例详解 1.前言: 我们知道,在MySQL中,分页的sql是使用limit来做,如果我们自己写sql,那分页肯定是没有任何问题的.但是一旦model多了起来,复杂了起来,我们很自然的想到使用mybatis的逆向工程来生成相应的po和mapper,但是同时也会带来弊端,比如这里的分页问题就不好解决了. 可能有人会说,我可以修改生成的文件,没错,这是可行的,但是一般我们通过逆向工程生成的文件,都不会去动它,所以这个时候,就需要使用分页插件来解决了. 如果你也在用Mybati
jQuery表单插件ajaxForm实例详解

前端时间写项目用到了ajaxForm这个插件,可以用它提交表单和上传图片,听起来和正常的form表单提交没什么区别,只不过是ajax提交,无需刷新页面,如此可以增加用户体验度. 引入两个文件,PS:必须 <script type="text/javascript" src="http://img9.tongzhuo100.com/js/jquery-1.7.2.min.js"></script> <script type="t
MyBatisPlus+Lombok实现分页功能的方法详解

目录一.Lombok 1.添加Lombok依赖 2.安装Lombok插件 3.模型类上添加注解二.分页功能 1.调用方法传入参数获取返回值 2.设置分页拦截器 3.运行测试程序一.Lombok 从上一篇博客可看出,DAO接口类的编写变得简单,反过来看模型,编写还需要(私有属性.setter...getter...方法.toString方法.构造函数等内容),对于模型类有什么优化方法,可以用Lombok. 概念:Lombok,一个Java类库,提供了一组注解,简化POJO实体类开发. 使用步

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

相关推荐

随机推荐