jq Paginator結合express實現分頁效果-js教程-PHP中文網

首頁

web前端

js教程

jq Paginator結合express實現分頁效果

小云云

Jan 17, 2018 pm 03:10 PM

expresspaginator分頁

本文主要為大家詳細介紹了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(&#39;#pagination1&#39;, {
  totalPages: 100,
  visiblePages: 3,
  currentPage: 1,
  onPageChange: function (num, type) {
   if (type == &#39;change&#39;) {
     //这里是点击分页的回调
   }
  }
 });
 

 </script>
</html>

這裡我們可以方便的把分頁按鈕寫出來

後台程式碼

router.get(&#39;/pages&#39;, function (req, res, next) {
  // res.json({"name": 123});
  var page = req.query.page;
  var page = (--page)*5;
  var connection = mysql.createConnection({
    host: &#39;127.0.0.1&#39;,
    port: 3306,
    user: &#39;root&#39;,
    password: &#39;root&#39;,
    database: &#39;vr02&#39;
  });
  connection.connect(function(err) {
    if (err) {
      throw err;
    }
    console.log(&#39;连接数据库成功&#39;);
  });
  connection.query(&#39;select * from user limit ?, 5&#39;,当前1/2页 12下一页阅读全文

相關推薦：

簡單實作Ajax無刷新分頁效果

php實現分頁效果的範例

webpack+express多頁網站開發實例詳解

以上是jq Paginator結合express實現分頁效果的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

如何在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元素。

深入比较Express和Laravel：如何选择最佳框架？Mar 09, 2024 pm 01:33 PM

深入比较Express和Laravel：如何选择最佳框架？在选择一个适合自己项目的后端框架时，Express和Laravel无疑是两个备受开发者欢迎的选择。Express是基于Node.js的轻量级框架，而Laravel则是基于PHP的流行框架。本文将深入比较这两个框架的优缺点，并提供具体的代码示例，以帮助开发者选择最适合自己需求的框架。性能和扩展性Expr

Express和Laravel的对比分析：选择更适合你的框架Mar 10, 2024 pm 10:15 PM

Express和Laravel是两个非常流行的Web框架，分别代表了JavaScript和PHP两大开发语言的优秀框架。本文将针对这两个框架进行对比分析，帮助开发者选择更适合自己项目需求的框架。一、框架简介Express是一个基于Node.js平台的Web应用程序框架，它提供了一系列强大的功能和工具，使开发者可以快速搭建高性能的Web应用程序。Express

VUE3开发入门教程：使用组件实现分页Jun 16, 2023 am 08:48 AM

VUE3开发入门教程：使用组件实现分页分页是一个常见的需求，因为在实际开发中，我们往往需要将大量的数据分成若干页以展示给用户。在VUE3开发中，可以通过使用组件实现分页功能，本文将介绍如何使用组件实现简单的分页功能。1.创建组件首先，我们需要创建一个分页组件，使用“vuecreate”命令创建VUE项目，并在src/components目录下创建Pagin

Vue项目中如何实现数据的分页和显示优化Oct 15, 2023 am 09:27 AM

Vue项目中实现数据的分页和显示优化在Vue项目中，当页面需要展示大量数据时，通常需要进行数据的分页和显示优化以提高用户体验，本文将介绍如何使用Vue实现数据的分页和显示优化，并提供具体的代码示例。一、数据分页数据分页是指将大量数据按照一定的规则分割成多页，并在页面上进行分页显示。Vue项目中可以使用如下步骤来实现数据分页：定义数据源首先，定义一个包含所有数

如何使用 Vue 实现表格的分页和排序？Jun 25, 2023 pm 02:27 PM

Vue.js是一个逐步发展起来的JavaScript框架，能够帮助开发人员构建高质量的单页应用程序。随着前端开发逐渐成为主流技术，在这个领域，表格是开发人员经常需要使用的组件之一。表格的数据量可能非常大，因此我们需要使用分页和排序来方便和快速地查看、管理和处理数据。本文将详细介绍如何使用Vue实现表格的分页和排序。一、为表格添加分页为了在表格中添加

See all articles