jq Paginator結合express實現分頁效果
本文主要為大家詳細介紹了jqPaginator結合express實現分頁展示內容效果，具有一定的參考價值，有興趣的小伙伴們可以參考一下，希望能幫助到大家。
寫在前面的話
分頁展示內容也是我們在頁面開發中經常會遇到的需求
前端頁面利用jqPaginator這個jquery插件來編寫
後端利用mysql儲存資料
開始敲程式碼
#回顧sql知識
首先讓我們回顧一下sql語句，我們只想查詢出資料表裡的某幾條用limit實作
select * from 表名limit [offset,] rows
#其中，limit後面可以跟兩個參數，也可以跟一個參數。
跟著一個參數表示rows，相當於offset=0,從資料表中的第一筆記錄開始查詢出rows筆資料。
跟兩個參數的話，第一個是從0開始的偏移量，第二個參數表示想查詢出來的記錄數。
利用jqPaginator這個優秀的jquery分頁外掛程式寫一個分頁條
注意：這個分頁是基於bootstrap3.1.1寫出來的
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="http://cdn.staticfile.org/twitter-bootstrap/3.1.1/css/bootstrap.min.css"/>
</head>
<body>
<p style="text-align: center;">
<ul class="pagination" id="pagination1"></ul>
</p>
</body>
<script src="/javascripts/jquery.min.js"></script>
<script src="/javascripts/jqPaginator.js"></script>
<script>
$.jqPaginator('#pagination1', {
totalPages: 100,
visiblePages: 3,
currentPage: 1,
onPageChange: function (num, type) {
if (type == 'change') {
//这里是点击分页的回调
}
}
});
</script>
</html>
這裡我們可以方便的把分頁按鈕寫出來
後台程式碼
router.get('/pages', function (req, res, next) {
// res.json({"name": 123});
var page = req.query.page;
var page = (--page)*5;
var connection = mysql.createConnection({
host: '127.0.0.1',
port: 3306,
user: 'root',
password: 'root',
database: 'vr02'
});
connection.connect(function(err) {
if (err) {
throw err;
}
console.log('连接数据库成功');
});
connection.query('select * from user limit ?, 5',当前1/2页 12下一页阅读全文相關推薦：
以上是jq Paginator結合express實現分頁效果的詳細內容。更多資訊請關注PHP中文網其他相關文章！
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
PHP開發：如何實作表格資料排序與分頁功能
Sep 20, 2023 am 11:28 AM
PHP開發：如何實現表格資料排序和分頁功能在進行Web開發中，處理大量資料是一項常見的任務。對於需要展示大量資料的表格，通常需要實現資料排序和分頁功能，以提供良好的使用者體驗和最佳化系統效能。本文將介紹如何使用PHP實作表格資料的排序和分頁功能，並給出具體的程式碼範例。排序功能實作在表格中實作排序功能，可以讓使用者根據不同的欄位進行升序或降序排序。以下是一個實作表格
如何在CakePHP中建立自訂分頁？
Jun 04, 2023 am 08:32 AM
CakePHP是一個強大的PHP框架，為開發人員提供了許多有用的工具和功能。其中之一是分頁，它可以幫助我們將大量資料分成幾頁，從而簡化瀏覽和操作。預設情況下，CakePHP提供了一些基本的分頁方法，但有時你可能需要建立一些自訂的分頁方法。這篇文章將向您展示如何在CakePHP中建立自訂分頁。步驟1：建立自訂分頁類別首先，我們需要建立一個自訂分頁類別。這個
node專案中如何使用express來處理檔案的上傳
Mar 28, 2023 pm 07:28 PM
怎麼處理文件上傳？以下這篇文章為大家介紹一下node專案中如何使用express來處理文件的上傳，希望對大家有幫助！
使用JavaScript實作表格資料的分頁顯示
Jun 16, 2023 am 10:00 AM
隨著數據的不斷增長，表格顯示變得更加困難。大多數情況下，表格中的資料量過大，導致表格在載入時變得緩慢，而且使用者需要不斷地瀏覽頁面才能找到自己想要的資料。本文將介紹如何使用JavaScript實作表格資料的分頁顯示，讓使用者更容易找到自己想要的資料。一、動態建立表格為了讓分頁功能更可控，需要動態建立表格。在HTML頁面中，新增一個類似下面的table元素。
如何使用 JavaScript 實作表格分頁功能？
Oct 20, 2023 pm 06:19 PM
如何使用JavaScript實作表格分頁功能？隨著網路的發展，越來越多的網站都會使用表格來展示數據。在某些資料量較大的情況下，需要將資料進行分頁展示，以提升使用者體驗。本文將介紹如何使用JavaScript實作表格分頁功能，並提供具體的程式碼範例。一、HTML結構首先，我們需要準備一個HTML結構來承載表格和分頁按鈕。我們可以使用<tab
MyBatis分頁插件原理詳解
Feb 22, 2024 pm 03:42 PM
MyBatis是一個優秀的持久層框架，它支援基於XML和註解的方式操作資料庫，簡單易用，同時也提供了豐富的插件機制。其中，分頁插件是使用頻率較高的插件之一。本文將深入探討MyBatis分頁外掛的原理，並結合具體的程式碼範例進行說明。一、分頁外掛原理MyBatis本身並沒有提供原生的分頁功能，但可以藉助外掛程式來實現分頁查詢。分頁插件的原理主要是透過攔截MyBatis
如何利用Layui開發一個具有分頁功能的資料展示頁面
Oct 24, 2023 pm 01:10 PM
如何利用Layui開發一個具有分頁功能的資料展示頁面Layui是一個輕量級的前端UI框架，提供了簡潔美觀的介面元件和豐富的互動體驗。在開發中，我們經常會遇到需要展示大量資料並進行分頁的情況。以下是利用Layui開發的具有分頁功能的資料展示頁面的範例。首先，我們需要引入Layui的相關文件和依賴。在html頁面的<head>標籤中加入以下代
Vue組件實戰：分頁組件開發
Nov 24, 2023 am 08:56 AM
Vue元件實戰：分頁元件開發介紹在網路應用程式中，分頁功能是不可或缺的一個元件。一個好的分頁元件應該展示簡潔明了，功能豐富，而且易於整合和使用。在本文中，我們將介紹如何使用Vue.js框架來開發一個高度可自訂化的分頁元件。我們將透過程式碼範例來詳細說明如何使用Vue元件開發。技術堆疊Vue.js2.xJavaScript(ES6)HTML5和CSS3開發環
