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