js 分頁插件(jQuery)

来源:https://www.cnblogs.com/Byme/archive/2018/03/29/8670365.html
-Advertisement-
Play Games

參考：http://www.jb51.net/article/117191.htm 侵刪 css 部分 js 部分 調用 ...


參考：http://www.jb51.net/article/117191.htm 侵刪

css 部分

@charset "utf=8";
*{
 box-sizing: border-box;
 padding: 0;
 margin: 0;
}
.page{
 font-size: 13px;
 text-align: center;
 margin-top: 20px;
}
.page .page_to{
 display: inline-block;
 max-width: 250px;
}
.page .page_to li{
 display: inline-block;
 width: auto;
 height: auto;
 border: 1px solid #ddd;
 padding:5px 10px;
 border-left-width: 0;
 color: #323232;
 cursor: pointer;
}
.page .page_to li.page_hide{
 display: none;
}
.page .page_to li:hover{
 color: #32C2CD;
 background-color: #f4f4f4;
 border-color: #DDDDDD;
}
.page .page_to li:first-child{
 border-left-width: 1px;
}
.page .page_jump{
 display: inline-block;
 width: 180px;
}
.page .page_jump input.page_jump_input{
 width: 52px;
 height: 28px;
 text-align: center;
 text-decoration: none;
 background-color: #fff;
 border: 1px solid #ddd;
 margin:0 4px;
}
.page .page_jump input.page_jump_btn{
 display: inline-block;
 padding: 2px 10px;
 margin-left: 5px;
 font-size: 14px;
 font-weight: 400;
 line-height: 1.42857143;
 text-align: center;
 white-space: nowrap;
 /*vertical-align: middle;*/
 -ms-touch-action: manipulation;
 touch-action: manipulation;
 cursor: pointer;
 -webkit-user-select: none;
 -moz-user-select: none;
 -ms-user-select: none;
 user-select: none;
 border: 1px solid transparent;
 border-radius: 4px;
 background-color: #32c5d2;
 color: #FFFFFF;
 font-weight: bold;
}

js 部分

