自實現jQuery版分頁插件

来源:https://www.cnblogs.com/libo0125ok/archive/2018/05/22/9072593.html
-Advertisement-
Play Games

本篇博客的分頁插件是在2017-11-10 的一篇博客的基礎上改造的（原博客地址：原生js版分頁插件），主要是優化了分頁按鈕的排列和顯示樣式，取消首頁和末頁的箭頭按鈕，改為數字按鈕，並始終把它們分別固定放置在上一頁按鈕的後面和下一頁按鈕的前面。另外在DOM操作上，用的是jQuery，當然如果不想使用... ...


本篇博客的分頁插件是在2017-11-10 的一篇博客的基礎上改造的（原博客地址：原生js版分頁插件），主要是優化了分頁按鈕的排列和顯示樣式，取消首頁和末頁的箭頭按鈕，改為數字按鈕，並始終把它們分別固定放置在上一頁按鈕的後面和下一頁按鈕的前面。另外在DOM操作上，用的是jQuery，當然如果不想使用jQuery的話，也可以很容易的改成原生js。下麵直接貼出代碼。

1、paging.js

var tableStyle =
    ".page {font-size: 14px;background-color: transparent;width: 100%;height: 50px;line-height: 50px;display: none;-webkit-user-select:none;-moz-user-select:none; -ms-user-select:none;user-select:none;}"+
    ".page .page-l select {width: 60px;height: 30px;}"+
    ".page .page-l .page-size-box {display: inline-block;margin-left: 20px;}"+
    ".page .page-r {float: right;padding-top: 10px;}"+
    ".page .page-r ul {float: left;list-style: none;margin: 0;height: 30px;box-sizing: border-box;padding: 0;}"+
    ".page .page-r ul li {float: left;list-style: none;height: 100%;line-height: 30px;border: 1px solid #ccc;box-sizing: border-box;margin:0 2px;}"+
    ".page .page-r ul li.active {background-color:#50aaff;border:1px solid #50aaff;}"+
    ".page .page-r ul li.active a:hover {background-color:#50aaff;}"+
    ".page .page-r ul li.active a {color: #fff;}"+
    ".page .page-r ul li a:hover {background-color: #f5f2f2;}"+
    ".page .page-r ul li:last-child {border-right: 1px solid #ccc;}"+
    ".page .page-r ul li a {text-decoration: none;display: block;height: 100%;color: #777;text-align:center;cursor:pointer;}"+
    ".page .page-r ul li.p1 a,.page .page-r ul li.p2 a,.page .page-r ul li.p3 a {width:30px;}"+
    ".page .page-r ul li.p4 a {width:40px;}"+
    ".page .page-r ul li.p5 a {width:50px;}"+
    ".page .page-r ul li.p6 a {width:60px;}"+
    ".page .page-r ul li a.active {background-color: #09aeb0;color: #fff;}"+
    ".page .page-r ul li a.ellipsis {cursor: not-allowed;}";

var styleNode = document.createElement('style');
styleNode.innerHTML = tableStyle;
var headNode = document.getElementsByTagName('head')[0];
headNode.appendChild(styleNode);

