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

Jquery 分頁(yè)插件之Jquery Pagination

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

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

有同學(xué)問(wèn)道jquery的簡(jiǎn)單分頁(yè)插件，原來(lái)有同事寫(xiě)過(guò)一個(gè)簡(jiǎn)單[Javascript 使用回調(diào)函數(shù)的自定義分頁(yè)插件--自帶樣式]。

今天分享一個(gè)功能比較強(qiáng)大的jquery分頁(yè)插件：jquery.pagination。

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

簡(jiǎn)介與說(shuō)明

此Jquery插件為Ajax分頁(yè)插件，一次性加載，故分頁(yè)切換時(shí)無(wú)刷新與延遲，如果數(shù)據(jù)量較大不建議用此方法，因?yàn)榧虞d會(huì)比較慢。

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

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

使用方法

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

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

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

參數(shù)

使用舉例

例如下面的使用代碼：

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

項(xiàng)目demo：

定義分頁(yè)相關(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>編號(hào)</th>
                    <th>標(biāo)題</th>
                     <th>縮略圖</th> 
                         <th>海報(bào)</th>
               <%--     <th>社區(qū)</th>
                    <th>商品</th>--%>
                    <th>開(kāi)始時(shí)間</th>
                    <th>結(jié)束時(shí)間</th>
                    <th>是否幻燈</th>
                    <th>操作</th>
                  </tr>
                 </thead>
                <tbody id="tBodyList">
                </tbody>
              </table>
              <div id="Pagination" class="row"></div>

獲取數(shù)據(jù)并調(diào)用分頁(yè)函數(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>首頁(yè)幻燈設(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="注銷(xiāo)">';
              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修復(fù)" 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è)置分頁(yè)
          if (currentPage == 1) {
            var initPagination = function () {
              // 創(chuàng)建分頁(yè)
              $("#Pagination").pagination(allCount, {
                num_edge_entries: 1, //邊緣頁(yè)數(shù)
                num_display_entries: 2, //主體頁(yè)數(shù)
                prev_text: "<<",
                next_text: ">>",
                callback: PageSelectCallback,
                items_per_page: pageSize //每頁(yè)顯示1項(xiàng)
              });
            }();
            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ù)錯(cuò)誤！"); return;
    }
  });
}

示例二：

Jquery Pagination插件代碼：

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

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

相關(guān)文章

最新評(píng)論