(function($, window, undefined) {

    var curPage = '',
        //跳轉是否有值
        jumpVal = '',
        //從DOM中重新獲取數據總數/總頁數
        lists = '',
        totals = '',
        //是否返回值
        isTrue = false;

    var Page = function(opts) {
        this.settings = $.extend({}, Page.defaults, opts);
        curPage = this.settings.initPage;
        totals = this.settings.totalPages;
        jumpVal = this.settings.inputVal;
        this.init();
    };

    //預設配置
    Page.defaults = {
        container: '.page',
        setPos: 'body',
        totalPages: null,
        totalLists: null,
        initPage: 1,
        inputVal: 1,
        callBack: null
    };

    Page.prototype = {
        init: function() {
            this.create();
        },
        create: function() {
            var _template = '<div class="page">' +
                '<span class="page_details">' +
                '共<span class="page_num">' + this.settings.totalLists + '</span>條記錄，' +
                '第<span class="page_current">' + curPage + '</span>/' +
                '<span class="page_size">' + this.settings.totalPages + '</span>頁' +
                '</span>' +
                '<div class="page_to">' +
                '<ul class="flex_parent">' +
                '<li class="page_first flex_child">首頁</li>' +
                '<li class="page_pre page_hide flex_child">« 上一頁</li>' +
                '<li class="page_next flex_child">下一頁 »</li>' +
                '<li class="page_last flex_child">末頁</li>' +
                '</ul>' +
                '</div>' +
                '<div class="page_jump">' +
                '<span>第：<input type="number" class="page_jump_input" value="' + this.settings.inputVal + '">頁</span>' +
                '<input type="button" class="page_jump_btn" value="Go">' +
                '</div>' +
                '</div>';
            $(this.settings.setPos).append(_template);
            this.refreshDom();
            this.bindEvent();
        },
        bindEvent: function() {
            var _this = this;
            //跳轉首頁
            $(this.settings.container).on("click", ".page_first", function() {

                lists = $(_this.settings.container).find(".page_num").text();
                totals = $(_this.settings.container).find(".page_size").text();

                if ($.isFunction(_this.settings.callBack)) {
                    curPage = 1;
                    isTrue = _this.settings.callBack(1);
                    if (isTrue) {
                        _this.refreshDom();
                        $(_this.settings.container).find(".page_current").text(1);
                        $(_this.settings.container).find(".page_jump_input").val(curPage);
                    }
                }
            });
            //跳轉上一頁
            $(this.settings.container).on("click", ".page_pre", function() {

                lists = $(_this.settings.container).find(".page_num").text();
                totals = $(_this.settings.container).find(".page_size").text();

                if ($.isFunction(_this.settings.callBack)) {
                    if (curPage > 1) {
                        curPage = curPage - 1;
                        isTrue = _this.settings.callBack(curPage);
                        if (isTrue) {
                            _this.refreshDom();
                            $(_this.settings.container).find(".page_current").text(curPage);
                            $(_this.settings.container).find(".page_jump_input").val(curPage);
                        }
                    }
                }
            });
            //跳轉下一頁
            $(this.settings.container).on("click", ".page_next", function() {
                lists = $(_this.settings.container).find(".page_num").text();
                totals = $(_this.settings.container).find(".page_size").text();
                if ($.isFunction(_this.settings.callBack)) {
                    if (curPage < totals) {
                        curPage = curPage + 1;
                        isTrue = _this.settings.callBack(curPage);
                        if (isTrue) {
                            _this.refreshDom();
                            $(_this.settings.container).find(".page_current").text(curPage);
                            $(_this.settings.container).find(".page_jump_input").val(curPage);
                        }
                    }
                }
            });
            //跳轉末頁
            $(this.settings.container).on("click", ".page_last", function() {

                lists = $(_this.settings.container).find(".page_num").text();
                totals = $(_this.settings.container).find(".page_size").text();

                if ($.isFunction(_this.settings.callBack)) {
                    curPage = totals;
                    isTrue = _this.settings.callBack(curPage);
                    if (isTrue) {
                        _this.refreshDom();
                        $(_this.settings.container).find(".page_current").text(totals);
                        $(_this.settings.container).find(".page_jump_input").val(curPage);
                    }
                }
            });
            //Go跳轉
            $(this.settings.container).on("click", ".page_jump_btn", function() {
                lists = $(_this.settings.container).find(".page_num").text();
                totals = $(_this.settings.container).find(".page_size").text();

                if ($.isFunction(_this.settings.callBack)) {
                    jumpVal = Number($(_this.settings.container).find("input.page_jump_input").val());
                    // console.log('跳轉的頁數：' + jumpVal + ';跳轉之前的頁數：' + curPage);
                    isTrue = _this.settings.callBack(jumpVal);
                    if (jumpVal >= 1 && jumpVal <= totals) {
                        curPage = jumpVal;
                        // isTrue = _this.settings.callBack(curPage);
                        if (isTrue) {
                            _this.refreshDom();
                            $(_this.settings.container).find(".page_current").text(curPage);
                            $(_this.settings.container).find(".page_jump_input").val(curPage);
                        }
                    } else {
                        jumpVal = curPage;
                    }
                }
            });
        },
        refreshDom: function() {
            $(this.settings.container).find("li.flex_child").removeClass("page_hide");
            if (Number(totals) == 1) {
                $(this.settings.container).find(".page_pre").addClass("page_hide");
                $(this.settings.container).find(".page_next").addClass("page_hide");
            } else if (Number(totals) == 2) {
                if (Number(curPage) == 1) {
                    $(this.settings.container).find(".page_pre").addClass("page_hide");
                } else {
                    $(this.settings.container).find(".page_next").addClass("page_hide");
                }
            } else if (Number(curPage) == 1 && Number(totals) > 2) {
                $(this.settings.container).find(".page_pre").addClass("page_hide");
            } else if (Number(curPage) == Number(totals) && Number(totals) > 2) {
                $(this.settings.container).find(".page_next").addClass("page_hide");
            }
        }
    };

    var pageInit = function(opts) {
        return new Page(opts);
    };

    window.pageInit = $.pageInit = pageInit;

})(jQuery, window, undefined);

