首页 > 代码库 > ajax pagination 布局刷新

ajax pagination 布局刷新

2024-07-28 11:14:13   221人阅读

<!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="http://www.mamicode.com/pagination.css" />
<script type="text/javascript" src="http://www.mamicode.com/jquery.min.js"></script>
<script type="text/javascript" src="http://www.mamicode.com/jquery.pagination.js"></script>

<!-- Load data to paginate -->
<script type="text/javascript" src="http://www.mamicode.com/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 布局刷新


联系
我们