2. 程式人生 > >Vue.js結合bootstrap實現的分頁控制元件

Vue.js結合bootstrap實現的分頁控制元件

阿新 • • 發佈：2019-01-22

原文地址：http://blog.csdn.net/qiuhaotc/article/details/53031884

使用 vue.js 結合 bootstrap 開發的分頁控制元件

效果如下




實現程式碼

[html] view plain copy  print?
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <metacharset="utf-8"/>
  5.     <metaname="viewport"content="width=device-width, initial-scale=1.0"
    />
  6.     <title> Vue-PagerTest</title>
  7.     <linkrel="stylesheet"href="../lib/bootstrap/dist/css/bootstrap.css"/>
  8. </head>
  9. <body>
  10.     <divclass="container body-content">
  11.         <divid="test"class="form-group">
  12.             <divclass="form-group">
  13.                 <
    divclass="page-header">
  14.                     資料  
  15.                 </div>
  16.                 <tableclass="table table-bordered table-responsive table-striped">
  17.                     <tr>
  18.                         <th>姓名</th>
  19.                         <th>年齡</th>
  20.                         <
    th>刪除資訊</th>
  21.                     </tr>
  22.                     <trv-for="item in arrayData">
  23.                         <tdclass="text-center">{{item.name}}</td>
  24.                         <td>{{item.age}}</td>
  25.                         <td><ahref="javascript:void(0)"v-on:click="deleteItem($index,item.age)">del</a></td>
  26.                     </tr>
  27.                 </table>
  28.                 <divclass="page-header">分頁</div>
  29.                 <divclass="pager"id="pager">
  30.                     <spanclass="form-inline">
  31.                         <selectclass="form-control"v-model="pagesize"v-on:change="showPage(pageCurrent,$event,true)" number>
  32.                             <optionvalue="10">10</option>
  33.                             <optionvalue="20">20</option>
  34.                             <optionvalue="30">30</option>
  35.                             <optionvalue="40">40</option>
  36.                         </select>
  37.                     </span>
  38.                     <templatev-for="item in pageCount+1">
  39.                         <spanv-if="item==1"class="btn btn-default"v-on:click="showPage(1,$event)">
  40.                             首頁  
  41.                         </span>
  42.                         <spanv-if="item==1"class="btn btn-default"v-on:click="showPage(pageCurrent-1,$event)">
  43.                             上一頁  
  44.                         </span>
  45.                         <spanv-if="item==1"class="btn btn-default"v-on:click="showPage(item,$event)">
  46.                             {{item}}  
  47.                         </span>
  48.                         <spanv-if="item==1&&item<showPagesStart-1"class="btn btn-default disabled">
  49.                             ...  
  50.                         </span>
  51.         

相關推薦

Vue.js結合bootstrap實現的分頁控制元件

原文地址：http://blog.csdn.net/qiuhaotc/article/details/53031884 使用 vue.js 結合 bootstrap 開發的分頁控制元件 效果如下 實現程式碼

使用 Vue.js 結合bootstrap 實現的分頁控制元件

使用 vue.js 結合 bootstrap 開發的分頁控制元件 效果如下 實現程式碼 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <

初識Vue.js 利用iview實現分頁查詢和條件查詢

最近新專案前端框架用的jquery+vue+iview  起初可以說是對vue一無所知，但是，經過近十天的應用，也掌握了一些東西，今天主要梳理一下關於自己今天用到vue做查詢和分頁，用於分享給大家以及給自己以後作為review。廢話不說，直接懟程式碼。前臺頁面如下：這些標籤是

.Net MVC4 使用心得（三）實現分頁控制元件

      之前寫的，很凌亂，而且，幾乎不粘程式碼，這不便於理解和也無法直接尋找可用程式碼。以後的文章會盡量引入程式碼例項。       這次需要一個翻頁控制元件。之前webform直接拖個aspnetpager，寫寫前臺樣式和後臺程式碼就好了，需要資料繫結時可以直接用pa

Vue.js 結合bootstrap 前端實現分頁效果

Vue.js 結合bootstrap 前端實現分頁和排序效果 寫之前先抱怨幾句。本來一心一意做.net開發的，漸漸地成了只做前端。最近專案基本都用java做後臺，我們這些.net的就成了前端，不是用wpf做介面，就是用html寫web頁面。 深知自己前端技術

