前端开发中ajax实例：按需加载分页组件

by 前端开发者 · Published 2018年5月13日21:05:26 · Updated 2018年5月13日21:34:05

摘要：前端开发中ajax实例|前端开发者 html 代码 <!DOCTYPE html> <html lang=”en”> <head> <meta charset=”UTF-8″> ……

前端开发中ajax实例|前端开发者

html 代码

<!DOCTYPE <a href="https://www.rokub.com/category/html" title="html">html</a>> <<a href="https://www.rokub.com/category/html" title="html">html</a> lang=”en”> <head> <meta charset=”UTF-8″> <title>分页</title> <style type=”text/<a href="https://www.rokub.com/category/css" title="css">css</a>”> body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;}<a href="https://www.rokub.com/category/html" title="html">html</a>{font-size: 12px;}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;}table{border-collapse:collapse;border-spacing:0;}q:before,q:after{content:”;}object,embed{vertical-align:top;}hr,legend{display:none;}img,abbr,acronym,fieldset{border:0;}ul li{list-style-type:none;}a,label{cursor:pointer;}img{vertical-align:bottom;margin:0;padding:0;}a{text-decoration:none;outline: none;}.clearfix:after{content: “.”; visibility: hidden; display: block; height: 0.1px; font-size:0.1em; line-height: 0; clear: both;}.clearfix {*zoom:1;}input ,textarea,select{outline: none;border:1px solid #e6e6e6;}button{cursor: pointer;color: #666;}textarea{resize: none;outline: none;overflow: hidden;padding: 5px;}select{outline: none;}a{color: #808080;} <a href="https://www.rokub.com/category/html" title="html">html</a> { font-family: “Microsoft YaHei”,tahoma,arial,”Hiragino Sans GB”,”\5b8b\4f53″,sans-serif; color: #333; font-size: 12px; } body { background-color: #f2f2f2; } /*公共分页开始*/ .com-page { display: none; margin: 50px auto; width: 1190px; text-align: center; color: #4d4d4d; } .com-page .page-item { display: inline-block; margin-right: 2px; width: 34px; line-height: 30px; background: #fff; color: #4d4d4d; border:1px solid #e6e6e6; box-sizing: border-box; } .com-page .page-active { background: #f05b1a; color: #fff; border-color: #f05b1a; } .com-page .page-item:hover { border-color: #f05b1a; color: #f05b1a; } .com-page .page-active:hover { color: #fff; } .com-page .page-prev, .com-page .page-next { width: 74px; } .com-page .page-trun-box { display: inline-block; margin-left: 10px; } .com-page .page-turn-input { width: 30px; height: 30px; line-height: 30px; padding: 0 5px; } .com-page .page-trun-btn { display: inline-block; width: 40px; line-height: 30px; background: #fff; border:1px solid #e6e6e6; } .com-page .unable-page { background: #d2d2d2; cursor:not-allowed; } .com-page .pages-box { display: inline-block; } /*公共分页结束*/ </style> </head> <body> <div class=”com-page” id=”comPage”></div> <script src=”http://static.nysochina.com/static/<a href="https://www.rokub.com/category/javascript" title="js">js</a>/lib/<a href="https://www.rokub.com/category/jquery" title="jquery">jquery</a>-1.11.1.min.<a href="https://www.rokub.com/category/javascript" title="js">js</a>”></script> <script> (function ($) { $.fn.pager = function(options ,fn) { // 注入的<a href="https://www.rokub.com/category/html" title="html">html</a>结构 var html = ‘<a href=”javascript:;” class=”page-prev page-item unable-page”><上一页</a><div class=”pages-box” id=”pagesBox”></div><a href=”javascript:;” class=”page-item page-next”>下一页></a><div class=”page-trun-box”>共100页， 向第<input type=”text” class=”page-turn-input” onkeyup=”value=value.replace(/[^\d]/g,””)” /> 页 <a href=”javascript:;” class=”page-trun-btn”>跳转</a></div>’; // 初始化 $(this).html(”).append(html); var defaultParams = { index : 1,//当前页数 pageTotal : 0,//总页数 min : 0, max : 10//最多显示多少页码数 }, $oThis = $(this), $pagesBox = $oThis.find(‘#pagesBox’), $allPages = $oThis.find(‘.all-pages’), $pagePrev = $oThis.find(‘.page-prev’), $pageNext = $oThis.find(‘.page-next’), $pageTrun = $oThis.find(‘.page-trun-btn’), $pageInput = $oThis.find(‘.page-turn-input’), pagePrams = $.extend(defaultParams, options); fn = fn || function() {}; pagePrams.index = parseInt(pagePrams.index); pagePrams.pageTotal = parseInt(pagePrams.pageTotal); if ( pagePrams.pageTotal==0 ) { $oThis.hide(); } else { $oThis.show(); if ( pagePrams.pageTotal<=pagePrams.max ) { pagePrams.max = pagePrams.pageTotal; } $allPages.text(pagePrams.pageTotal); showPageindex(); if( pagePrams.index==1 ) { $pagePrev.addClass(‘unable-page’); } if( pagePrams.pageTotal === 1 || pagePrams.index==pagePrams.pageTotal ) { $pageNext.addClass(‘unable-page’); } } // 点击事件 $pagePrev.on(‘click’, function() { if ( $(this).hasClass(‘unable-page’) ) { return; } pagePrams.index–; showPageindex(); fn(pagePrams.index); }); $pageNext.on(‘click’, function() { if ( $(this).hasClass(‘unable-page’) ) { return; } pagePrams.index++; showPageindex(); fn(pagePrams.index); }); // 点击跳转按钮 $pageTrun.on(‘click’, function() { index = $pageInput.val(); if( index== pagePrams.index ) { return; } if( index !== ” ) { index = parseInt($pageInput.val()) ; if( index < 1 ) { alert(‘输入页数不能小于1！’) return; } else if (index > pagePrams.pageTotal) { alert(‘输入页数不能大于总页数！’); return; } else { pagePrams.index = index; showPageindex(); fn(pagePrams.index); } } else { alert(‘请输入页数’); } }); //页码显示 function showPageindex() { var min = 0 , max = pagePrams.max; if( pagePrams.index <= pagePrams.max/2) { min = 0; max = max; } else if ( pagePrams.pageTotal – pagePrams.index <= Math.ceil(pagePrams.max/2) ) { min = pagePrams.pageTotal – pagePrams.max; max = pagePrams.pageTotal; } else { min = Math.round(pagePrams.index – pagePrams.max/2); max = Math.round(pagePrams.index + pagePrams.max/2); } var html = ”; $pagesBox.html(”); for(var i = min+1; i < max+1; i++) { var $a = “<a href=’javascript:;’ class=’page-num page-item” ; if ( i==pagePrams.index ) { $a += ” page-active’ data-page=”+ i + “>” + i + “</a>”;; } else { $a += “‘ data-page=”+ i + “>” + i + “</a>”; } html += $a; } $pagesBox.append(html); $pageInput.val(pagePrams.index); $oThis.find(‘a’).removeClass(‘unable-page’); $pagesBox.find(‘.page-num’).on(‘click’ , function() { pagePrams.index = parseInt($(this).attr(‘data-page’)); showPageindex(); fn(pagePrams.index); }); } }; })(<a href="https://www.rokub.com/category/jquery" title="jquery">jquery</a>); var pageNum = 1; function searchByKey() { //这里是查询的请求，重置分页器写在ajax请求的success里面 $(‘#comPage’).pager({ index : pageNum, pageTotal : 20 }, function(page) { pageNum = page; searchByKey(); }); } searchByKey(); </script> </body> </html>

网站前端开发

https://www.rokub.com

» 本文来自：前端开发者 » 《前端开发中ajax实例：按需加载分页组件》

» 本文链接地址：https://www.rokub.com/2739.html

» 您也可以订阅本站：https://www.rokub.com