jquery pagination应用

jquery pagination使用
作者：zccst

1，下载3个文件
分别为：jquery-1.7.1.js、jquery.pagination.js、pagination.css
//详见附件


2，准备好服务器端返回结果
主要代码如下：

$members = array(array().......);  //详见附件
$total          = count($members);
$pageIndex      = $_POST['pageIndex'];
$items_per_page = $_POST['items_per_page'];

$result = array();
$start = $pageIndex * $items_per_page;
$end   = ($pageIndex+1) * $items_per_page;
if($end > $total){$end = $total;}
for($i = $start; $i < $end; $i++){
	$result[] = $members[$i];
}

print json_encode(array('total'=>$total,'result'=>$result));

3，前端js代码（核心）

var items_per_page = 3;
var page_index = 0;

function getDataList(index){
	var pageIndex = index;
	$.ajax({
		type: "POST",
		url: "members.php",
		data: "pageIndex="+pageIndex+'&items_per_page='+items_per_page,
		dataType: 'json',
		contentType: "application/x-www-form-urlencoded",
		success: function(msg){
			var total = msg.total;
			var html = '<table><tr><th>姓名</th><th>工作时间</th><th>籍贯</th><th>职务</th><th>生卒年</th><th>操作</th></tr>';
			$.each(msg.result,function(i,n){	
				html += '<tr><td>'+n[0]+'</td><td>'+n[1]+'</td><td>'+n[2]+'</td><td>'+n[3]+'</td><td>'+n[4]+'</td>'
				html += '<td><a href=#>删除</a></td></tr>';
			});
			html += '</table>';
			$('#Searchresult').html(html);
			
			//分页-只初始化一次
			if($("#Pagination").html().length == ''){
				$("#Pagination").pagination(total, {
					'items_per_page'      : items_per_page,
					'num_display_entries' : 10,
					'num_edge_entries'    : 2,
					'prev_text'           : "上一页",
					'next_text'           : "下一页",
					'callback'            : pageselectCallback
				});
			}
		}
	});
}


function pageselectCallback(page_index, jq){
	getDataList(page_index);
}

$(document).ready(function(){
	getDataList(page_index);
});

4，前端html

<dl id="Searchresult">
    <dt>Search Results will be inserted here ...</dt>
</dl>
<br style="clear:both;" />
<div id="Pagination" class="pagination"></div>
<br style="clear:both;" />

批注：
（1）jquery.js和jquery.pagination.js插件的加载有先后顺序，不能颠倒。特别是在复杂的页面中。
（2）jquery.pagination.js实现可以有很多种。不同的分页插件，使用时可能会有差别，所以最好有足够的js功底，读懂那些插件是如何实现，以及如何引用。
（3）pagination.css是样式，可以独立出来。也即可以使用很多种不同的样式修饰，不必是给出的那一个。