基於jquery 的分頁外掛，前端實現假分頁效果
上次分享了一款jquery外掛，現在依舊分享這個外掛，不過上一次分享主要是用於regular框件，且每一頁資料都是從後端獲取過來的，這一次的分享主要是講一次性獲取完資料 然後手動進行分頁。此需求基本上是和前端搜尋掛鉤的。所有的資料都在頁面裡只是展示的不同。這樣前端搜尋就能從全部資料中進行搜尋，而不是尷尬的只能從某一頁裡進行搜尋，不過這種需求一般都在資料量較小的情況下才會使用，畢竟搜尋功能一般不是前端來實現的。
這次的外掛依舊是 http://106.2.44.116/src/javascript/base/jquery.pagination.js這款外掛。
至於這個框架的詳細用法我就不再說了，上一篇裡都寫了，現在直接從實現假分頁功能入手。
var list =[ {pic:"1",name:"zhang",number:"1234",section:"企業事業部"}, {pic:"2",name:"zhang",number:"1234",section:"企業事業部"}, {pic:"3",name:"zhang",number:"1234",section:"企業事業部"}, {pic:"4",name:"zhang",number:"1234",section:"企業事業部"}, {pic:"5",name:"zhang",number:"1234",section:"企業事業部"}, {pic:"6",name:"zhang",number:"1234",section:"企業事業部"}, {pic:"7",name:"zhang",number:"1234",section:"企業事業部"}, {pic:"8",name:"zhang",number:"1234",section:"企業事業部"}, {pic:"9",name:"zhang",number:"1234",section:"企業事業部"}, {pic:"10",name:"zhang",number:"1234",section:"企業事業部"}, {pic:"11",name:"zhang",number:"1234",section:"企業事業部"}, {pic:"12",name:"zhang",number:"1234",section:"企業事業部"}, ];
首先我們假定這組資料是從後端傳來的全部資料
接下來定義一個新陣列
var dataList =[];
我們假定需求為每頁展示4條資料
則第一步初始化分頁,具體配置資訊見上一遍部落格
$('.box').pagination({ totalData:12,//一共的條數 showData:4,//每頁展示的條數 coping:true, jump:true, keepShowPN:true, homePage:'首頁', endPage:'末頁', prevContent:'上頁', nextContent:'下頁', callback:function(api){ } },function(api){ $('.now').text(api.getCurrent()); });
分頁的效果為：（可自定義樣式，在css檔案中寫即可，詳細見上一篇）
第二步設定頁面預設看見的四條資訊，在整體回撥函式中寫
function(api){ $('.now').text(api.getCurrent()); for(var i=0;i<4;i++){ $("<div class=\"conDv\">"+ "<div class=\"pic\">"+list[i].pic+"</div>"+ "<div class=\"name\">"+list[i].name+"</div>"+ "<div class=\"number\">"+list[i].number+"</div>"+ "<div class=\"section\">"+list[i].section+"</div>"+ "</div>").appendTo("#con"); dataList.push(list[i]); } });
現在預設的四條已經展示出來了，如圖（樣式自己定義即可）
第三步：點選分頁操作時。在點選回撥中寫
callback:function(api){ $('.now').text(api.getCurrent()); api.getCurrent(); console.log((api.getCurrent()-1)*4+"到"+(api.getCurrent()-1)*4*2); $("#con").text(""); if(api.getCurrent() == 1){ for(var i=0;i<4;i++){ $("<div class=\"conDv\">"+ "<div class=\"pic\">"+list[i].pic+"</div>"+ "<div class=\"name\">"+list[i].name+"</div>"+ "<div class=\"number\">"+list[i].number+"</div>"+ "<div class=\"section\">"+list[i].section+"</div>"+ "</div>").appendTo("#con"); } }else{ var next= (api.getCurrent()-1)*4*2; if((api.getCurrent()-1)*4*2 >12){ next = 12; } for(var i= (api.getCurrent()-1)*4;i<next;i++){ $("<div class=\"conDv\">"+ "<div class=\"pic\">"+list[i].pic+"</div>"+ "<div class=\"name\">"+list[i].name+"</div>"+ "<div class=\"number\">"+list[i].number+"</div>"+ "<div class=\"section\">"+list[i].section+"</div>"+ "</div>").appendTo("#con"); } } }
其中第一頁和最後一頁要單獨處理，不能用通用公式，否則會報錯
至此一個簡單的分頁效果就完成了。效果如下，當點選第二頁時，效果如下：
下面一段完整的程式碼僅供大家參考
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <script src="js/jquery-1.10.2.min.js"></script> 7 <script src="js/jquery.pagination.js"></script> 8 <style> 9 #con{ 10 width:100%; 11 } 12 .conDv{ 13 width:200px; 14 height:300px; 15 float:left; 16 } 17 .conDv .pic,.conDv .name,.conDv .number,.conDv .section{ 18 width:100%; 19 height:20px; 20 text-align:center; 21 line-height:20px; 22 } 23 .box{ 24 position: absolute; 25 bottom:630px; 26 left:40px; 27 } 28 </style> 29 </head> 30 <body> 31 <div id="con"> 32 33 </div> 34 <div class="box"> 35 36 </div> 37 <script> 38 var list =[ 39 {pic:"1",name:"zhang",number:"1234",section:"企業事業部"}, 40 {pic:"2",name:"zhang",number:"1234",section:"企業事業部"}, 41 {pic:"3",name:"zhang",number:"1234",section:"企業事業部"}, 42 {pic:"4",name:"zhang",number:"1234",section:"企業事業部"}, 43 {pic:"5",name:"zhang",number:"1234",section:"企業事業部"}, 44 {pic:"6",name:"zhang",number:"1234",section:"企業事業部"}, 45 {pic:"7",name:"zhang",number:"1234",section:"企業事業部"}, 46 {pic:"8",name:"zhang",number:"1234",section:"企業事業部"}, 47 {pic:"9",name:"zhang",number:"1234",section:"企業事業部"}, 48 {pic:"10",name:"zhang",number:"1234",section:"企業事業部"}, 49 {pic:"11",name:"zhang",number:"1234",section:"企業事業部"}, 50 {pic:"12",name:"zhang",number:"1234",section:"企業事業部"}, 51 ]; 52 var dataList=[]; 53 54 $('.box').pagination({ 55 totalData:12, 56 showData:4相關推薦
基於jquery 的分頁外掛，前端實現假分頁效果
上次分享了一款jquery外掛，現在依舊分享這個外掛，不過上一次分享主要是用於regular框件，且每一頁資料都是從後端獲取過來的，這一次的分享主要是講一次性獲取完資料 然後手動進行分頁。此需求基本上是和前端搜尋掛鉤的。所有的資料都在頁面裡只是展示的不同。這樣前端搜尋就能從全
解決JPages分頁外掛，點選下一頁不會自動回到頂部的bug
最近在做一個手機端的失物招領系統，用到了JPages這個分頁外掛。 先簡單介紹一下JPages： jPages是一個客戶端分頁外掛，它比其他大多數外掛多了很多功能，比如自動翻頁，滾動瀏覽，顯示
vue根據表格分頁，前端實現方法
html: <el-table :data="tableData.slice((curPage-1)*pagesize,curPage*pagesize)" border style="width: 100%">
Jquery 分頁外掛， 帶你一步一步接入後臺資料
目錄 一、效果圖 二、分頁 js 原始碼講解 三、分頁樣式 css 原始碼 三、實現前後臺對接 一、效果圖 二、分頁 js 原始碼講解 新建一個 js 檔案，基本直接複製貼上就行，記得引入到需要的頁面中。 需要注意的是： 前面的建構函式
學習網站專案學習 - Django & Vue - 後臺進行過濾操作，前端實現課程類別分頁
目錄 一、實現思路總結 1-1 實現樣式 1-2 前端傳送分頁資料和課程請求 1-3 後臺路由接收，執行檢視函式 1-4 序列化元件校驗規則 1-5 通用狀態類 1-6 返回前端的資料查詢 1-7 前端獲取資料並渲染頁面 二、前端程式碼 三、表結構
分頁外掛，和反向生成工程進行增刪查改操作
反向生成工程可以直接通過資料庫表生成對應的實體類和dao層mapper配置檔案 在反向生成的專案配置檔案中修改以下幾點 1> <!--資料庫連線的資訊：驅動類、連線地址、使用者名稱、密碼 --> &nbs
圖片列表分頁外掛，相簿圖片展示，素材庫圖片展示
（1）第一種外掛效果圖如下： （2）第二種外掛效果圖如下： 兩種圖片分頁展示外掛，自己比較喜歡第一種，css等樣式，也用心除錯了一下，蘿蔔青菜各有所愛吧 ^_^ 提供的外掛是純前臺的指令碼，下載下來開啟index.html頁面即可看到效果。 也提供了通過AJAX載入資
PageHelper分頁外掛和easyUI實現分頁
場景需求：舊版mybatis分頁的，要單獨寫一個獲取總數的方法和查詢一模一樣（早就看它不順眼），索性升級一下 。 。過程中也碰到了不少死衚衕（想把自己打死） 。但是使用很簡單……真的很簡單，請看這哥子的文章 。 說明：舊版是SpringMVC和mybatis，只是在
SpringBoot整合Mybatis-Plus和PageHelper分頁外掛，附專案原始碼
1 pom.xml配置檔案 <?xml version="1.0" encoding="UTF-8"?> <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3
結合Tab，ViewPager，Fragment實現簡單分頁滑動
在APP設計當中，使用ViewPager和Fragment來實現分頁滑動並不少見，該設計可以利用少量的空間來實現多內容的展示。效果圖如下： 以下是實現該功能的程式碼： MainActivity public class MainActivity e
Django前端實現列表分頁顯示
有兩種方案： 一、使用Django的分頁外掛 詳細步驟參考http://blog.csdn.net/fighter_yy/article/details/41308277 缺點：django1.6版本之前無法使用 二、使用datatable(功能更強大，推薦）
listview分頁聯絡人，並實現打電話功能,
package com.contacts; import java.util.ArrayList; import java.util.HashMap; import java.util.List; import java.util.Map; import android.app.Activity; impor
分頁技術原理與實現之分頁的意義及方法（一）
轉載自https://www.jb51.net/article/86326.htm。 什麼是分頁技術 分頁,是一種將所有資料分段展示給使用者的技術.使用者每次看到的不是全部資料,而是其中的一部分,如果在其中沒有找到自習自己想要的內容,使用者可以通過制定頁碼或是翻頁的方式轉換可見內容,
H5 分幀(frameset) 使用分幀寫一個頁面，可以實現點選聯動效果
需要兩個檔案： 檔案3.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"
基於jQuery的公告無限迴圈滾動實現程式碼
基於jQuery的公告無限迴圈滾動實現程式碼，效果如下，多用於pc端電商網站之中不斷的迴圈更新的公告訊息。 寫一個簡單的小demo： <!DOCTYPE html> &l
vb讀取感測器溫溼度儲存到資料庫中，java實現呈現在頁面上
首先看一下最終的效果圖 資料庫圖片展示 最終程式碼: <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <%@taglib uri="http://ja
angularJs及layui前端進行假分頁
angularJs及layui前端進行假分頁 當後臺資料庫不多，沒必要進行後臺資料庫分頁時，可能取到的資料在頁面上一頁也顯示不了，所以要在前端的頁面上進行一個假分頁。 當angularJs的模型和layui的分頁 外掛結合起來使用時，ui頁面中繫結的model資料無法被感知，因此在點
Mabits的PageHelper分頁外掛的使用和Jsp分頁頁面展示(帶原始碼)
1.在Maven使用分頁外掛，修改pom.xml檔案 匯入包,本次使用的是4.0.0的版本 <properties> <pagehelper.version>4.0.0</pagehelper.version> </p
dwz配合分頁外掛的帶有條件上一頁下一頁（保證資料體系不變）
//無form的 listUi.jsp: 一般情況下有form，在查詢後返回查詢條件即可，（下一頁，上一頁時會自動呼叫這個form的action） 在特殊情況下：沒有form，當前頁面本來就是前面的條件查出的list，這樣點選下一個是由於沒有form沒有地方可跳轉，2，即使自己 加了一個form，用了相應
vue單頁應用，加入分頁後，點選到第二頁的時候，進入某個詳情頁，然後點選瀏覽器後退按鈕，並沒有返回到第二頁，而是返回到了首頁，並且重新整理了頁面，此時用keepAlive解決
import Vue from 'vue'; import Router from 'vue-router'; import CompanyList from '@/views/Company/List'; import CompanyDetail fr