JQuery：pagination分页

首先导入需要的文件

<script type="text/javascript" src="JQuery/jquery-1.3.2.min.js"></script>

<link rel="stylesheet" type="text/css"   href="JQuery/page/pagination.css">
<script type="text/javascript" src="JQuery/page/jquery.pagination.js"></script>

 

页面代码

<table id="meetingTable" class="mytable">

    <tr>
     <th
      style="border-left-style: solid; border-right-style: none; border-left-width: 1px">
      加入
     </th>
     <th>
      会议号
     </th>
     <th>
      名称
     </th>
     <th>
      时间
     </th>
     <th
      style="border-left-style: none; border-right-style: solid; border-right-width: 1px">
      创建者
     </th>
    </tr>
   </table>

   <br>
   <div id="pageList"></div>

 

 

JS代碼如下：

$(document).ready(function() {
   focu = jQuery.noConflict();
   params.UNIFIED_LOGIN_KEY = url.getQuery("UNIFIED_LOGIN_KEY");
   var actionUrl = "isomery/corp/meeting/exec-listPage";
   // 加入分页的绑定
   focu("#pageList").pagination(getTotalCount(actionUrl), {
      callback : Callback,
      prev_text : '< 上一页',
      next_text : '下一页 >',
      items_per_page : 10,
      num_edge_entries : 2
     });
   });

// 得到所有会议的总页数
function getTotalCount(paramUrl) {
 var temp = params;
 temp.start = 0;
 temp.limit = 10;
 var totalPageCount = 0;
 focu.ajax({
    type : "POST",
    success : function(result) {
     if (result.totalCount != 0) {
      totalPageCount = result.totalCount;
     }
    },
    error : function(XMLHttpRequest, textStatus, errorThrown) {
     alert("系统错误..." + textStatus);
    },
    async : false,
    timeout : 30000,
    data : temp,
    url : paramUrl,
    dataType : "json"
   });
 return totalPageCount;
}

// 所有会议的分页显示
function initData(pageIndex,paramUrl,id,param) {
 focu("#pageList tr:gt(0)").remove(); //每次清除 除表头的行
 var tBody = "";
 var temp = params;
 temp.start = pageIndex * 10;
 temp.limit = 10;
 focu.ajax({
  type : "POST",
  success : function(result) {
   if (result.totalCount != 0) {
    focu.each(result.data, function(index, item) {
     var trs = "<tr  οnmοuseοver=hbar(this); οnmοuseοut=uhbar(this)><td>"
       + hasPwd(item.cfViewtype)
       + "<img src='Images/pc/default/meeting/join.gif' width=17 class='join' id='"+param+"_join_"
       + index
       + "'/></td><td>"
       + item.cfId
       + "</td>"
       + "<td>"
       + item.cfName
       + "</td><td>"
       + item.cfTmbg
       + ' ~ '
       + item.cfTmed
       + "</td><td>"
       + item.cfCreateName + "</td>";
         focu("#pageList ").append(trs);
    }else{
    var tdStr = '';
    if(param == "my"){
      tdStr = "<tr><td align='center' colspan='6'>您目前没有会议记录！</td></tr>";
    }else{
      tdStr = "<tr><td align='center' colspan='5'>没有会议记录！</td></tr>";
    }
    focu("#"+id).append(tdStr);
   }

  },
  error : function(XMLHttpRequest, textStatus, errorThrown) {
   alert("系统错误..." + textStatus);

  },
  async : false,
  timeout : 30000,
  data : temp,
  url : paramUrl,
  dataType : "json"
 });
}

 

// 回调函数
function Callback(page_id, jq) {
 var actionUrl = "isomery/corp/meeting/exec-listPage";
 initData(page_id,actionUrl,"meetingTable","all");
 return false;
}

 

 

分页参数列表：

参数名	描述	参数值
maxentries	总条目数	必选参数，整数
items_per_page	每页显示的条目数	可选参数，默认是10
num_display_entries	连续分页主体部分显示的分页条目数	可选参数，默认是10
current_page	当前选中的页面	可选参数，默认是0，表示第1页
num_edge_entries	两侧显示的首尾分页的条目数	可选参数，默认是0
link_to	分页的链接	字符串，可选参数，默认是"#"
prev_text	“前一页”分页按钮上显示的文字	字符串参数，可选，默认是"Prev"
next_text	“下一页”分页按钮上显示的文字	字符串参数，可选，默认是"Next"
ellipse_text	省略的页数用什么文字表示	可选字符串参数，默认是"..."
prev_show_always	是否显示“前一页”分页按钮	布尔型，可选参数，默认为true，即显示“前一页”按钮
next_show_always	是否显示“下一页”分页按钮	布尔型，可选参数，默认为true，即显示“下一页”按钮
callback	回调函数	默认无执行效果