从零开始做一个pagination分页组件

开始一个组件,毫无目的的写代码是一个不好的习惯,要经历 分析 => 抽象 => 实现 => 应用 四个阶段。

组件DEMO地址:https://github.com/CaptainLiao/zujian/tree/master/pagination

分析需求

当前页码显示前后三页,以及在两端显示上一页、下一页

未显示的地方用 ‘...'代替

举个栗子:

假设总共有30页

当前为第一页:1 2 3 4 ... 30 下一页

当前为第二页:上一页 1 2 3 4 5 ... 30 下一页

当前为第三页:上一页 1 2 3 4 5 6 ... 30 下一页
.

当前为第6页:上一页 1 ... 3 4 5 6 7 8 9 ... 30 下一页
.

当前为第29页:上一页 1 ... 26 27 28 29 30 下一页

当前为第30页:上一页 1 ... 27 28 29 30

抽象

分析上面的例子,发现决定输出的因素有两个:当前页码和总页数。

于是,我们设定一个函数用来表示当前页码的显示内容:

/**
 * @param {Number} page 当前页
 * @param {Number} totalPage 总页数
 */
function pagination(page, totalPage) {
  var str = '';
  // todo...

  return str;
}

// 运行函数,打印出值

var ret = pagination(4, 30)

console.log(ret)

>上一页 1 2 3 4 5 6 7 ... 30 下一页

实现

输入和输出都有了,接着正式开始撸:

function pagination(page, totalPage) {
  var str = page;
  // 这里实现当前页面显示前后三项功能
  for(var i=1; i< totalPage; i++) {
    if(page-i>1) {
      str = page-i +' '+ str;
    }
    if(page + i < totalPage) {
      str = str + ' ' + (page+i)
    }
  }

  // 以page为中心,向左右扩展

  // 向左,先判断当前page向左的第四个数是否大于 1
  if(page-4 > 1) {
    str = '... ' + page;
  }
  // 继续向左判断
  if(page >1) {
    str = "上一页" + '... ' +1 +' ' +str;
  }
  // 向右,判断当前page向右的第四个数字是否小于 totalPage
  if(page + 4 < totalPage) {
    str = '... '+ str;
  }
  if(page < totalPage) {
    str = str +' ' + totalPage +' '+ '下一页';
  }
  return str;
}

现在,我们可以执行下面的函数,取得我们想要的结果:

  var total = 30;
  for(var i = 1; i< total; i++) {
   var ret = showPage(i, total);
   console.log(ret)
  }

至此,我们已经实现了分页的逻辑。

应用

接下来的应用就非常简单了,不外乎是给str 加一些标签和class,于是我们就得到了一个分页组件:

HTML:

<ul id="pagination-list" class="clearfix2">

</ul>

javascript:

  function pagination(page, totalPage) {
    var str = '<li class="page-active">'+page+'</li>';
    for(var i=1; i<=3; i++) {
      if(page - i > 1) {
        str = '<li class="page-item">'+(page-i)+'</li>' +' '+ str;
      }
      if(page + i < totalPage) {
        str = str +" "+'<li class="page-item">'+(page+ i)+'</li>'
      }
    }
    if(page-4 >1) {
      str = '<li class="page-item">... </li>' +str;
    }
    if (page >1) {
      str= '<li class="page-up">上一页</li>'+ ' '+'<li class="page-item">1</li>' +' '+ str;
    }

    if(page+4< totalPage) {
      str = str+ '<li class="page-item"> ...</li>';
    }
    if(page < totalPage) {
      str = str + " " +'<li class="page-item">'+totalPage+'</li>' +" " +'<li class="page-down">下一页</li>'
    }
    return str;
  }
  var totalPage = 30;

  var str = pagination(1, totalPage);
  var wrap = $("#pagination-list");
  // 这里引用了 jQuery
  wrap.html(str)
    .on('click', '.page-item', function () {
      var cur = parseInt($(this).text());
      wrap.html(pagination(cur, totalPage));
    });

看看效果吧:

目前来说,进展顺利,但是!还有很多需要优化的地方:样式固定,不能自由更改;初始化和交互混杂在一起,没有对代码进行封装...

又经过一番折腾,这个分页组件终于完成,下载demo:

https://github.com/CaptainLiao/zujian/tree/master/pagination

现在,我们可以这样调用它:

<script>
  // #pagination-list 是组件的父容器,50 是总页数。
  $(function () {
    $("#pagination-list").pagination(50);
  })