function Paging(paramsObj, callback) {
    this.pageSize = paramsObj.pageSize || 10;    //每頁條數（不設置時，預設為10
    this.pageIndex = paramsObj.pageIndex || 1;    //當前頁碼
    this.totalCount = paramsObj.totalCount || 0;   //總記錄數
    this.totalPage = Math.ceil(paramsObj.totalCount / paramsObj.pageSize) || 0;     //總頁數
    this.prevPage = paramsObj.prevPage || '<';     //上一頁（不設置時，預設為：<）
    this.nextPage = paramsObj.nextPage || '>';     //下一頁（不設置時，預設為：>）
    this.degeCount = paramsObj.degeCount || 3;             //當前頁前後兩邊可顯示的頁碼個數（不設置時，預設為3）
    this.ellipsis = paramsObj.ellipsis; //是否顯示省略號不可點擊按鈕（true：顯示，false：不顯示）
    this.ellipsisBtn = (paramsObj.ellipsis == true || paramsObj.ellipsis == null) ? '<li class="p1"><a class="ellipsis">…</a></li>' : '';
    var that = this;

    $('#page_size').val(this.pageSize);
    callback && callback(this.pageIndex, this.pageSize);    //立即執行回調函數

    // 生成分頁DOM結構
    this.initPage = function (totalCount, totalPage, pageIndex) {
        this.totalCount = totalCount;
        this.totalPage = totalPage;
        this.pageIndex = pageIndex;
        var degeCount = this.degeCount;
        var pageHtml = '';  //總的DOM結構
        var tmpHtmlPrev = '';   //省略號按鈕前面的DOM
        var tmpHtmlNext = '';   //省略號按鈕後面的DOM
        var headHtml = ''; //首頁和上一頁按鈕的DOM
        var endHtml = '';   //末頁和下一頁按鈕的DOM

        var ellipsisBtn = this.ellipsisBtn;
        pageIndex = pageIndex - 0;
        var firstPage = '<li class="p1"><a class="page-number" href="javascript:;">1</a></li>';
        var lastPageCla = 'p'+(this.totalPage+'').length;
        var lastPage = '<li class="'+lastPageCla+'"><a class="page-number" href="javascript:;">'+this.totalPage+'</a></li>';
        var tmpHtmlPrev = '<li class="p1"><a id="prev_page" class="p1">'+this.prevPage+'</a></li>';
        var tmpHtmlNext = '<li class="p1"><a id="next_page" class="p1">'+this.nextPage+'</a></li>';
        var countPage = '';

        //左側不需要省略號按鈕，右側不需要省略號按鈕
        if(pageIndex <= (degeCount+2) && (pageIndex+degeCount) >= (totalPage-1)){ 
            for(var i=1; i<=totalPage; i++){
                var len = (i+'').length;
                if(i == pageIndex) {
                    countPage += '<li class="active p'+len+'"><a class="page-number" href="javascript:;">'+i+'</a></li>';
                }else{
                    countPage += '<li class="p'+len+'"><a class="page-number" href="javascript:;">'+i+'</a></li>';
                }
            }
            pageHtml = tmpHtmlPrev + countPage + tmpHtmlNext;
        }
        //左側不需要省略號按鈕，右側需要省略號按鈕
        if(pageIndex <= (degeCount+2) && (pageIndex+degeCount) < (totalPage-1)){
            for(var i=1; i<=(degeCount*2+2); i++){
                var len = (i+'').length;
                if(i == pageIndex) {
                    countPage += '<li class="active p'+len+'"><a class="page-number" href="javascript:;">'+i+'</a></li>';
                }else{
                    countPage += '<li class="p'+len+'"><a class="page-number" href="javascript:;">'+i+'</a></li>';
                } 
            }
            if(degeCount*2+2 < totalPage) {
                pageHtml = tmpHtmlPrev + countPage + ellipsisBtn + lastPage + tmpHtmlNext;
            }else{
                pageHtml = tmpHtmlPrev + countPage + tmpHtmlNext;
            }
        }
        //左側需要省略號按鈕，右側需要省略號按鈕
        if(pageIndex > (degeCount+2) && (pageIndex+degeCount) < (totalPage-1)){
            for(var i=pageIndex-degeCount; i<=pageIndex+degeCount; i++){
                var len = (i+'').length;
                if(i == pageIndex) {
                    countPage += '<li class="active p'+len+'"><a class="page-number" href="javascript:;">'+i+'</a></li>';
                }else{
                    countPage += '<li class="p'+len+'"><a class="page-number" href="javascript:;">'+i+'</a></li>';
                } 
            }
            pageHtml = tmpHtmlPrev + firstPage + ellipsisBtn + countPage + ellipsisBtn + lastPage + tmpHtmlNext;
        }
        //左側需要省略號按鈕，右側不需要省略號按鈕
        if(pageIndex > (degeCount+2) && (pageIndex+degeCount) >= (totalPage-1)){
            for(var i=(totalPage-degeCount*2-1); i<=totalPage; i++){
                var len = (i+'').length;
                if(i == pageIndex) {
                    countPage += '<li class="active p'+len+'"><a class="page-number" href="javascript:;">'+i+'</a></li>';
                }else{
                    countPage += '<li class="p'+len+'"><a class="page-number" href="javascript:;">'+i+'</a></li>';
                } 
            }
            if(totalPage-degeCount*2-1 > 1){
                pageHtml = tmpHtmlPrev + firstPage + ellipsisBtn + countPage + tmpHtmlNext;
            }else{
                pageHtml = tmpHtmlPrev + countPage + tmpHtmlNext;
            }
        }
        
        $('#page_ul').html(pageHtml);
        $('#total_count').html(totalCount);
        if(pageIndex == 1) {
            $('#page_ul').find('#prev_page').css('cursor', 'not-allowed');
        }
        if(pageIndex == totalPage){
            $('#page_ul').find('#next_page').css('cursor', 'not-allowed');
        }
    };

    // 點擊頁碼（首頁、上一頁、下一頁、末頁、數字頁）
    $('#page_ul').on('click','a',function (e) {
        var _this = $(this);
        var idAttr = _this.attr('id');
        var className = _this.attr('class');
        if(idAttr == 'prev_page' && that.pageIndex > 1){    //如果點擊的是上一頁
            that.pageIndex = that.pageIndex - 1 ;
            callback && callback(that.pageIndex, that.pageSize);
        }else if(idAttr == 'next_page' && that.pageIndex < that.totalPage){ //如果點擊的是下一頁
            that.pageIndex = parseInt(that.pageIndex) + 1;
            callback && callback(that.pageIndex, that.pageSize);
        }else if(className == 'page-number'){   //如果點擊的是數字頁碼
            that.pageIndex = _this.html();
            callback && callback(that.pageIndex, that.pageSize);
        }
        
    });

    // 改變每頁條數
    $('#page_size').change(function () {
        var _this = $(this);
        that.pageIndex = paramsObj.pageIndex = 1;
        that.pageSize = paramsObj.pageSize = _this.val() - 0;
        callback && callback(that.pageIndex, that.pageSize);
    })
}

