ajax pagination 布局刷新
<!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 布局刷新的更多相关文章
- 使用ajax实现无刷新改变页面内容
如何使用ajax实现无刷新改变页面内容(也就是ajax异步请求刷新页面),下面通过一个小demo说明一下,前端页面代码如下所示 1 <%@ Page Language="C#" ...
- 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 ...
- jsp+ajax实现无刷新
jsp+ajax实现无刷新,鼠标离开文本框即验证用户名 jsp+ajax实现无刷新,鼠标离开文本框即验证用户名(本功能多用于注册) input.jsp(表单提交页面): %@ page content ...
- window.history.pushState与ajax实现无刷新更新页面url
ajax能无刷新更新数据,但是不能更新url HTML5的新API: window.history.pushState, window.history.replaceState 用户操作history ...
- Ajax 实现无刷新分页
Ajax 实现无刷新分页
- Ajax 实现无刷新页面
注意:如本文所用,在前面的文章库的数目可以在源代码中找到,我将指示在文本,其中链路,为了缩短制品的长度,阅读由此带来的不便.乞求被原谅. 评论文章 Ajax 实现无刷新页面.其原理.代码库.代码. 这 ...
- Ajax 异步局部刷新
Ajax 异步局部刷新 AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术. 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页 ...
- PHP+Ajax+plupload无刷新上传头像代码
很简单的一款PHP+Ajax+plupload无刷新上传头像代码,兼容性很好,可以直接拿来用.你可以自定义各种类型的文件.本实例中只能上传"jpg", "png" ...
- Ajax定时局部刷新
1.局部刷新一个地方 function refreshOnTime(){ $.ajax({ //配置 }); //7秒后重复执行该函数 setInterval('refreshOnTime', 700 ...
随机推荐
- tyvj1097 mm不哭
背景 Bless all rp++.. 描述 在一个数轴上,有n个MM(绝非恐龙!)在哭泣(5555~一直哭). tcboy也在这个数轴上,并恰好看到了这一幕,由于每个MM哭都会让tcboy损失一定的 ...
- UIScrollView的缩放原理
当用户在UIScrollView身上使用捏合手势时,UIScrollView会给代理发送一条消息,询问代理究竟要缩放自己内部的哪一个子控件(哪一块内容) 当用户在UIScrollView身上使用捏合手 ...
- PHP大数(浮点数)取余
一般我们进行取余运算第一个想到的就是用百分号%,但当除数是个很大的数值,超出了int范围时,这样取余就不准确了. php大数(浮点数)取余函数 /** * php大数取余 * * @param int ...
- 第2月第25天 BlocksKit
1.blockskit https://github.com/zwaldowski/BlocksKit bk_showAlertViewWithTitle 2.toast +(void)showToa ...
- MVC项目使用easyui的filebox控件上传文件
开发环境:WIN10+IE11,浏览器请使用IE10或以上版本 开发技术框架MVC4+JQuery Easyui+knockoutjs 效果为弹出小窗体,如下图 1.前端cshtml文件代码(只包含文 ...
- Qt应用程序图标设置
Qt应用程序图标设置 本文仅仅适用于windows下,linux等不适用. 下面说的图标,指的是程序文件的图标,而不是托盘图标或者说运行时任务栏的图标(任务栏和程序窗口的图标在windows/linu ...
- canvas案例——画时钟
基本思路,先画一个200半径的圆 ctx.arc(250,250,200,0,2*Math.PI); 然后再画时分刻度,可以先利用translate变化坐标到圆的中心点,然后再通过rotate旋转 / ...
- 基于winner 滤波平稳降噪效果
https://en.wikipedia.org/wiki/Wiener_filter Wiener filter solutions The Wiener filter problem has so ...
- 正则表达式工具RegexBuddy使用教程
1. 界面介绍 (1)初始界面选项介绍 (2)如何使用匹配 (3)如何使用正则替换 (4)如何使用Debug http://www.cnblogs.com/tsql/p/5860893.html
- webstormkey
webStorm : UserName:William ===== LICENSE BEGIN ===== 45550-12042010 00001SzFN0n1bPII7FnAxnt0DDOPJA ...