調用

function page(){
    $.pageInit({
        container: '.page', //容器：預設page
        setPos: '.pageBox', //放置位置：預設body
        totalPages: totalPages, //總頁數：必填（後臺返回的，載入列表可以取到）
        totalLists: totalCount, //數據總數：必填（後臺返回的，載入列表可以取到）
        initPage: pageNo, //初始頁碼：預設1（後臺會返回，自己也可以定義）
        inputVal: 1, //設置跳轉的input值：預設1
        //要執行的函數：預設null，必須為fn且返回true則可執行分頁，false則不執行
        callBack: function(n) {
            var flag = true;
　　　　　　　console.log(n);
            getCustomerList(n); //getCustomerList 是載入列表的方法；n 為返回的頁碼數，
            return flag;
        }
    });
};

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • jquery.qrcode.min.js生成二維碼
    jquery.qrcode.min.js是一款可以生成二維碼的插件，使用前提是先引入jquery，因為jquery.qrcode.min.js依賴jquery。 基本用法 1.引入js 2.構建容器 3.生成二維碼 這樣，一個二維碼就生成了，通過掃二維碼，可以方便的訪問本博客。 拓展講解 （1）qr ...
  • 2018.3.29 div格式設置
    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> /*標簽名查找，名稱相同，格式相同*/ span{ color: coral; } /*id名查找，名稱不可重覆*/ ...
  • 2018.3.29 DIV位置調整代碼
    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> /*固定在頁面某一位置*/ #a{ width: 20px; height: 20px; background-co ...
  • GitHub趨勢:Vue.js大有超過TensorFlow之勢!
    2月，Github上第二受歡迎的項目是Flutter。Flutter的第一個測試版本是作為2018年世界移動通信大會的一部分而開始的。 Flutter是一款移動UI框架，旨在幫助開發人員在iOS和Android上創建高質量的原生界面。Flutter是免費和開源的，就像Android SDK一樣，並且 ...
  • form&method【POST~GET】
    <form.../>中method屬性指定了該表單是以哪種方式提交請求，有兩種方式：GET請求方式和POST請求方式，預設是GET請求方式。兩種方式的區別：get方式的請求是在瀏覽器地址欄中輸入訪問地址所發送的請求，即他是通過地址欄傳輸的。在地址欄中可以看到請求參數名和值。且get參數有長度限制，傳 ...
  • Angularjs中的緩存以及緩存清理
    寫在最前面：這篇博文是2篇文章組成，詳細介紹了Angularjs中的緩存以及緩存清理，文章由上海尚學堂轉載過來，歡迎大家閱讀和評論。轉載請註明出處，謝謝！ 一個緩存就是一個組件，它可以透明地儲存數據，以便以後可以更快地服務於請求。多次重覆地獲取資源可能會導致數據重覆，消耗時間。因此緩存適用於變化性不 ...
  • javaScript設計模式 -- 靈活的javaScript語言
    因為好長時間的懶惰和懈怠，好久沒有更新文章了，從現在開始我會按時更新一些自己總結的一些知識，和研究的東西，希望能讓大家從我這裡學到一點點的知識。 本文參考了張榮銘的javascript設計模式一書，算是自己對看了文章的總結吧，如果你想學習設計模式，可以去購買一本，學習一下，寫的非常好。 javaSc ...
  • HTML5 多媒體video，autio使用示例
    1 2 3 4 5 AV 6 7 8 9 註意:audio標簽設置controls="controls"才可以再頁面中顯示 10 IE9開始支持 11 12 13 不支持audio 14 ... ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類