前端分页(详细步骤)

一、思路

1.设置全局变量，当前页，总页数，总条数，每页显示多少条，所有页数据，当前页数据，start（总数据开始截取位置）、end（总数据结束截取位置）

2.调用接口，请求到所有的数据后，改变相应的全局变量

3.通过对总数据进行filter过滤得到当前页数据，然后把数据渲染到表格上，

4.其他操作：如页码的点击、左右箭头的点击都会改变当前页的内容，就是改变相应全局变量，然后重新过滤当前页数据，然后进渲染到页面上

二、具体步骤

1.定义变量

//当前页
let nowPage = 1// 每页显示多少条
let pageCount = 2// 总页数
let totalPage// 总条数
let totalNumber// 总内容
let totalArr// 当前页内容
let pageArr//总数据过滤开始的位置
let start//总数据过滤结束的位置
let end//判断搜索还是展现数据（不用管）
let flag = true

2.调用接口

//基于jQuery
$(function() {get_cxc_table_data()
})// 请求数据
function get_cxc_table_data() {flag = true$.ajax({url: BASEURL + TEAMCONTRACTLIST,type: 'post',success(res) {//改变相应的全局变量//总条数totalNumber = res.data.length//所有数据totalArr = res.data//渲染表格的方法addTable(totalArr, nowPage, pageCount)// 创建页数的方法addPage(totalArr.length)}})
}

3.渲染表格

// 动态添加到table表格中
//@params arr:渲染的数据
//@params now:当前页
//@params count:每页显示几条数据
function addTable(arr, now, count) {// 将之前的表格清空$('#teamList').html('')//渲染的字符串let tr = ''//过滤总数据开始的位置和结束的位置//规律//（当前页数-1）*每页显示几条数据<**当前页的数据**<当前页*每页显示几条数据start = (now - 1) * countend = now * count// 过滤中数据得到当前页数据 pageArr = arr.filter((item, index) => {return index >= start && index < end})//循环当前页的数据到表格中pageArr.forEach(item => {console.log(item);tr += `<tr><td><a href="lookfamilydoctor.html?tid=${item.d_id}" style="color: #1D65A6;">${item.d_name}                          </a></td><td>${item.d_sex}</td><td>${item.d_sid}</td><td>${item.d_tel}</td><td>${item.d_join}</td><td>${item.d_feature}</td><td><button data-id=${item.d_id} type="button" class="btn btn-danger cxc_xiugai"><spanclass="iconfont icon-xiugai">修改</span></button><button data-id=${item.d_id} type="button" class="btn btn-warning shanchuzwy" ><spanclass="iconfont icon-shanchu">删除</span></button></td></tr>`});$('#teamList').append(tr)
}

4.动态创建页数

// 动态创建页数
function addPage(length) {// 将之前页码等清空$('.zwy_par').html('')//总页数totalPage = Math.ceil(length / pageCount)// 添加总页数let allPage = `<div id='zwylb4' class='zwy_par'><div id="zwylb1">共有${totalNumber}条数据</div></div>`$('#zwylb2').before(allPage)// 将之前的清空$('#zwylb3').html('')// 添加左箭头let strstr = `<button type="button"  class="btn btn-default cxc_left_button" ;background-color: #fff;">< </button>`// 添加页码for (let i = 1; i <= totalPage; i++) {str += `<button type="button" class="btn btn-default  cxc_button">${i}</button>`}// 添加右箭头str += `<button type="button" class="btn btn-default cxc_right_button" ;">></button>`$('#zwylb3').append(str)
}

5.其他方法

点击改变相应的全局变量，重新渲染就可以了

// 每页显示多少条
$('.zwywb_child').on('change', '#zwylb2', function() {console.log(this);pageCount = $('#zwylb2>option:selected').val()get_cxc_table_data()
})//左右箭头的点击，做越界判断
$(document).on('click', '.cxc_left_button', function() {if (nowPage > 1) {nowPage--get_cxc_table_data()}
})$(document).on('click', '.cxc_right_button', function() {if (nowPage < totalPage) {nowPage++get_cxc_table_data()}
})// 页码的点击
$(document).on('click', '.cxc_button', function() {nowPage = $(this).text()$('#zwlb4').val($(this).text())if (flag == true) {get_cxc_table_data()} else {searchDoctor()}
})// 输入跳转到多少页回车跳转
$('#zwlb4').on('change', function(e) {if ($('#zwlb4').val() <= totalPage && $('#zwlb4').val() > 0) {nowPage = $('#zwlb4').val()get_cxc_table_data()}
})

前端分页(详细步骤)相关推荐

Vue后台 - 利用 mockjs 完成数据的获取、编辑、增加、删除和分页【详细步骤篇】
文章目录一.前言二.项目原型和大致需求在这里插入图片描述三.项目目录四.详细步骤 1.新建一个mock文件,写接口,在页面中调用拿到mock数据 2.获取数据,完成分页和查询功能 3.新增. ...
vue2引入Element UI的详细步骤
目录一.Element UI介绍 Element UI的特点: vue3引入Element plus的文章: 二.操作步骤三.快速上手测试(可做可不做) 一.Element UI介绍 Elemen ...
Jquery前端分页插件pagination同步加载和异步加载
上一篇文章介绍了Jquery前端分页插件pagination的基本使用方法和使用案例,大致原理就是一次性加载所有的数据再分页.https://www.jianshu.com/p/a1b8b1db025 ...
Flink实例-Wordcount详细步骤
link实例之Wordcount详细步骤 1.我的IDE是IntelliJ IDEA.在官网上https://www.jetbrains.com/idea/下载最新版2018.2的IDEA,如下图.破 ...
Zabbix3.4安装详细步骤
Zabbix3.4安装的详细步骤一.zabbix介绍现在大多数公司都会用到监控软件,主流的监控软件就是Zabbix了,当然还会有Nagios等其他的软件: zabbix是一个基于WEB界面的提供分 ...
springboot配置shiro多项目实现session共享的详细步骤
springboot配置shiro多项目实现session共享的详细步骤公司需要这样的需求: 有两个项目master 主项目.suiteone 项目,两个项目各自由shiro 安全框架管理,当不能登 ...
悟空CRM9从零开始搭建详细步骤——肯定成功
悟空CRM9从零开始搭建详细步骤 -------------------------------------- 欢迎留言,欢迎各位一起加入开源,愿意共享分享学习经验. 特别感谢打赏点赞的朋友,我们一起 ...
node.js 安装详细步骤
初学NodeJS,就是要弄清楚什么是nodejs,能做什么,怎么用.. 什么是nodejs? 脚本语言需要一个解析器才能运行,JavaScript是脚本语言,在不同的位置有不一样的解析器,如写入htm ...
Linux安装mysql详细步骤
linux安装mysql详细步骤最近买了个腾讯云服务器,搭建环境. 该笔记用于系统上未装过mysql的干净系统第一次安装mysql.自己指定安装目录,指定数据文件目录. linux系统版本: Cen ...
h5接微信js-sdk的详细步骤
h5接微信js-sdk的详细步骤 JS-SDK配置流程(前端需要做的) 1.配置JS安全域名 2.服务接入 3.引入Js文件 4.使用wx.config进行权限验证 5.代码 JS-SDK配置流程(后 ...