发任务做任务得网站,昆明网页建站平台,dw做网站实例,宝塔wordpress更换域名目录分页效果图如何分页代码分页
当表单数据过多时#xff0c;比较不容易浏览。这个时候就需要分页查看。
效果图 如何分页 1、首先确定总记录条数 len 2、单页浏览条数 page_number 3、页数 Total_pageslen % page_number 0 ? len / page_number : len / page_number 1;…
目录分页效果图如何分页代码分页
当表单数据过多时比较不容易浏览。这个时候就需要分页查看。
效果图 如何分页 1、首先确定总记录条数 len 2、单页浏览条数 page_number 3、页数 Total_pageslen % page_number 0 ? len / page_number : len / page_number 1; 计算出页数后就好办了,我们只需要对页码按钮设置点击事件事件内容为根据页数显示表格中的数据。数据用一个数组对象来保存我们只需要遍历数组对象在页面展示即可。 数据展示的范围为start为每页循环遍历数据数组的起点end为终点 如果当前页数大于1则start(pagethis-1)*page_number endstartpage_number 如果当前页数等于1则start0 endpage_number-1 如果end数据数组的最大下标值 则让end数据数组的最大下标值 代码
!DOCTYPE html
html langzh-CNheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0, maximum-scale1.0, user-scalable0,minimal-ui:iosmeta http-equivX-UA-Compatible contentieedgetitleDocument/titlelink relstylesheet hrefscript src/scriptlink hrefhttps://cdn.jsdelivr.net/npm/bootstrap3.3.7/dist/css/bootstrap.min.css relstylesheetstyle#main {width: 80%;margin: 20px auto;}nav {text-align: center;}/style
/headbodydiv idmaintable classtable table-borderedtbodytrth商品名称/thth商品价格/thth图片路径/th/tr/tbody/tablenav aria-labelPage navigationul classpaginationli idprea href# aria-labelPreviousspan aria-hiddentruelaquo;/span/a/li/ul/nav/div/body
script srchttps://cdn.jsdelivr.net/npm/jquery1.12.4/dist/jquery.min.js/script
script srchttps://cdn.jsdelivr.net/npm/bootstrap3.3.7/dist/js/bootstrap.min.js/script
scriptvar table document.querySelector(table)//模拟后台响应的数据var json [{product_id: 1001,product_name: java核心技术1,price: 120,imgurl: res/productimg/1.jpeg}, {product_id: 1002,product_name: java核心技术2,price: 130,imgurl: res/productimg/2.jpeg}, {product_id: 1003,product_name: web技术,price: 100,imgurl: res/productimg/3.jpeg}, {product_id: 1004,product_name: Mysql必知必会,price: 39,imgurl: res/productimg/4.jpeg}, {product_id: 1005,product_name: 中国近代史,price: 105,imgurl: res/productimg/4.jpeg}, {product_id: 1006,product_name: 世界史,price: 110,imgurl: res/productimg/1.jpeg}, {product_id: 1007,product_name: 高等数学,price: 50,imgurl: res/productimg/1.jpeg}, {product_id: 1008,product_name: 离散数学,price: 60,imgurl: res/productimg/1.jpeg}, {product_id: 1010,product_name: 线性代数,price: 50,imgurl: res\\productimg/3e83c2a6-b529-4bee-8ca9-ecc868b4d6f7.jpeg}, {product_id: 1011,product_name: 数据结构,price: 100,imgurl: res\\productimg/53dccb9f-b918-4a81-acc9-f99594992db1.jpeg}, {product_id: 1013,product_name: 人工智能,price: 120,imgurl: res\\productimg/94736781-046b-4c7c-8499-bebad2542b6f.jpg}, {product_id: 1014,product_name: 大数据,price: 120,imgurl: res\\productimg/f891569d-45e3-4b7f-a37e-980273f84508.jpg}];var ul document.querySelector(.pagination);var page_number 5; //单页浏览的条数var Total_pages; //页数var liAll; //页码按钮下标为 1到length-2是页数 0和length-1为上一页和下一页var pre; //上一页var next; //下一页function clearTable() {table.innerHTML tbodytrth商品名称/thth商品价格/thth图片路径/th/tr/tbody}window.onload function() {json.forEach(function(item, i) {var tbody document.querySelector(tbody);if (i page_number) {var tr document.createElement(tr);tr.innerHTML td${item.product_name}/tdtd${item.price}/tdtd${item.imgurl}/tdtbody.appendChild(tr);}})var len json.length; //总记录条数Total_pages len % page_number 0 ? len / page_number : len / page_number 1; //页数for (var i 1; i Total_pages; i) {ul.innerHTML li id${i}a href#${i}/a/li}ul.innerHTML li idnexta href# aria-labelNextspan aria-hiddentrueraquo;/span/a/li;liAll document.querySelectorAll(li);liAll[1].childNodes[0].style.color red; //初始第一页页码是红的// console.log([liAll])var pagethis 1; //当前是第几页for (var i 1; i liAll.length - 1; i) {liAll[i].onclick function() {for (var j 1; j liAll.length - 1; j) {liAll[j].childNodes[0].style.color blue}pagethis this.id; //获取当前是第几页liAll[pagethis].childNodes[0].style.color red;// console.log(liAll[i])let start; //当页数据的起始下标let end; //当页数据的结束下标if (pagethis ! 1) {start (pagethis - 1) * page_number;end start page_number;if (end json.length - 1) { //如果当页数据结束值大于总数据条数下标的值则赋值为总数据条数最大下标值end json.length - 1;}} else {start 0;end page_number - 1;}// console.log(start start)// console.log(end end)clearTable();var tbody document.querySelector(tbody);json.forEach(function(item, i) {if (i start i end) {var tr document.createElement(tr);tr.innerHTML td${item.product_name}/tdtd${item.price}/tdtd${item.imgurl}/tdtbody.appendChild(tr);}})}}pre document.querySelector(#pre) //上一页next document.querySelector(#next) //下一页pre.onclick function() {// alert(pagethis)if (pagethis ! 1) { //当前页数不等于1时执行上一页pagethis--;for (var j 1; j liAll.length - 1; j) {liAll[j].childNodes[0].style.color blue}liAll[pagethis].childNodes[0].style.color red;let start;let end;if (pagethis ! 1) {start (pagethis - 1) * page_number;end start page_number;if (end json.length - 1) {end json.length - 1;}} else {start 0;end page_number - 1;}clearTable();var tbody document.querySelector(tbody);json.forEach(function(item, i) {if (i start i end) {var tr document.createElement(tr);tr.innerHTML td${item.product_name}/tdtd${item.price}/tdtd${item.imgurl}/tdconsole.log(tr)tbody.appendChild(tr);}})}}next.onclick function() {// alert(pagethis)if (pagethis liAll.length - 2) { //当前页数小于最后一页则执行下一页pagethis;for (var j 1; j liAll.length - 1; j) {liAll[j].childNodes[0].style.color blue}liAll[pagethis].childNodes[0].style.color red;let start;let end;if (pagethis ! 1) {start (pagethis - 1) * page_number;end start page_number;if (end json.length - 1) {end json.length - 1;}} else {start 0;end page_number - 1;}clearTable();var tbody document.querySelector(tbody);json.forEach(function(item, i) {if (i start i end) {var tr document.createElement(tr);tr.innerHTML td${item.product_name}/tdtd${item.price}/tdtd${item.imgurl}/tdconsole.log(tr)tbody.appendChild(tr);}})}}}
/script/html
