2. 程式人生 > >Bootstrap分頁（帶有省略號）

Bootstrap分頁（帶有省略號）

阿新 • • 發佈：2019-02-05

Bootstrap 分頁

使用Bootstrap實現分頁，並且當頁碼過多時使用省略號
原始碼下載

這裡寫圖片描述

程式碼片段一（HTML主要部分）

<html style="padding-bottom: 54px;">
    <title>jquery</title>
    <script type="text/javascript">
        $(function(){
            $(".pagination").createPage({
                totalPage:30,
                currPage:14
 
,
                backFn:function(p){
                    console.log("回撥函式："+p);
                }
            });
        })
</script>
</head>
<body>
    <div class="pagec" id="pagearea">
        <ul class="pagination">
        </ul>
    </div>
</body>
</html
 
>

程式碼片段二（JavaScript）

(function($){
    var ms = {
        init:function(totalsubpageTmep,args){
            return (function(){
                ms.fillHtml(totalsubpageTmep,args);
                ms.bindEvent(totalsubpageTmep,args);
            })();
        },
        //填充html
        fillHtml:function
 
(totalsubpageTmep,args){
            return (function(){
                totalsubpageTmep="";
                // 頁碼大於等於4的時候，新增第一個頁碼元素
                if(args.currPage!=1 && args.currPage>=4 && args.totalPage!=4) {
                    totalsubpageTmep += "<li class='ali'><a href='javascript:void(0);' class='geraltTb_pager' data-go='' >"+1+"</a></li>";
                }
                /* 當前頁碼>4, 並且<=總頁碼，總頁碼>5，新增“···”*/
                if(args.currPage-2>2 && args.currPage<=args.totalPage && args.totalPage>5) {
                    totalsubpageTmep += "<li class='ali'><a href='javascript:void(0);' class='geraltTb_' data-go='' >...</a></li>";
                }
                /* 當前頁碼的前兩頁 */
                var start = args.currPage-2;
                /* 當前頁碼的後兩頁 */
                var end = args.currPage+2;

                if((start>1 && args.currPage<4) || args.currPage==1) {
                    end++;
                }
                if(args.currPage>args.totalPage-4 && args.currPage>=args.totalPage) {
                    start--;
                }
                for(; start<=end; start++) {
                    if(start<=args.totalPage && start>=1) {
                        totalsubpageTmep += "<li class='ali'><a href='javascript:void(0);' class='geraltTb_pager' data-go='' >"+start+"</a></li>";
                    }
                }
                if(args.currPage+2<args.totalPage-1 && args.currPage>=1 && args.totalPage>5) {
                    totalsubpageTmep += "<li class='ali'><a href='javascript:void(0);' class='geraltTb_' data-go='' >...</a></li>";
                }

                if(args.currPage!=args.totalPage && args.currPage<args.totalPage-2 && args.totalPage!=4) {
                    totalsubpageTmep += "<li class='ali'><a href='javascript:void(0);' class='geraltTb_pager' data-go='' >"+args.totalPage+"</a></li>";
                }
                $(".pagination").html(totalsubpageTmep);
            })();
        },
        //繫結事件
        bindEvent:function(totalsubpageTmep,args){
            return (function(){
                totalsubpageTmep.on("click","a.geraltTb_pager",function(event){
                    var current = parseInt($(this).text());
                    ms.fillHtml(totalsubpageTmep,{"currPage":current,"totalPage":args.totalPage,"turndown":args.turndown});
                    if(typeof(args.backFn)=="function"){
                        args.backFn(current);
                    }
                });
            })();
        }
    }
    $.fn.createPage = function(options){       
        ms.init(this,options);
    }
})(jQuery);

相關推薦

Bootstrap分頁（帶有省略號）

Bootstrap 分頁 使用Bootstrap實現分頁，並且當頁碼過多時使用省略號 原始碼下載 程式碼片段一（HTML主要部分） <html style=

[轉]Bootstrap table後端分頁（ssm版）

log 包含 ucc utf-8 get doctype 3.1.1 樣式 poj 原文地址:https://www.cnblogs.com/flyins/p/6752285.html 說明bootstrap table可以前端分頁，也可以後端sql用limit

bootstrap分頁（17）

Bootstrap 分頁 本章將講解 Bootstrap 支援的分頁特性。分頁（Pagination），是一種無序列表，Bootstrap 像處理其他介面元素一樣處理分頁。 分頁（Pagination） 下表列出了 Bootstrap 提供的處理分頁的 class。 Class 描述

spring data jpa bootstrap table 後端分頁（詳解）

關於spring data jpa 使用bootstrap table 分頁： 1.bootstrap table  js檔案程式碼： 2.controller中獲取前端分頁的資料： 3.service,需要注意pageabel的引數，這裡沒有使用sort排序方式，所

