分頁控制元件
阿新 • • 發佈：2018-11-01
TestQuery.jsp：
query.js：<%@ page pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>訂單列表</title> </head> <style> .bg-3 td{ background-color: #f5efea; } .bg-2 td{ background-color: #fadfce; } </style> <body> <form id="form1"> </form> <div style="width: 1024px; width: 1024px; margin: 20px auto;"> <div> <table style="width: 100%"> <thead> <tr style="color: green;"> <td>建立時間</td> <td>建立人</td> <td>手機號碼</td> </tr> </thead> <tbody id="tab1"> </tbody> </table> </div> <div id="div_pager112"></div> </div> </body> <script language=javascript type=text/javascript src="<%=request.getContextPath()%>/js/jquery-1.8.3.min.js"></script> <script language=javascript type=text/javascript src="js/query.js"></script> <script language=javascript type=text/javascript src="js/page.js"></script> </html>
$(function() { sjzx.init(); }); var sjzx = { saleDataCount : 0, init : function() { sjzx.bind(); }, bind : function() { sjzx.search(1, 10); // 生成分頁控制元件 根據分頁的形式在這裡設定 mypager.init({ // 顯示分頁的DIV的ID 必傳 pagerid : 'div_pager112', // 當前頁 不傳預設這1 pno : 1, // 每頁條數 不傳預設為10 pagesize : 10, // 總資料條數 必傳 不傳預設為0 totalRecords : sjzx.saleDataCount, // 點選頁碼後的回撥 不用的話可以不傳 callback : function() { alert(this.pno + " ----- " + this.pagesize); sjzx.search(this.pno, this.pagesize); } }); }, search : function(pno, pagesize) { $.ajax({ url : '/padlifeadmin/do/lifeThSmsValidInfo/query?pageNum=' + pno + '&pageSize=' + pagesize, type : 'POST', dataType : 'json', data : $("#form1").serialize(), async : false, success : function(res) {//res 返回的是一個map格式的資料 var list = res.mapList; sjzx.saleDataCount = res.countNum; $('#tab1').html(""); for ( var i = 0; i < list.length; i++) { var obj = list[i]; var o = ""; if (i % 2 == 0) { o = "<tr class='bg-2'>"; } else { o = "<tr class='bg-3'>"; } o += "<td style='text-align:center; vertical-align:middle' >" + sjzx.getLocalTime(obj.CREATED_DATE) + "</td>" + "<td style='text-align:center; vertical-align:middle' >" + sjzx.changeNull(obj.CREATED_BY) + "</td>" + "<td style='text-align:center; vertical-align:middle' >" + sjzx.changeNull(obj.MOBILE) + "</td>"; o += "</tr>"; $('#tab1').append(o); } } }); }, changeNull : function(data) { if (data == null) return ""; return data; }, getLocalTime : function(now) { if (!now) { return ""; } else { var d = new Date(now); var year = d.getFullYear(); var month = d.getMonth() + 1; month = month < 10 ? ("0" + month) : month; var date = d.getDate(); date = date < 10 ? ("0" + date) : date; var hour = d.getHours(); hour = hour < 10 ? ("0" + hour) : hour; var minute = d.getMinutes(); minute = minute < 10 ? ("0" + minute) : minute; var second = d.getSeconds(); second = second < 10 ? ("0" + second) : second; return year + "-" + month + "-" + date + " " + hour + ":" + minute + ":" + second; } } }
page.js
/** * Created by EX-LIXIAOJIAN002 on 2014/12/24. */ window.document.write('<style>.page{text-align: center;padding: 30px 0 0 0;}.page span,.page a{display: inline-block;vertical-align: middle;height: 28px;line-height: 28px;padding: 0 12px;border: solid 1px #eee;text-decoration: none;margin: 0 5px;}.page .curr{background-color: #ff965a;}</style>'); var mypager = { callback:null, newConfig:{}, //divID pagerid: 'div_pager', //當前頁碼 pno: 1, //總頁碼 total: 1, pagesize:10, //總資料條數 totalRecords: 0, //是否顯示總頁數 isShowTotalPage: true, //是否顯示總記錄數 isShowTotalRecords: true, //繫結點選事件 bindEvent:function(){ $('.page_number_link').on('click',function(){ var me = $(this); if(!me.hasClass('curr')){ mypager.newConfig.pno=$(this).data('no'); mypager.init(mypager.newConfig); if(mypager.callback){ mypager.callback(); } } }) }, //分頁按鈕控制元件初始化 init: function (config) { this.newConfig = config; //賦值 this.pno = isNaN(config.pno) ? 1 : parseInt(config.pno); this.total = isNaN(config.total) ? 1 : parseInt(config.total); this.totalRecords = isNaN(config.totalRecords) ? 0 : parseInt(config.totalRecords>0?config.totalRecords:0); this.pagesize = config.pagesize || 10; this.pagesize = this.pagesize>0?this.pagesize:0; this.total =parseInt(this.totalRecords/this.pagesize)+(this.totalRecords%this.pagesize == 0?0:1); if(this.total == 0){return;} if (config.pagerid) { this.pagerid = config.pagerid; } if (config.isShowTotalPage != undefined) { this.isShowTotalPage = config.isShowTotalPage; } if (config.isShowTotalRecords != undefined) { this.isShowTotalRecords = config.isShowTotalRecords; } //驗證 if (this.pno < 1) this.pno = 1; this.total = (this.total <= 1) ? 1 : this.total; if (this.pno > this.total) this.pno = this.total; this.prv = (this.pno <= 2) ? 1 : (this.pno - 1); this.next = (this.pno >= this.total - 1) ? this.total : (this.pno + 1); this.hasPrv = (this.pno > 1); this.hasNext = (this.pno < this.total); if(config.callback && typeof config.callback == 'function'){ this.callback = config.callback; }; this.inited = true; this.generPageHtml(); this.bindEvent(); }, //生成分頁控制元件Html generPageHtml: function () { if (!this.inited) { return; } var str_prv = '', str_next = ''; if (this.hasPrv) { str_prv = '<a class="page_number_link" data-no="'+this.prv+'" href="javascript:;" title="上一頁">上一頁</a>'; } else { str_prv = '<span class="disabled">上一頁</span>'; } if (this.hasNext) { str_next = '<a class="page_number_link" data-no="'+this.next+'" href="javascript:;" title="下一頁">下一頁</a>'; } else { str_next = '<span class="disabled">下一頁</span>'; } var str = ''; var dot = '<span>...</span>'; var total_info = ''; if (this.isShowTotalPage || this.isShowTotalRecords) { total_info = '<span class="normalsize">共'; if (this.isShowTotalPage) { total_info += this.total + '頁'; if (this.isShowTotalRecords) { total_info += ' / '; } } if (this.isShowTotalRecords) { total_info += this.totalRecords + '條資料'; } total_info += '</span>'; } //分頁處理 if (this.total <= 8) { for (var i = 1; i <= this.total; i++) { if (this.pno == i) { str += '<span class="page_number_link curr">' + i + '</span>'; } else { str += '<a class="page_number_link" data-no="'+i+'" href="javascript:;" title="第' + i + '頁">' + i + '</a>'; } } } else { if (this.pno <= 5) { for (var i = 1; i <= 7; i++) { if (this.pno == i) { str += '<span class="curr">' + i + '</span>'; } else { str += '<a class="page_number_link" data-no="'+i+'" href="javascript:;" title="第' + i + '頁">' + i + '</a>'; } } str += dot; } else { str += '<a class="page_number_link" data-no="1" href="javascript:;" title="第1頁">1</a>'; str += '<a class="page_number_link" data-no="2" href="javascript:;" title="第2頁">2</a>'; str += dot; var begin = this.pno - 2; var end = this.pno + 2; if (end > this.total) { end = this.total; begin = end - 4; if (this.pno - begin < 2) { begin = begin - 1; } } else if (end + 1 == this.total) { end = this.total; } for (var i = begin; i <= end; i++) { if (this.pno == i) { str += '<span class="curr">' + i + '</span>'; } else { str += '<a class="page_number_link" data-no="'+i+'" href="javascript:;" title="第' + i + '頁">' + i + '</a>'; } } if (end != this.total) { str += dot; } } } str = " <div class='page'><a class='page_number_link' href='javascript:;'>首頁</a>" + str_prv + str + str_next +"<a class='page_number_link' data-no="+this.total+" href='javascript:;'>尾頁</a>"+ total_info +"</div>"; $("#" + this.pagerid).html(str); } };