<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title> ??<style> *{ margin: 0 ;padding: 0;}ul,li{ list-style: none;}#tables{ ?width: 100%; height: auto;; overflow: hidden; ;}#tables li{list-style: none; width: 100px; height: 150px; overflow: hidden; border: 2px solid red; ?float: left; display: inline;} ??#tables li img{ width: 100px; float: left;} ???????.fenye { ?height: 40px; ?line-height: 40px; ?position: relative; z-index: 88;; ???text-align: center; ?}.fenye input { ??outline: 0;;}.fenye button { ?padding: 0 10px; ?margin: 0 10px; ?height: 40px; ?float: left; outline: 0;; ?cursor: pointer; ?border: 1px solid #ebebeb; ?background-color: #ffffff;}.fenye .prePage,.fenye .turnPage,.fenye .last-page,.fenye .jump-button{ background:#157fcc ; color: #fff;}.fenye button:disabled{ background-color: #eee; }.fenye .first-page,.fenye .last-page { ?margin: 0;}.fenye .pageWrap { ?height: 38px; ?float: left; ?overflow: hidden;border: 1px solid #ebebeb;}.fenye .pageWrap ul { ?width: 100000px; ?height: 40px; ?float: left;list-style: none; ?overflow: hidden;}.fenye .pageWrap ul li:first-of-type(1){ border-left: 1px solod #ebebeb;;}.fenye .pageWrap ul li:hover{ background-color: #eee;}.fenye .pageWrap ul li {list-style: none; ?width: 60px; ?height: 40px; ?border-right: 1px solid #ebebeb; ?line-height: 40px; ?box-sizing: border-box; ?cursor: pointer; ?float: left;}.fenye .pageWrap ul .sel-page { ?background-color: #157fcc; color: #fff;}.fenye .jump-text { ?width: 60px; ?height: 40px; ?box-sizing: border-box; ?text-align: center; ?margin: 0 5px; ?float: left;}.fenye .jump-button { ?margin: 0; ?float: left; position: relative; z-index: 89;;}.fenye .total-pages,.fenye .total-count { ?margin-left: 10px; ?float: left; ?}.total-count{border: 1px solid #ebebeb; ???background-color: #ffffff; padding: 0 10px;}</style></head><body><div ><li>11 动态数据</li></div><div ></div> ??<div >重新初始化2</div><div style="padding: 10px;;">-----------------------------------</div><div ><li>22 动态数据</li></div><div ></div><script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script><script >(function($, window, document) { ???// 定义构造函数 ???function Paging(el, options) { ???????this.el = el; ???????var defaults = { ???????????pageNo: ?1, // 初始页码 ???????????totalPages: ?1, //总页数 ???????????totalCount: ?1, // 条目总数 ???????????slideSpeed: 0, // 缓动速度 ???????????jump: ?false, // 支持跳转， ???????????first:true, ???????????callback:function() {} // 回调函数， ???????}; ??????????????this.options = $.extend({},defaults,options) ???????//console.log("最喜欢总", ?this.options ); ???????????????this.init(this.el); ???} ???// 给实例对象添加公共属性和方法 ???Paging.prototype = { ???????constructor: Paging, ???????init: function(ele) { ???????????this.createDom(); ???????????this.bindEvents(ele); ???????}, ???????createDom: function() { ???????????var that = this, ???????????????ulDom = ‘‘, ???????????????jumpDom = ‘‘, ???????????????content = ‘‘, ???????????????liWidth = 60, // li的宽度 ???????????????totalPages = that.options.totalPages||1, // 总页数 ???????????????wrapLength = 0; ???????????????if(typeof totalPages!=‘number‘||typeof totalPages<=0){ ????????????????totalPages=1; ???????????????} ?????????????????????????????????????????????????????????totalPages > 5 ? wrapLength = 5 * liWidth : wrapLength = totalPages * liWidth; ???????????if(totalPages<=1){ ??????????????ulDom += ‘<li >‘ + 1 + ‘</li>‘; ???????????}else{ ???????????for (var i = 1; i <= that.options.totalPages; i++) { ?????????????????????????????i != 1 ? ulDom += ‘<li>‘ + i + ‘</li>‘ : ulDom += ‘<li >‘ + i + ‘</li>‘; ???????????} ???????????} ???????????that.options.jump ? jumpDom = ‘<input type="text" placeholder="1" ><button type="button" >跳转</button>‘ : jumpDom = ‘‘; ???????????content = ‘<button type="button" ?>首页</button>‘ + ???????????????‘<button >上一页</button>‘ + ???????????????‘<div style="width:‘ + wrapLength + ‘px">‘ + ???????????????‘<ul ??style="transition:all ‘ + that.options.slideSpeed + ‘ms">‘ + ???????????????ulDom + ???????????????‘</ul></div>‘ + ???????????????‘<button >下一页</button>‘ + ???????????????‘<button type="button" ?>尾页</button>‘ + ???????????????jumpDom + ???????????????‘<p >共‘ + ???????????????that.options.totalPages + ???????????????‘页</p>‘ + ???????????????‘<p >‘ + ???????????????that.options.totalCount + ???????????????‘</p>‘; ???????????that.el.html(content); ???????}, ???????bindEvents: function(ele) { ???????????????????????????var ele=ele; ???????????var that = this, ???????????????pageSelect =ele.find(‘.pageSelect‘), // ul ???????????????lis = pageSelect.children(), // li的集合 ???????????????liWidth = lis[0]?(lis[0].offsetWidth):0, // li的宽度 ???????????????totalPages = that.options.totalPages, // 总页数 ???????????????pageIndex = that.options.pageNo, // 当前选择的页码 ???????????????distance = 0, // ul移动距离 ???????????????prePage = ele.find(‘.prePage‘), ???????????????nextPage = ele.find(‘.nextPage‘), ???????????????firstPage = ele.find(‘.firstPage‘), ???????????????lastPage = ele.find(‘.lastPage‘), ???????????????jumpBtn = ele.find(‘.jumpBtn‘), ???????????????jumpText =ele.find(‘.jumpText‘); ???// console.log(firstPage); ???????????prePage.on(‘click‘, function() { ???????????????pageIndex--; ???????????????that.options.first=true; ???????????????if (pageIndex < 1) pageIndex = 1; ???????????????handles(pageIndex); ???????????}) ???????????nextPage.on(‘click‘, function() { ???????????????pageIndex++; ???????????????that.options.first=true; ???????????????if (pageIndex > lis.length) pageIndex = lis.length; ???????????????handles(pageIndex); ???????????}) ???????????firstPage.on(‘click‘, function() { ???????????????pageIndex = 1; ???????????????that.options.first=true; ???????????????handles(pageIndex); ???????????}) ???????????lastPage.on(‘click‘, function() { ???????????????pageIndex = totalPages; ???????????????that.options.first=true; ???????????????handles(pageIndex); ???????????}) ????????????????????$(document).on("click", jumpBtn, function() { ??????????// jumpBtn.on(‘click‘, function() { ??????????????????????????var jumpNum = parseInt(jumpText.val().replace(/\D/g, ‘‘)); ???????????????if (jumpNum && jumpNum >= 1 && jumpNum <= totalPages) { ???????????????????pageIndex = jumpNum; ???????????????????that.options.first=true; ???????????????????handles(pageIndex); ???????????????????jumpText.val(jumpNum); ???????????????} ???????????}) ??????//$(document).on("click", lis, function() { ???????????lis.on(‘click‘, function() { ?????????????that.options.first=true; ???????????????pageIndex = $(this).index() + 1; ????????????????handles(pageIndex); ???????????}) ???????????function handles(pageIndex) { ?????????//debugger; ???????????????lis.removeClass(‘sel-page‘).eq(pageIndex - 1).addClass(‘sel-page‘); ??????????????????????????????????????????????if(totalPages<=1){ ?????????????????????????????firstPage.attr(‘disabled‘, true); ???????????????prePage.attr(‘disabled‘, true); ???????????????nextPage.attr(‘disabled‘, true); ???????????????lastPage.attr(‘disabled‘, true) ; ???????????????jumpBtn.attr(‘disabled‘, true) ; ???????????????jumpText.attr(‘disabled‘, true) ; ???????????????????if(that.options.first){ ???????????????that.options.callback(pageIndex); ???????????????} ???????????????????return false; ???????????????} ???????????????????????????????????????????????if (totalPages <= 5) { ???????????????????if(that.options.first){ ???????????????that.options.callback(pageIndex); ???????????????} ??????????????????// console.log("222totalPages",totalPages) ???????????????????return false; ???????????????} ???????????????if (pageIndex >= 3 && pageIndex <= totalPages - 2) distance = (pageIndex - 3) * liWidth; ???????????????if (pageIndex == 2 || pageIndex == 1) distance = 0; ???????????????if (pageIndex > totalPages - 2) distance = (totalPages - 5) * liWidth; ???????????????pageSelect.css(‘transform‘, ‘translateX(‘ + (-distance) + ‘px)‘); ???????????????pageIndex == 1 ? firstPage.attr(‘disabled‘, true) : firstPage.attr(‘disabled‘, false); ???????????????pageIndex == 1 ? prePage.attr(‘disabled‘, true) : prePage.attr(‘disabled‘, false); ???????????????pageIndex == totalPages ? lastPage.attr(‘disabled‘, true) : lastPage.attr(‘disabled‘, false); ???????????????pageIndex == totalPages ? nextPage.attr(‘disabled‘, true) : nextPage.attr(‘disabled‘, false); ??????????????????????????????????if(that.options.first){ ???????????????that.options.callback(pageIndex); ???????????????} ???????????} ??????????//if(that.options.first){ ???????????handles(that.options.pageNo); // 初始化页码位置 ???????????//} ???????????????????} ???} ???$.fn.paging = function(options) { ???//console.log($(this)); ???????return new Paging($(this), options); ???}})(jQuery, window, document);</script> ????<script> ?????????//http://layer.layui.com/$(document).ready(function(){ ??????????var tables=$("#tables"); ??????????var page=1; ??????????//ajaxDATA(1) ????????????function ajaxDATA(page){ ????????????var urls="http://mktm.biqiang8.com/home/goods?firstCid=0&secCid=0&pageNo="+page+"&pageSize=5&exsitIdList=" ?????????????$.ajax({ ??????????????type: "GET", ??????????????url: urls, ???????????????dataType: "json", ???????????????????????????success: function(data){ ??????????????????????if(data.code==0){ ??????????????????????var htmlStr=""; ??????????????????????//console.log(data.goods_list); ??????????????????????for(var i=0;i<data.data.goods_list.length;i++){ ??????????????????????htmlStr+=‘<li>‘+i+data.data.goods_list[i].title+‘<img src="‘+data.data.goods_list[i].img_url+‘"</li>‘ ??????????????????????} ?????????????????????$("#tables").html(htmlStr); ??????????????????????} ????????????????????????????????????????} ???????????}); ????????????} ???????????????????????????var setTotalCount = 301; ????????var fenyeObj={ ???????????initPageNo: 1, // 初始页码 ???????????totalPages: 1, //总页数 ???????????totalCount: ‘合计‘ + 0 + ‘条数据‘, // 条目总数 ???????????slideSpeed: 600, // 缓动速度。单位毫秒 ???????????jump: true, //是否支持跳转 ????????????first:false, ?//初始化 是否立即执行回掉 ???????????callback: function(page) { // 回调函数 ???????????????console.log("立11即查询",page); ?????????????????ajaxDATA(page) ???????????} ???????} ?????????????????????????$(‘#fenbox‘).paging(fenyeObj) ???????????????$("#saa").on("click",function(){ ??????????????setTotalCount = 71; ?????????????fenyeObj.totalCount = ‘合计‘ + setTotalCount + ‘条数据‘, // 条目总数; ?????????????fenyeObj.totalPages=24; ?????????????fenyeObj.first=false; ?????????????//console.log("立重置即查询",fenyeObj); ????????????$(‘#fenbox‘).paging(fenyeObj) ???????}) ?????????????????????????????????????????????????var setTotalCount2 = 31; ????????var fenyeObj2={ ???????????initPageNo: 1, // 初始页码 ???????????totalPages: 20, //总页数 ???????????totalCount: ‘合计‘ + setTotalCount2 + ‘条数据‘, // 条目总数 ???????????slideSpeed: 600, // 缓动速度。单位毫秒 ???????????jump: true, //是否支持跳转 ???????????// first:false, ???????????callback: function(page) { // 回调函数 ???????????????console.log("立即22查询",page); ?????????????????ajaxDATA(page) ???????????} ???????} ?????????????????????????$(‘#fenbox2‘).paging(fenyeObj2) ?????????????????????});</script></body></html>下拉框
<!DOCTYPE html><html> ???<head> ???????<meta charset="UTF-8"> ???????<title>信息查询</title> ???????<meta name="viewport" ??content="initial-scale=1.0,user-scalable=no,maximum-scale=1,width=device-width" ?/> ???</head> ???<body> ???????????????????????<style>html,body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,span,img,button ,em,i,b{margin:0;padding:0;}html{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent;min-width:320px;}body{font-family:"微软雅黑",‘Helvetica Neue‘,tahoma,arial,sans-serif;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;line-height:1;-webkit-touch-callout:none;}article,aside,dialog,figure,footer,header,hgroup,menu,nav,section{display:block}dl,li,menu,ol,ul{list-style:none}address,em,i,th{font-weight:400;font-style:normal}a{color:#999;display:block;}a:link,a:visited{color:#999;text-decoration:none;cursor:pointer}a:hover{cursor:pointer}a:active,a:focus{outline:0;}img{width:100%;border:0;vertical-align:middle;-webkit-user-select:none;}input,select{outline:0}h1,h2,h3,h4,h5,h6{font-variant:normal;font-weight:normal;}button,input[type=button],input[type=tel],input[type=reset],input[type=submit]{line-height:normal!important;-webkit-appearance:none}::-webkit-input-placeholder{color:#777;}::input-placeholder{color:#777;}input:focus::-webkit-input-placeholder{-webkit-transition:.2s;opacity:0;}input:focus::input-placeholder{transition:.2s;opacity:0;}.clearfix:after{clear:both;content:".";display:block;height:0;visibility:hidden}.fl{float:left}.fr{float:right}.fl,.fr{display:inline}.disabled{pointer-events:none;}.hover{ }.hover:hover{ cursor: pointer;} ???????????/* ???业务css*/.my_form{ background: #fafafa; ???border: 1px solid #e0e0e0; ??? padding: 21px; m }.my_form .my_form_content{ width: 100%; }.form_content_submit{ margin: 20px auto; display: block; text-align: center; ?width: 120px;; height: 44px; line-height: 44px;background: #157fcc; color: #fff; border: 0;;}.my_form_table{ border: 1px solid #e0e0e0; } ???.flexbox{display:-webkit-box;display:-moz-box;display:box;display:-webkit-flex;display:-moz-flex;display:-ms-flexbox;display:flex;display:table\9;}.flexbox .flex1{-webkit-box-flex:1;-moz-box-flex:1;box-flex:1;-webkit-flex:1;-moz-flex:1;-ms-flex:1;flex:1;display:table-cell\9;}.selected_icon{ position: relative; width: 100%; height: 100%;}.selected_icon .check{ position:absolute;background: #157fcc;}.selected_icon .check.plus{ left: 50%; top: 50%; margin-left: -8px; width: 16px; height: 1px; }.selected_icon .check.reduce{left: 50%;top: 50%;; ; position:absolute;width: 1px; height: 16px; }.showone.on .check{background: red !important;}.showone.on .check.reduce{ ?-webkit-transform:translateY(50%);-moz-transform:translateY(50%);transform:translateY(50%); opacity: 0; -webkit-transition: .3s;-moz-transition: .3s;transition: .3s;;}.showone{ position: relative;;border-bottom: 1px solid #e0e0e0 ;}.hideone{ background: #fff; margin:20px 44px;;border: 1px solid #ccc ;}.hideoneinner { position: relative;; height:44px; line-height: 44px; text-align: center; border-bottom: 1px solid #e0e0e0;}.hideoneinner div { height:44px; line-height: 44px;border-right: 1px solid #e0e0e0; }.showone.on:after{position: absolute; ???content: ""; ???height: 1px; width: 22px; ???background:#e0e0e0; ???left: 22px; top: 65px; ???z-index: 26;} .showone.on:before{ position: absolute; ???content: ""; ???height: 22px; width:1px; ???background:#e0e0e0; ???left: 22px; top: 44px; ???z-index: 26;}.hideoneinner div:last-child{ border-right:0; }.hideoneinner div:first-child{ ?font-weight: bold; }.hideoneinner:last-of-type{ ?border-bottom: 0;} ?.my_form_table .showone:hover{ background:#f5f5f5 ;}.filter-disabled { ???-moz-user-select: none; ???-webkit-user-select: none; ???-ms-user-select: none;}.filter-box { ???position: relative; z-index: 92;;}.filter-box select { ???display: none;}.filter-text { ???height: 100%; ???overflow: hidden; ???position: relative; ???cursor: pointer; ???padding: 0 30px 0 10px; ???background: #fff; ???border: 1px solid #e6e6e6;}.filter-text input { ???}.filter-text .filter-title { ???width: 100%; ???height: 36px; ???line-height: 36px; ???border: 0; ???background-color: transparent; ???white-space: nowrap; ???overflow: hidden; ???text-overflow: ellipsis; ???padding: 0; ???cursor: pointer;}.filter-list { ???display: none; ???width: 100%; z-index: 99; ???max-height: 300px; ???background-color: #fff; ??? ???position: absolute; ???top: 42px; ???left: 0; ???z-index: 99; ???border: 1px solid #e6e6e6; ???overflow: auto;}.filter-list li.filter-null a { ???color: #d2d2d2;}.filter-list li a { ???display: block; ???padding: 0 10px; ???line-height: 36px; ???white-space: nowrap; ???overflow: hidden; ???text-overflow: ellipsis; ???cursor: pointer;}.filter-list li:hover { ???background-color: #f2f2f2;}.filter-list li.filter-selected { ???background-color: #5FB878;}.filter-list li.filter-selected a{ ???display: block; ???color: #fff;}.filter-list li.filter-disabled { ???background-color: #fff;}.filter-list li.filter-disabled a{ ???display: block; ???color: #d2d2d2;}.filter-list li.filter-disabled:hover a { ???cursor: not-allowed!important; ???background-color: #fff;}.icon { ???position: absolute;}.icon-filter-arrow { ????width:0; ???height:0; ???overflow:hidden; ??? ????/*是因为, 虽然宽高度为0, 但在IE6下会具有默认的 */ ???line-height: 0; ?/* 字体大小和行高, 导致盒子呈现被撑开的长矩形 */ ???border-width:8px; ???border-style:solid dashed dashed dashed;/*IE6下, 设置余下三条边的border-style为dashed,即可达到透明的效果*/ ???border-color:#999 transparent transparent transparent; ???right: 10px; ???top: 13px; ???transition: all .2s;}.icon-filter-arrow.filter-show { ???-webkit-transform: rotate(-180deg); ???transform: rotate(-180deg);}.filter-list::-webkit-scrollbar { ???width: 4px; ???height: 4px;}.filter-list::-webkit-scrollbar-track { ???background: #fff }.filter-list::-webkit-scrollbar-thumb { ???background: #CBCBCB;}#j_searchtask{ ?background: #666; padding: 10px 20px;}</style> ???????????????????<div> ???????????????????????????<!-- 这里开始 --> ???????????????????????<div > ???????????????<div > ???????????????????<input ?data-val="" type="text" readonly placeholder="请选择渠道" /> ???????????????????<i ></i> ???????????????</div> ???????????????<select name="filter"> ???????????????????<option value="new" ?disabled>请选择渠道</option> ???????????????????<option value="11渠道1" >渠道1</option> ???????????????????????????????????????<option value="22渠道2">渠道2</option> ???????????????????<option value="33渠道3">渠道3</option> ???????????????????????????????????</select> ???????????</div> ???????????????????????<!-- 这里结束 --> ?????????????????????<!-- 这里开始 --> ???????????????????????<div > ???????????????<div > ???????????????????<input ?data-val="" type="text" readonly placeholder="请选择支付" /> ???????????????????<i ></i> ???????????????</div> ???????????????<select name="filter"> ???????????????????<option value="new" ?disabled>请选类型</option> ???????????????????<option value="淘宝1" >淘宝</option> ???????????????????????????????????????<option value="支付宝2">支付宝</option> ???????????????????????????????????</select> ???????????</div> ???????????????????????<!-- 这里结束 --> ????????????????????????????????????????????????????????????????????????????????????<div >查询结果</div> ???????????????????????????????</div> ?????<script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"> ???</script> ???????<script type="text/javascript" src="selectFilter.js"></script> ???????<script type="text/javascript"> ???????????//本小插件支持移动端哦 ???????????????????????????????</script> ????<script> ???????$(document).ready(function(){ ????????????????????????????????//下拉组件 ???????????$(‘.filter-box1‘).selectFilter({ ???????????????callBack : function (val){ ???????????????????//返回选择的值 ???????????????????//document.getElementById("j_qudao").setAttribute("data-val",val) ???????????????????console.log(val+‘-是返回的值‘) ???????????????} ???????????}); ??????????????????//下拉组件 ???????????$(‘.filter-box2‘).selectFilter({ ???????????????callBack : function (val){ ???????????????????//返回选择的值 ???????????????????//document.getElementById("j_qudao").setAttribute("data-val",val) ???????????????????console.log(val+‘-是返回的值‘) ???????????????} ???????????}); ?????????????????????????????????????????????????????????????????????????????????//查询点击 ?????????????????????$("#j_searchtask").on("click",function(){ ?????????????????????????var qudao_val=$("#j_qudao").attr("data-val");//渠道 ???????????????????????????var qudao_val2=$("#j_qudao2").attr("data-val");//渠道 ????????????????????????????????alert("值-----："+qudao_val); ?????????????????????????????????????alert("值-----："+qudao_val2); ?????????????????????????????????????????????????????}); ?????????????????????????????????????????????????????????????????????????????????????????????????????}); ???</script> ?????</body></html>jquery 分页
原文地址：https://www.cnblogs.com/surfaces/p/9168400.html