</script>

是不是很酸爽呢?

如果继续扩展,我们还可以给组件更多的样式选择......

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • PHP框架Laravel插件Pagination实现自定义分页

    Laravel 的分页很方便,其实扩展起来也挺容易的,下面就来做个示例,扩展一下 paginate() 和 simplePaginate() 方法,来实现我们自定义分页样式,比如显示 "上一页" 和 "下一页" ,而不是 "<" 和 ">" ,当然扩展的方法掌握了你就可以肆无忌惮的扩展一个你想要的分页了,比如跳转到某一页,分页显示一共多少记录,当前显示的记录范围等等巴拉巴拉的... 5.1和5.2应该是同样的方法,

  • Jquery 分页插件之Jquery Pagination

    实用jQuery分页特效插件jquery.pagination.js,基于jQuery实现,可根据pageselectCallback函数callback调用通过ajax调用动态数据,目前的方法是生成JSON数据到JS文件,调用的数据是JSON格式数据,缺点是数据是一次性读出来的,效率会差些,插件支持众多参数的自定义配置功能,还是很不错的,大家可以根据自己的想法进行改进. 有同学问道jquery的简单分页插件,原来有同事写过一个简单[Javascript 使用回调函数的自定义分页插件--自带样式

  • jQuery Pagination Ajax分页插件(分页切换时无刷新与延迟)中文翻译版

    原项目地址:http://plugins.jquery.com/project/pagination版本:v1.2源文件下载:英文原版 或中文翻译修改版 一.相关demo 基本demo页面 Ajax demo页面 参数可编辑demo页面二.简介与说明 此jQuery插件为Ajax分页插件,一次性加载,故分页切换时无刷新与延迟,如果数据量较大不建议用此方法,因为加载会比较慢. 原插件CSS不太合理,使用浮动,故无法方便实现左右方向的定位,且未清除浮动,在中文修改版中我对其进行了优化,使其支持tex

  • jquery插件pagination实现无刷新ajax分页

    1.前台使用ajax无刷新分页,主要需要生成分页的工具条,这里使用的是jquery.pagination.js 插件参数可以参考----张龙豪-jquery.pagination.js分页 下面贴出代码 /** * This jQuery plugin displays pagination links inside the selected elements. * * @author Gabriel Birke (birke *at* d-scribe *dot* de) * @version

  • jQuery EasyUI API 中文文档 - Pagination分页

    用 $.fn.pagination.defaults 重写了 defaults. 依赖 linkbutton 用法 复制代码 代码如下: <div id="pp" style="background:#efefef;border:1px solid #ccc;"></div> 复制代码 代码如下: $('#pp').pagination({ total:2000, pageSize:10 }); 特性 名称 类型 说明 默认值 total n

  • jquery.pagination.js 无刷新分页实现步骤分享

    1.使用插件为 jquery.pagination.js ,如果没有这个js文件的话,我可以给发个. 首先引用 jquery.pagination.js (分页js),跟pagination.css(分页样式css). 2.页面js代码为 复制代码 代码如下: <script type="text/javascript"> var pageIndex = 0; //页面索引初始值 var pageSize = 15; //每页显示条数初始化,修改显示条数,修改这里即可 $(

  • jquery.pagination +JSON 动态无刷新分页实现代码

    aspx 页面: 复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="SqlPage.aspx.cs" Inherits="SqlPage" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w

  • jquery pagination插件实现无刷新分页代码

    先把要用到的文件依次进入进来: 复制代码 代码如下: <script src="common/jquery.js" type="text/javascript"></script> <script src="common/jquery.pagination.js" type="text/javascript"></script> <link href="commo

  • asp.net jquery无刷新分页插件(jquery.pagination.js)

    采用Jquery无刷新分页插件jquery.pagination.js 实现无刷新分页效果 友情提示:本示例Handler中采用StringBuilder的append方法追加HTML,小数据量可以,但是大数据或是布局常变,建议返回JSON格式的数据,性能和灵活性更好! 1.插件参数列表  2.页面内容: 复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Defaul

  • 从零开始做一个pagination分页组件

    开始一个组件,毫无目的的写代码是一个不好的习惯,要经历 分析 => 抽象 => 实现 => 应用 四个阶段. 组件DEMO地址:https://github.com/CaptainLiao/zujian/tree/master/pagination 分析需求 当前页码显示前后三页,以及在两端显示上一页.下一页 未显示的地方用 '...'代替 举个栗子: 假设总共有30页 当前为第一页:1 2 3 4 ... 30 下一页 当前为第二页:上一页 1 2 3 4 5 ... 30 下一页 当

  • jQuery从零开始做一个分页组件功能示例

    本文实例讲述了jQuery从零开始做一个分页组件功能.分享给大家供大家参考,具体如下: 开始一个组件,毫无目的的写代码是一个不好的习惯,要经历 分析 => 抽象 => 实现 => 应用 四个阶段. 组件DEMO地址:https://github.com/CaptainLiao/zujian/tree/master/pagination 分析需求 当前页码显示前后三页,以及在两端显示上一页.下一页 未显示的地方用 '...'代替 举个栗子: 假设总共有30页 当前为第一页:1 2 3 4

  • Vue.js实现一个自定义分页组件vue-paginaiton

    vue实现一个分页组件vue-paginaiton vue使用了一段时间的感触就是,我再也不想直接操作DOM了.数据绑定式的编程体验真是好.实现的一个分页组件. 这里的css就不放出来了,可以看直接去github上下载:vue-pagination 先上一张实例图吧 模版 <div class="page-bar"> <ul> <li v-if="showFirstText"><a v-on:click="cur-

  • React-Native做一个文本输入框组件的实现代码

    由于最近一直在做公司的项目,而且比较急.如今项目已经迭代到第三期,可以缓一缓了... 说实话,最近一直再用android做开发,而且时间也不宽裕,react-native有点生疏了. 好了,废话不多说,今天在做登录界面的时候,我发现,登录注册的文本框样式都是一个样的,如果一个一个的写,就会显得有些麻烦了,于是我就简单的封装了一下TextInput这一个组件 上图就是我放到登录界面的效果啦. 代码: import React, { Component } from 'react'; import

  • Vue全局分页组件的实现代码

    需求 一个监控控制台界面,有成千上万条表格数据,需要做一个全局分页组件,支持调整每页显示数目.总页数.当前页数.前进后退.自由跳转页数. 字段 参数名 数据类型 说明 total Number 总条数 pageNo Number 总页数 limit Number 每页展示条数 原型 预期长酱紫(不要嫌丑!毕竟是后台控制台!) 代码 html <template> <div class="paging-content clearfix"> <div clas

  • 基于Vue如何封装分页组件

    使用Vue做双向绑定的时候,可能经常会用到分页功能 接下来我们来封装一个分页组件 先定义样式文件 pagination.css ul, li { margin: 0px; padding: 0px; } .page-bar { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-se

  • 使用Vue构建可重用的分页组件

    Web应用程序中资源分页不仅对性能很有帮助,而且从用户体验的角度来说也是非常有用的.在这篇文章中,将了解如何使用Vue创建动态和可用的分页组件. 基本结构 分页组件应该允许用户访问第一个和最后一个页面,向前和向后移动,并直接切换到近距离的页面. 大多数应用程序在用户每次更改页面时都会发出API请求.我们需要确保组件允许这样做,但是我们不希望在组件内发出这样的请求.这样,我们将确保组件在整个应用程序中是可重用的,并且请求都是在操作或服务层中进行的.我们可以通过使用用户单击的页面的数字触发事件来实现

  • 基于Vue.js的表格分页组件

    一.Vue.js简介 1.Vue的主要特点: (1) 简洁 (2) 轻量 (3)快速 (4) 数据驱动 (5) 模块友好 (6) 组件化 (1) 简洁 下面看一段Angular的实现双向绑定的代码 // html <body ng-app="myApp"> <div ng-controller="myCtrl"> <p>{{ note }}</p> <input type="text" ng-

  • Vue.js分页组件实现:diVuePagination的使用详解

    一.介绍 Vue.js 是什么 Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合.另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动. 二.创建初始化项目 这里不在详细说明,我们的分页演示只需要vue和vue-router就可以了,我们直接构建项目和设置配置. main.js:

  • 小程序分页实践之编写可复用分页组件

    项目中遇到 tab切换列表,每个tab都需要分页的需求,分页流程具有相似性,于是想将分页封装为组件,方便应用. 组件的应用已写成一个小demo,效果如下图所示(数据用mock模拟): 源码可以查看:wxapp-pagination 项目需求 具体项目需求: 查看自己相关的会议(页面命名为 meetings) tab切换,分为: "我的会议"(我参加的会议,后面会以 "join" 为 key区分) "我的预约"(我预约的会议,后面会以 "

随机推荐