2、index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js版分頁插件</title>
    <style>
        .data {
            width: 70%;
            margin: 0 auto;
        }
        .params {
            margin: 20px 0;
        }
        .params input {
            height: 30px;
            box-sizing: border-box;
        }
        .params .search-btn {
            float: right;
            width: 80px;
            border: 0 none;
            background-color: #666;
            color: #fff;
            font-size: 14px;
        }
        table {
            width: 100%;
            border-collapse: collapse;
            text-align: center;
        }
        th, td {
            border: 1px solid #999;
            height: 26px;
            line-height: 26px;
        }
        .no-data {
            display: none;
            height: 80px;
            line-height: 80px;
            text-align: center;
            color: #aaa;
        }
    </style>
</head>
<body>
    <div class="data">
        <div class="params">
            <label for="course_id">用戶姓名：</label><input type="text" id="user_name">
            <input type="button" value="查詢" class="search-btn" id="search_btn">
        </div>
        <table>
            <thead>
                <tr>
                    <th>序號</th>
                    <th>用戶ID</th>
                    <th>姓名</th>
                    <th>創建時間</th>
                </tr>
            </thead>
            <tbody id="data_list"></tbody>
        </table>
        <div class="no-data">未查詢到數據</div>

        <!-- 分頁結構 -->
        <div class="page">
            <div class="page-l" id="page_l" style="float: left;">
                <span>總共 <span id="total_count"></span> 條</span>
                <div class="page-size-box">
                    <span>每頁顯示</span>
                    <select id="page_size">
                        <option value="10">10</option>
                        <option value="20">20</option>
                        <option value="50">50</option>
                        <option value="100">100</option>
                    </select>條
                </div>
            </div>
            <div class="page-r">
                <ul id="page_ul" class="page-ul"></ul>
            </div>
        </div>
    </div>

    <script src="jquery.min.js"></script>
    <script src="paging.js"></script>
    <script>
        $(function () {

            //分頁參數（參數名固定不可變）
            var pageConfig = {
                pageSize: 10,                //每頁條數（不設置時，預設為10）
                prevPage: '<',             //上一頁（不設置時，預設為：<）
                nextPage: '>',             //下一頁（不設置時，預設為：>）
                degeCount: 2,                //當前頁前後兩邊可顯示的頁碼個數（不設置時，預設為3）
                ellipsis: true               //是否顯示省略號按鈕(不可點擊)（true:顯示，false:不顯示，不設置時，預設為顯示）
            }
            getList();  //初始載入就查詢

            //點擊查詢按鈕
            $('#search_btn').click(function () {
                getList();
            })

            //查詢列表數據
            function getList() {
                //初始化Paging實例(pageConfig參數也可以為空對象，此時就是預設設置)
                var pageIng = new Paging(pageConfig, function (pageIndex, pageSize) {
                    var userName = $('#user_name').val();
                    $.ajax({
                        url:'http://172.16.4.133:8081/ssm_project/sysUser/getSysUserList.do', //這裡就不顯示介面地址
                        type:'get',
                        data:{
                            pageIndex: pageIndex,
                            pageSize: pageSize,
                            name: userName
                        },
                        success: function (res) {
                            if(res.success == 1){
                                if(res.data.length > 0){  //如果查詢到了數據
                                    var dataList = res.data;
                                    var html = '';
                                    dataList.forEach(function (item, i) {
                                        html += '<tr>'+
                                                    '<td style="width: 20%;">'+((pageIndex-1)*pageSize+i+1)+'</td>'+
                                                    '<td style="width: 20%;">'+item.id+'</td>'+
                                                    '<td style="width: 30%;">'+item.name+'</td>'+
                                                    '<td style="width: 30%;">'+item.createTime+'</td>'+
                                                '</tr>';
                                    });
                                    $('#data_list').html(html);
                                    var totalCount = res.totalCount;   //介面返回的總條數
                                    var totalPage = Math.ceil(totalCount / pageSize);   //根據總條數和每頁條數計算總頁碼數

                                    // 調用Paging實例的 initPage()方法生成分頁DOM結構
                                    pageIng.initPage(totalCount, totalPage, pageIndex);
                                    $('.page').show();
                                    $('.no-data').hide();
                                }else{  //如果未查詢到數據
                                    $('#data_list').html('');
                                    $('.page').hide();
                                    $('.no-data').show();
                                }
                            }else{
                                $('#data_list').html('');
                                $('.page').hide();
                                $('.no-data').show();
                            }
                        }
                    })
                });
            }
        })
    </script>
