jquery_ajax_分页

源码下载地址：http://download.csdn.net/detail/e421083458/4902849

1，下载3个文件

<script src="../jquery/jquery-1.7.1.js" type="text/javascript"></script>
<script src="../jquery/pagination/jquery.pagination.js" type="text/javascript"></script>
<link rel="stylesheet" href="../jquery/pagination/pagination.css" type="text/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是样式，可以独立出来。也即可以使用很多种不同的样式修饰，不必是给出的那一个。