jqPaginator结合express实现分页展示内容效果第1/2页

写在前面的话

分页展示内容也是我们在页面开发中经常会遇到的需求
前端页面利用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>
 <div style="text-align: center;">
  <ul class="pagination" id="pagination1"></ul>
 </div>

 </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下一页阅读全文


您可能感兴趣的文章:


    

  • 使用bootstrap-paginator.js 分页来进行ajax 异步分页请求示例
    • 

  • 基于vue实现分页/翻页组件paginator示例
    • 

  • 根据Bootstrap Paginator改写的js分页插件
    • 

  • Bootstrap分页插件之Bootstrap Paginator实例详解
    • 

  • Bootstrap Paginator分页插件使用方法详解
    • 

  • Bootstrap Paginator分页插件与ajax相结合实现动态无刷新分页效果
    • 

  • 用jQuery中的ajax分页实现代码
    • 

  • jQuery scroll事件实现监控滚动条分页示例
    • 

  • JQuery+Ajax无刷新分页的实例代码
    • 

  • 基于jQuery的实现简单的分页控件
    • 



Tags：jqPaginator express 分页


相关文章


    

  • 2016-04-04jQuery qrcode生成二维码的方法
    • 

  • 2010-08-08JQuery中each()的使用方法说明
    • 

  • 2016-05-05CKEditor无法验证的解决方案（js验证+jQuery Validate验证）
    • 

  • 2014-12-12jQuery+css实现百度百科的页面导航效果
    • 

  • 2016-06-06jQuery Ajax 上传文件处理方式介绍(推荐)
    • 

  • 2015-11-11jQuery实现Tab选项卡切换效果简单演示
    • 

  • 2010-11-11jQuery示例收集
    • 

  • 2011-05-05基于JQuery的动态删除Table表格的行和列的代码
    • 

  • 2016-02-02学习使用jquery iScroll.js移动端滚动条插件
    • 

  • 2014-06-06Javascript中的异步编程规范Promises/A详细介绍
    • 



最新评论
赞 (0)

相关推荐

  • 基于jQuery的实现简单的分页控件

    基于jQuery的实现简单的分页控件

    1:效果图 2:素材 3:编码 3.1思考 需要做什么? 1:分页控件需要向后台发送请求,发送的参数包括当前页,每页显示数量,查询条件:并且获取数据加载到当前页面: 2:进行修改删除操作的时候能记住当前页: 3:查询后翻页的时候可以可以记住当前查询的条件 3.2实现 HTML 复制代码 代码如下: <!--存储数据的容器--> <div class="tableData"> </div> <!--分页控件显示--> <div cla

  • 用jQuery中的ajax分页实现代码

    用jQuery中的ajax分页实现代码

    功能简介:主要功能就是分页显示数据了,可在配置文件中配置每页要显示的页码,可以做多条件联合查询,这里只是做一个简单的查询.欢迎拍砖,有问题的还望大虾们斧正哈.看看这个效果图,无刷新的噢!! 具体实现请看源码: 1.aspx页面 复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="AjaxPage.aspx.cs" Inherits="Measur

  • 基于vue实现分页/翻页组件paginator示例

    基于vue实现分页/翻页组件paginator示例

    序言 项目需要自己写了一个基于vue的paginator分享出来,欢迎各路好汉来指教 当页数小于999(包括999)页 页数大于999页 首页或尾页disabled 10页之内显示 Usage 参数 pageCount: 整数,代表总页数 监听事件 @togglePage: 监听切换页面事件,可以获取到当前前往页的页数 父组件调用方法 index.vue <template lang="html"> <div> <paginator :pageCount=

  • 根据Bootstrap Paginator改写的js分页插件

    根据Bootstrap Paginator改写的js分页插件

    刚刚出来实习,之前实习的公司有一个分页插件,和后端的数据字典约定好了的,基本上是看不到内部是怎么实现的,新公司是做WPF的,好像对于ASP.NET的东西不多,导师扔了一个小系统给我和另一个同事,指了两种框架的方案就让我们自己做了... 刚开始在网上找了一下,觉得bootstrap-paginator的api暴露出来,修改一下就可以做成之前实习公司的那种了,但是觉得没有跳转,很奇怪,想要一个,就动手在github上把源码拿下来了,不得不说,这代码写得真是比我这些实习码农好太多.(之前实习公司的组长

  • Bootstrap分页插件之Bootstrap Paginator实例详解

    Bootstrap分页插件之Bootstrap Paginator实例详解

    Bootstrap Paginator是一款基于Bootstrap的js分页插件,功能很丰富,个人觉得这款插件已经无可挑剔了.它提供了一系列的参数用来支持用户的定制,提供了公共的方法可随时获得插件状态的改变,以及事件来监听用户的动作.目前经过测试的浏览器包括: Firefox 5+, Chrome 14+, Safari 5+, Opera 11.6+ and IE 7+. 官网地址:http://bootstrappaginator.org/ DownloadVisit Project in

  • JQuery+Ajax无刷新分页的实例代码

    JQuery+Ajax无刷新分页的实例代码

    先看效果图: 实现原理很简单,使用了jquery.pagination这个插件,每当点击页码时异步去服务器去取该页的数据,简单介绍如下: 一.数据库表结构:很简单  就四个字段 分别是News_id  News_title  News_time  News_readtimes 二.前台页面代码: 复制代码 代码如下: <head runat="server">    <title>JQuery无刷新分页</title>    <link hre

  • Bootstrap Paginator分页插件使用方法详解

    Bootstrap Paginator分页插件使用方法详解

    最近做的asp.netMVC项目中需要对数据列表进行分类,这个本来就是基于bootstrap开发的后台,因此也就想着bootstrap是否有分页插件呢,或者说是基于jquery支持的分页功能,这样整体的网站后台风格便能够统一,又不用自己去写一套分页的功能. 首先便是要下载Bootstrap Paginator了,下载地址:Bootstrap Paginator分页插件 首先视图的上面应该需要引入js和css文件,主要有三个文件,分别是bootstrap的css,jquery以及Paginator

  • 使用bootstrap-paginator.js 分页来进行ajax 异步分页请求示例

    使用bootstrap-paginator.js 分页来进行ajax 异步分页请求示例

    使用bootstrap-paginator.js 分页来进行ajax 异步分页请求 具体的做法如下 : 首先定义一个异步提交请求的ajax 函数,其完整的函数如下: var nid= $("#lbnid").val(); // 获取当前新闻编号 var cpage = 1; // 当前页面号 var tpage = 10; // 总页面数 function getPaging() { getComment(cpage); //获取新闻评论 } //点击查看新闻评论 $("#o

  • jQuery scroll事件实现监控滚动条分页示例

    scroll事件适用于window对象,但也可滚动iframe框架与CSS overflow属性设置为scroll的元素. 复制代码 代码如下: $(document).ready(function () { //本人习惯这样写了    $(window).scroll(function () {        //$(window).scrollTop()这个方法是当前滚动条滚动的距离        //$(window).height()获取当前窗体的高度        //$(docume

  • Bootstrap Paginator分页插件与ajax相结合实现动态无刷新分页效果

    Bootstrap Paginator分页插件与ajax相结合实现动态无刷新分页效果

    Bootstrap Paginator分页插件下载地址: DownloadVisit Project in GitHub 1.这是需要分页的页面放的 js函数: <span style="font-size:14px;">function paging(page){ $.ajax({ type: "GET", url: "${ctx}/api/v1/user/1/"+(page-1)+"/5", dataType:

随机推荐