</body>
</html>

3、效果

 


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

-Advertisement-
Play Games
更多相關文章
  • MySQL案例05：CPU負載優化
    最近有套系統資料庫周末總是告警，CPU使用率超過90%，開始由開發那邊再跟進處理，我也就沒參與，後來發現沒進展就登錄上去看了下，然後進行了部分優化，優化後效果還是比較明顯的，具體優化過程本文會做詳細的闡述。 一、現象描述 資料庫伺服器CPU使用率超過90%，而此資料庫架構為mycat對應的一主三從（ ...
  • 微信小程式頁面傳多個參數
    在需要頁面之間傳遞多個參數的時候，需要用&鏈接起來，上一頁的正確跳轉代碼如下： var that = this; wx.navigateTo({ url: '../../pages/myListDetail/myListDetail?idx=' + that.data.currentTab + '& ...
  • 【讀書筆記】iOS-iOS視頻
    視頻多媒體文件主要是存放視頻數據信息，視頻數據量要遠遠大於音頻數據文件，而且視頻編碼和解碼演算法非常複雜，因此早期的電腦由於CPU處理能力差，要採用視頻解壓卡硬體支持，視頻採集和壓縮也要採用硬體卡。按照視頻來源可以分為： 1，本地視頻是將視頻文件放在本地播放，因此速度快，畫質好。 2，網路流媒體視頻 ...
  • jsAnim簡單使用教程
    引入jsAnim.js 定義動畫元素 元素需要有position:relative;或者position:absolute;屬性 添加js <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title></title ...
  • js世界這麼大，閉包想看看
    什麼是閉包，為什麼要用他？閉包是能夠訪問其他函數作用域的函數。我們來分析下句子成分（語文大神），閉包是函數，js函數的作用域分為全局作用域，局部作用域，eval作用域，並沒有塊級作用域形象的講，每個函數都是一個小黑屋，能在小黑屋裡看到外面的的世界，可是外界不知道小黑屋裡是啥情況，如何打開門從小黑屋出... ...
  • 冒泡排序和雞尾酒排序的代碼分析
    冒泡排序 冒泡排序（buble sort）是一個比較入門的排序演算法。顧名思義，它根據將最大（或最小）的數依次冒泡從而實現排序。 如下圖所示，白色部分為待排序數組，紅色部分為已找出的“較大的”數，每次迭代只需從白色部分找出其中最大的數字，直至找出n-1個“較大的”數後，數組已排序。 註：找出n-1個“ ...
  • ECharts JS應用：圖表頁面實現
    因為要統計數據進行圖表展示，所以就簡單學習了 ECharts JS 的應用。它是一個純Javascript圖庫，它依賴於一個輕量級的Canvas庫 ZRender，並提供直觀、生動、互動式和高度可定製的數據可視化圖表。 其官網地址為：http://echarts.baidu.com 教程文檔地址：h ...
  • js中數組常用方法總結
    前言 從事前端到現在也有快兩年了，平時也會收集整理一些筆記放在印象筆記，不過收集過之後就在沒有看過，經大佬指點，真正掌握一個知識點，最好的方式就是用自己的話把內容講明白，就開始將以前零散的東西整合一下，和各位道友一起提高。 操作數組 印象中數組有很多方法，系統的整理一下，放在自己家裡方便回頭查~ A ...
一周排行
    -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.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類