js+bootstrap實現分頁、頁碼跳轉

製作page.jsp，在其他頁碼引入，只需把最外層的form標籤的id設定為myForm； 其中　　totalPages:共有多少頁；totalElements：共有有多少條記錄；currentPage：第幾頁 <%@ page language="jav

bootstrap 分頁控制元件，實現直接轉到某頁

效果圖： html： <div class="form-inline"> <div class="pagination form-group ">

jQuery 分頁插件（jQuery.pagination.js）ajax 實現分頁

height var 實現 before 狀態 pin 好的 調用 是否 首先需要引入jQuery 再次需要引入 <script src="jquery/jquery.pagination.js"></script>同時也要引入 <link r

Angularjs+Bootstrap實現分頁指令

效果圖 博客 要求 config 大小 cti 說明 cal 自己 　　本插件的開發目的主要給前端同學使用，本人是專註於後臺開發的，對css樣式不熟悉，但逼於前端要求做一個共公組件方便日常開發，所以這個插件在樣式上可能不適合大部分人，喜歡的拿走吧，不喜歡的也請別噴。 一

bootstrap實現分頁（例項）

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

vue中整合pdfjs實現分頁線上預覽

<template> <div id="div_read_area_scrool" class="no-scrollbar--x" :style="'text-align:center;height:'+ '500px;'+'overflow: auto;

js與jquery實現分頁

方法一<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"        "http://www.w3.org/TR/html4/loose.dtd"><html><head

WinForm下編寫分頁控制元件，實現DataGridView的分頁效果

     前幾天做C/S專案的時候用到了分頁查詢，所以就想去網上找一些封裝好的分頁控制元件，類似BS專案中的那種。但是找了好幾個都不是特別的好，沒有自己想要的。而且WinForm 裡面的DataGridView也不像WebForm裡面的GridView那樣有自帶的分

Spring Boot和Thymeleaf整合，結合JPA實現分頁效果

    在專案裡，我需要做一個Spring Boot結合Thymeleaf前端模版，結合JPA實現分頁的演示效果。做的時候發現有些問題，也查了現有網上的不少文件，發現能全棧實現的不多，所以這裡我就把我的做法，全部程式碼和步驟貼出來供大家參考。 1 建立專案，用pom.xml引入依賴 &nb

分頁控制元件

TestQuery.jsp： <%@ page pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>訂

分頁控制元件中的數字按鈕計算方法

計算思想： 以當前頁碼為標杆，使用卡尺的思想，左移，右移，再左移，最後得到起始、結束位置的按鈕頁碼。 @{ var param = new { Page = 18, //當前頁 NumberButton = 5,//數字按鈕的個數

分享一個Winform下的分頁控制元件

分享一下我老師大神的人工智慧教程！零基礎，通俗易懂！http://blog.csdn.net/jiangjunshow 也歡迎大家轉載本篇文章。分享知識，造福人民，實現我們中華民族偉大復興！        

無廢話MVC入門教程八[MvcPager分頁控制元件的使用]

MVC入門系列教程-視訊版本，已入駐51CTO學院，文字+視訊學效果更好哦。視訊連結地址如下： 點我檢視視訊。另外，針對該系列教程博主提供有償技術支援，群號：226090960，群內會針對該教程的問題進行及時解答，公用性問題統一講解。學習.NET MVC 只看在《無廢話系列》足夠了，《無廢話系列》簡單、快速、

自己做過分頁功能嗎?我們一起打造自己的分頁控制元件

一、概述 這些日子在做一套系統,基本上告了一段落,其中包括分頁相關的功能. 主要涉及:Url分頁和Ajax 分頁.而基本上開發中所用到的就這兩種,當然有其他的方式,我們就不說了. 為什麼會談及這兩種分頁呢,原因如下 ajax 分頁使用者體驗好,效能更好. Url 分頁對於搜尋引擎友好. 而做的這套

打造通用ASP.NET資料分頁控制元件

　　對於幾乎所有的資料表現Web應用來說，組織好資料的顯示方式、避免給使用者帶來混亂的感覺就是最主要的目標之一。每個頁面顯示20條記錄當然是可以接受的，但每頁顯示10000條記錄就很容易給使用者帶來不便了。將資料分成多個頁面顯示，即對資料進行分頁，是解決此類問題的最常見的辦