基於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