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" target="_blank" rel="external nofollow" >

<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	回調函數	預設無執行效果