jquery【插件】 pagination使用

作者：zccst

1，下载3个文件

分别为：jquery-1.7.1.js、jquery.pagination.js、pagination.css

//详见附件

2，准备好服务器端返回结果

主要代码如下：

Php代码



$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代码（核心）

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

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是样式，可以独立出来。也即可以使用很多种不同的样式修饰，不必是给出的那一个。