欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Jquery 分頁插件之Jquery Pagination

 更新時間：2015年08月25日 15:08:14   投稿：mrr  
實用jQuery分頁特效插件jquery.pagination.js，基于jQuery實現(xiàn)，本文給大家分享jquery分頁插件之jquery pagination，需要的朋友可以參考下

實用jQuery分頁特效插件jquery.pagination.js，基于jQuery實現(xiàn)，可根據(jù)pageselectCallback函數(shù)callback調(diào)用通過ajax調(diào)用動態(tài)數(shù)據(jù)，目前的方法是生成JSON數(shù)據(jù)到JS文件，調(diào)用的數(shù)據(jù)是JSON格式數(shù)據(jù)，缺點是數(shù)據(jù)是一次性讀出來的，效率會差些，插件支持眾多參數(shù)的自定義配置功能，還是很不錯的，大家可以根據(jù)自己的想法進行改進。

有同學問道jquery的簡單分頁插件，原來有同事寫過一個簡單[Javascript 使用回調(diào)函數(shù)的自定義分頁插件--自帶樣式]。

今天分享一個功能比較強大的jquery分頁插件：jquery.pagination。

官方地址：http://esimakin.github.io/twbs-pagination/

簡介與說明

此Jquery插件為Ajax分頁插件，一次性加載，故分頁切換時無刷新與延遲，如果數(shù)據(jù)量較大不建議用此方法，因為加載會比較慢。

原插件CSS不太合理，使用浮動，故無法方便實現(xiàn)左右方向的定位，且未清除浮動，在中文修改版中我對其進行了優(yōu)化，使其支持text-align的定位。

對原js文件注釋進行了中文翻譯，demo頁面也是漢化了的，demo頁面的js與原demo有一些出入，但核心不變。

使用方法

跟一般的jQuery插件一樣，此插件使用也很簡單便捷。方法是pagination，例如$("#page").pagination(100);，這里的100參數(shù)是必須的，表示顯示項目的總個數(shù)，這是最簡單的使用，得到的顯示如下：

還有一點值得一提的是分頁列表需要放在class類為pagination的標簽內(nèi)，您可以使用text-align屬性控制分頁居中顯示還是居右顯示。

回調(diào)函數(shù)一般用來裝載對應(yīng)分頁顯示的內(nèi)容，具體參見demo源文件。

參數(shù)

使用舉例

例如下面的使用代碼：

$("#Pagination").pagination(56, {
  num_edge_entries: 2,
  num_display_entries: 4,
  callback: pageselectCallback,
  items_per_page:1
});

項目demo：

定義分頁相關(guān)參數(shù)：

var pageSize = 10;
var allCount = 0;
var currentPage = 1;
var ajaxUrl = '../../Service/ActiceHandler.ashx';
var oper = "list";

html:

  <table id="sample-table-2" class="table table-striped table-bordered table-hover">
                 <thead>
                   <tr> 
                    <th>編號</th>
                    <th>標題</th>
                     <th>縮略圖</th> 
                         <th>海報</th>
               <%--     <th>社區(qū)</th>
                    <th>商品</th>--%>
                    <th>開始時間</th>
                    <th>結(jié)束時間</th>
                    <th>是否幻燈</th>
                    <th>操作</th>
                  </tr>
                 </thead>
                <tbody id="tBodyList">
                </tbody>
              </table>
              <div id="Pagination" class="row"></div>

獲取數(shù)據(jù)并調(diào)用分頁函數(shù)：

