jquery【插件】 pagination使用

来源：互联网发布：大数据人工智能的影响编辑：程序博客网时间：2024/05/22 06:42

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