Intellij-IDEA搭建SrpingMVC+Spring+Mybatis+Bootstrap+分頁（二）

1.引入Bootstrap,優化登入頁面及註冊頁面 先引入bootstrap、jquery、jquery validate檔案和一張背景圖片 注：在引入bootstrap.js之前要先引入jquery 關於bootstrap具體如何使用，請百度學習一下：Bo

Intellij-IDEA搭建SrpingMVC+Spring+Mybatis+Bootstrap+分頁（一）

1.環境介紹 Intellij-IDEA:2017.3.2 JDK:1.8.0_77 Maven:3.5.0 Tomcat:8.5.20 mysql：5.7.19 Intellij-IDEA安裝配置相關連結 2.建立一個maven專案 一步一步往下走就

mysql 使用 limit 實現底層分頁（附原始碼）

原理解析： <select id="queryProductList" resultType="com.pojo.Product"> SELECT * FROM tb_product ORDER BY priority DESC LIMIT #{rowIndex},#{p

VUE-002-前端分頁（el-pagination）展示資料

在web開發過程中，通常使用表格展示資料，在資料較多時採用分頁的方式展示給使用者。 分頁方式有前端假分頁和後端分頁兩種實現方式，此文僅記錄前端假分頁實現方式。   第一步：新增分頁元件（el-pagination）在表格下方，新增的程式碼如下所示： <template>

MyBatis-Plus多表聯合查詢並且分頁（3表）

這3張表的關係是   模型表Model  ===> 訓練表Training ===》應用表Application（大概的邏輯是：選擇應用，然後訓練，然後成為模型）如有不理解的可加我微信：17625089935 白天問我一般晚上回 首先我們先建立實體Model（我使用的d

layui——分頁（ajax請求）

這次記錄下藉助layui框架實現的分頁功能，本人使用的是layui的1.0.9版本。首先還是來複習下layui分頁需要掌握的知識點，再通過實際案例來說明下具體這麼用。 一 載入模組 首先，在使用layui的分頁模組時，要載入需要使用到的分頁模組，而根據layui的官方文件說

優化limit分頁（延遲關聯）

limit'分頁有一個問題就是當偏移量較大時查詢遍歷的資料越多，效率會逐漸降低，例如limit 1000,10這樣的查詢這時MYSQL需要查詢出1020條記錄然後只返回最後20條，前面的1000條記錄都會被拋棄，代價較高。如果每個分頁被訪問的資料頻率都相同要優化這種查詢要麼

分頁（完整版）

①分頁效果： ②分頁PageBean模型設計 1package com.cn.utils;2​3import java.util.List;4​5public c

實戰--dango自帶的分頁（極簡）

注意，我將templates定義在專案的同級目錄下： 在settings.py中配置 TEMPLATES = [ { 'BACKEND': 'django.template.backends.django.DjangoTemplates', 'DIRS': [os.p

ajax 分頁（bootstrap 的樣式）

技術分享 alt img 9.png -1 樣式 es2017 blog com html js ajax 分頁（bootstrap 的樣式）

SSM_CRUD新手練習（8）搭建BootStrap分頁頁面

  經過Spring單元測試模擬請求，我們能夠成功的取出資料，接下來，我們就開始寫用來顯示查詢資料的分頁頁面吧。我們使用Bootstrap來幫助我們快速開發漂亮的頁面，具體怎麼用可以檢視Bootstrap中文官方文件 https://v3.bootcss.com/getting-s

BootStrap 表格分頁（伺服器客戶端）

伺服器分頁表格  function InitMainTable1 () { //記錄頁面bootstrap-table全域性變數$table，方便應用 var queryUrl = "/XServer/user.do?_

bootstrap實現分頁（例項）

寫前端都會面臨的一個問題就是分頁，如果是純js分頁也是可以的，只是可能程式碼量比較大，所以今天寫一個關於用bootstrap框架分頁的例子，希望以後可以幫助到一些對這方面比較頭疼的碼農。首先需要明確的一點是，哪些資料是需要分頁的，單從資料顯示上其實是沒有必要分頁的，因為頁面是

微擎框架下拉分頁（使用js模板引擎）

contain don obi 方式 get onf info 循環 time 1.需要分頁的頁面，引入一下文件 <script language="javascript" src="\addons\{$_GPC[‘m‘]}\template\mobile\js/re

分頁（將數據庫中的信息分頁顯示到網頁）

gen ets arr get ges nec 記錄 方法 logs 問題分析： 　　當我們想檢索數據庫中的信息並將其顯示到網頁上時，如果數據庫中的信息過多時 。一方面會使數據庫開銷非常大，降低性能；另一方面在一張頁面上顯示過多數據也會降低用戶體驗。 解決辦法：　 　　

jqPaginator分頁（ajax用法和form表單提交用法）

用法 () var meta lang 點擊 parse name back 一般使用方法 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8">