function GetList(pageIndex) {
  var searchName = $("#txtSearchName").val();
  var cityId = GetCity();
  var endTime;
  var beginTime;
  var communityName;
  var title;
  $.ajax({
    type: "post",
    dataType: 'json',
    url: ajaxUrl,
    data: {
      pageSize: pageSize,
      Operate: "list",
      currentPageIndex: pageIndex,
      endTime: $("#txtDeadTime").val(),
      Cityid: cityId,
      beginTime: $("#txtStartTime").val(),
      communityName: $("#txtsqname").val(),
      title: $("#txttitle").val()
    },
    success: function (data, textStatus) {
      if (data != null) {
        var model = eval(data);
        if (model != null && model != "undefined") {
          var data = eval(model.Instance);
          allCount = model.TotalCount;
          var html = '';
          ListActive = data;
          $.each(data, function (key, val) {
            html = html + '<tr>';
            html = html + ' <td width="100px" class="text-primary">' + val.id + '</td>';
            html = html + ' <td class="left">' + val.title + '</td>';
            html = html + ' <td class="left"><img width="80px" height="60px" src="' + val.smallphotourl + '"></img></td>';
            html = html + ' <td class="left"><img width="80px" height="60px" src="' + val.bigphotourl + '"></img></td>'; 
            html = html + ' <td class="left">' + $.formatDate("yyyy-MM-dd HH:mm", data.begintime) + '</td>';
            html = html + ' <td class="left">' + $.formatDate("yyyy-MM-dd HH:mm", data.endtime) + '</td>';
            html = html + ' <td class="left">' + '<a href="#modal-form" onclick="SetHomeIndex(\'' + val.id + '\',\'' + val.title
              + '\');return false" class="btn btn-xs btn-success " data-toggle="modal"><i class="icon-key"></i>首頁幻燈設(shè)置</a>' + '</td>';
            html = html + ' <td class="left">'; 
            if (oper == "list") {
              html = html + ' <a href="Add.aspx?RightID=0&Id=' + val.id + '" class="green" title="編輯"><i class="icon-edit bigger-130"></i></a>&nbsp;';
              html = html + ' <a href="#" onclick="DeleteActive(\'' + val.id + '\',\'' + val.title + '\')" class="red" title="注銷">';
              html = html + ' <i class="icon-trash bigger-130"></i></a>';
            }
            else if (oper == "msg") { 
              html = html + '  <input type="checkbox" onchange=\'SetCheckedPro("' + val.id + '","' + val.title + '");return false;\' id="seelctactive_' + val.id + '" value="' + val.title + '" />';
            }
            html = html + ' <a href="#" onclick="PreviewUrl(\'http://sq.huilife.cn/index.php?g=Wap&m=Homeactivity&de<a  class="keylink" title=" Bug修復" target="_blank">bug</a>=1&a=show&id=' + val.id + '\')" class="blue" title="查看"><i class="icon-zoom-in bigger-130"></i></a>&nbsp;';
            html = html + ' </td></tr>'; 
          });
          $("#tBodyList").html(html);
          //設(shè)置分頁
          if (currentPage == 1) {
            var initPagination = function () {
              // 創(chuàng)建分頁
              $("#Pagination").pagination(allCount, {
                num_edge_entries: 1, //邊緣頁數(shù)
                num_display_entries: 2, //主體頁數(shù)
                prev_text: "<<",
                next_text: ">>",
                callback: PageSelectCallback,
                items_per_page: pageSize //每頁顯示1項
              });
            }();
            currentPage = 100;
            if (allCount == 0) $('#divNumInfo').html("0-0條 共0條");
          }
        }
        else {
          alert("加載數(shù)據(jù)失敗！"); return;
        }
      }
    },
    complete: function (XMLHttpRequest, textStatus) {
    },
    error: function (e) {
      alert("加載數(shù)據(jù)錯誤！"); return;
    }
  });
}

示例二：

Jquery Pagination插件代碼：

<div id="page2" class="m-pagination"></div>
<script type="text/javascript">
//請求格式： .../GetPageData?query=test&pageIndex=0&pageSize=10
//返回數(shù)據(jù)： {"data":[1,2,3,4,5,6,7,8,9,10],"total":800}
$("#page2").page({
  remote: {
    url: '/GetPageData', //請求地址
    params: { query: "test" },    //自定義請求參數(shù)
    beforeSend: function(XMLHttpRequest){
      //...
    },
    success: function (result, pageIndex) {
      //回調(diào)函數(shù)
      //result 為 請求返回的數(shù)據(jù)，呈現(xiàn)數(shù)據(jù)
    },
    complete: function(XMLHttpRequest, textStatu){
      //...
    }
    pageIndexName: 'pageIndex',   //請求參數(shù)，當前頁數(shù)，索引從0開始
    pageSizeName: 'pageSize',    //請求參數(shù)，每頁數(shù)量
    totalName: 'total'       //指定返回數(shù)據(jù)的總數(shù)據(jù)量的字段名
  }
});
</script>

以上內(nèi)容是本文針對Jquery 分頁插件之Jquery Pagination的全部敘述，希望大家喜歡。

相關(guān)文章

最新評論