<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="pagination.css" />
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.pagination.js"></script>

<!-- Load data to paginate -->
<script type="text/javascript" src="members.js"></script>

<script type="text/javascript">

/**
* @param {int}page_index New Page index
* @param {jQuery} jq the container with the pagination links as a jQuery object
*/
function pageselectCallback(page_index, jq){

var items_per_page = 5;

var max_elem = Math.min((page_index+1) * items_per_page, members.length);

var newcontent = '';

// Iterate through a selection of the content and build an HTML string
for(var i=page_index*items_per_page;i<max_elem;i++)
{
newcontent += '<dt>' + members[i][0] + '</dt>';
newcontent += '<dd class="state">' + members[i][2] + '</dd>';
newcontent += '<dd class="party">' + members[i][3] + '</dd>';
}

$('#Searchresult').html(newcontent);

return false;
};

$(document).ready(function(){

$("#Pagination").pagination(303, {
prev_text:'上一页',
next_text:'下一页',
num_edge_entries:2,
items_per_page: 5,
num_display_entries: 10,
callback: pageselectCallback
});

});

</script>

<title>Pagination</title>
</head>
<body>
<div id="content">
<h3>List of former </h3>
<dl id="Searchresult">
<dt>Something error ...</dt>
</dl>

<div id="Pagination" class="pagination">
</div>
</div>
</body>
</html>

下面是页面效果：

参数说明:

参数名 描述 参数值
maxentries 总条目数                           必选参数，整数
items_per_page 每页显示的条目数                       可选参数，默认是10
num_display_entries 连续分页主体部分显示的分页条目数                       可选参数，默认是10
current_page 当前选中的页面                      可选参数，默认是0，表示第1页
num_edge_entries 两侧显示的首尾分页的条目数                      可选参数，默认是0
link_to 分页的链接                  字符串，可选参数，默认是"#"
prev_text “前一页”分页按钮上显示的文字                 字符串参数，可选，默认是"Prev"
next_text “下一页”分页按钮上显示的文字                字符串参数，可选，默认是"Next"
ellipse_text 省略的页数用什么文字表示                   可选字符串参数，默认是"…"
prev_show_always 是否显示“前一页”分页按钮           布尔型，可选参数，默认为true，即显示“前一页”按钮
next_show_always 是否显示“下一页”分页按钮           布尔型，可选参数，默认为true，即显示“下一页”按钮
callback 回调函数              当点击链接的时候此函数被调用，此函数接受两个参数，新一页的id和pagination容器（一个DOM元素）。如果回调函数返回false，则pagination事件停止执行

样式效果展示：

demo链接如下：

http://files.cnblogs.com/xiexy/pagingnation.rar

到此为止，主要为自己做备忘，同时方便有需要的人。呵呵！

ajax pagination 布局刷新的更多相关文章

  1. 使用ajax实现无刷新改变页面内容

    如何使用ajax实现无刷新改变页面内容(也就是ajax异步请求刷新页面),下面通过一个小demo说明一下,前端页面代码如下所示 1 <%@ Page Language="C#" ...

  2. ASP.NET MVC WebGrid – Performing true AJAX pagination and sorting 【转】

    ASP.NET MVC WebGrid – Performing true AJAX pagination and sorting FEBRUARY 27, 2012 14 COMMENTS WebG ...

  3. jsp+ajax实现无刷新

    jsp+ajax实现无刷新,鼠标离开文本框即验证用户名 jsp+ajax实现无刷新,鼠标离开文本框即验证用户名(本功能多用于注册) input.jsp(表单提交页面): %@ page content ...

  4. window.history.pushState与ajax实现无刷新更新页面url

    ajax能无刷新更新数据,但是不能更新url HTML5的新API: window.history.pushState, window.history.replaceState 用户操作history ...

  5. Ajax 实现无刷新分页

    Ajax 实现无刷新分页

  6. Ajax 实现无刷新页面

    注意:如本文所用,在前面的文章库的数目可以在源代码中找到,我将指示在文本,其中链路,为了缩短制品的长度,阅读由此带来的不便.乞求被原谅. 评论文章 Ajax 实现无刷新页面.其原理.代码库.代码. 这 ...

  7. Ajax 异步局部刷新

    Ajax 异步局部刷新 AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术. 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页 ...

  8. PHP+Ajax+plupload无刷新上传头像代码

    很简单的一款PHP+Ajax+plupload无刷新上传头像代码,兼容性很好,可以直接拿来用.你可以自定义各种类型的文件.本实例中只能上传"jpg", "png" ...

  9. Ajax定时局部刷新

    1.局部刷新一个地方 function refreshOnTime(){ $.ajax({ //配置 }); //7秒后重复执行该函数 setInterval('refreshOnTime', 700 ...

随机推荐

  1. R语言爬虫初尝试-基于RVEST包学习

    注意:这文章是2月份写的,拉勾网早改版了,代码已经失效了,大家意思意思就好,主要看代码的使用方法吧.. 最近一直在用且有维护的另一个爬虫是KINDLE 特价书爬虫,blog地址见此: http://w ...

  2. Silicon C8051F340之GPIO口配置与使用

    一.背景: 很久前用过C8051,现在有相关需求需要重新使用C8051,然后发现一年前开发的相关经验都忘得 基本上差不多了.连最基本的GPIO口配置还得重新来看手册,所以有此文,做个记录,以备下次快速 ...

  3. 【荐】如何正确理解PHP之include，include_once，require，require_once等包含作用域

    我们为大家总结的PHP include作用域的问题包括:PHP include 变量作用域和函数.类的作用域等方面的问题.希望对大家有所帮助. 很多程序员在使用PHP语言进行实际编程时,通常只会关注P ...

  4. nginx + tomcat配置负载均衡

    目标:Nginx做为HttpServer,连接多个tomcat应用实例,进行负载均衡. 注:本例程以一台机器为例子,即同一台机器上装一个nginx和2个Tomcat且安装了JDK1.7. 1.安装Ng ...

  5. python基础一

    1.1 Python优点 1.简单.优雅.明确 2.强大的模块三方库 3.易移植 4.面向对象 5.可扩展(c\java\c#...) 1.2 Python缺点 1.代码不能加密 2.速度慢   1. ...

  6. connect 链接失败： 查找不到 signal

                提示错误是:   signal_index < 0 ;;     ----  故 connect返回false;              消除  connect  信号 ...

  7. Python3实现简单的爬虫功能

    python3简单实现一个爬去网站图片的小功能: 有时候想要下载自己喜欢的多个图片时,不需要一个个点击来下载,使用python脚本批量拉取,并保存到本地. 1. 首先找到自己要下载图片的url 2. ...

  8. .NET LINQ查询语法与方法语法

    LINQ 查询语法与方法语法      通过使用 C# 3.0 中引入的声明性查询语法,介绍性 LINQ 文档中的多数查询都被编写为查询表达式. 但是,.NET 公共语言运行时 (CLR) 本身并不具 ...

  9. Modbus总线CRC16效验算法C语言

    unsigned short CRC16_Modbus ( unsigned char *pdata, int len){ unsigned short crc=0xFFFF; int i, j; f ...

  10. iOS开发UI篇—CAlayer(创建图层)

    iOS开发UI篇—CAlayer(创建图层) 一.添加一个图层 添加图层的步骤: 1.创建layer 2.设置layer的属性(设置了颜色,bounds才能显示出来) 3.将layer添加到界面上(控 ...