ajax分页

不刷新ajax分页

<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/jquery.pagination.js"></script>

配置参数：

//此demo通过Ajax加载分页元素
 var initPagination = function() {
   var num_entries = $("#hiddenresult div.result").length;
   // 创建分页
   $("#Pagination").pagination(num_entries, {
     num_edge_entries: 1, //边缘页数
     num_display_entries: 4, //主体页数
     callback: pageselectCallback,
     items_per_page: 1, //每页显示1项
     prev_text: "前一页",
     next_text: "后一页"
   });
 };
 
 function pageselectCallback(page_index, jq){
    var new_content = $("#hiddenresult div.result:eq("+page_index+")").clone();
    $("#Searchresult").empty().append(new_content); //装载对应分页的内容
    return false;
 }
 //ajax加载
 $("#hiddenresult").load("table1.html", null, initPagination);

HTML：

 <div id="Searchresult">分页初始化完成后这里的内容会被替换。</div>
 <div id="hiddenresult" style="display:none;">
 <!-- 列表元素 -->
 </div>
 <div id="Pagination" class="pagination"><!-- 这里显示分页 --></div>

table1.html需要加载部分：

<div class="result">表1</div>
<div class="result">表2</div>
<div class="result">表3</div>