分页插件--记录
Posted zhoushangwu
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了分页插件--记录相关的知识,希望对你有一定的参考价值。
结构
paging |-----paging.css
|-----paging.js
paging.css内容
.zsw-paging { display: inline-block; } .zsw-paging ul { list-style: none; padding: 0px; margin: 0px; display: inline; } .zsw-paging-first, .zsw-paging-prev, .zsw-paging-next, .zsw-paging-last, .zsw-paging-page li { display: inline-block; border: 1px solid #bbb; height: 30px; line-height: 30px; padding: 0 10px; } .zsw-paging-first, .zsw-paging-prev, .zsw-paging-next, .zsw-paging-last, .zsw-paging-page li { display: inline-block; border: 1px solid #bbb; height: 30px; line-height: 30px; padding: 0 10px; color: #666; display: inline-block; cursor: pointer; border-radius: 5px; background-color: #fff; -moz-user-select: -moz-none; -khtml-user-select: none; -webkit-user-select: none; /* Introduced in IE 10. See http://ie.microsoft.com/testdrive/HTML5/msUserSelect/ */ -ms-user-select: none; user-select: none; } .zsw-paging span:hover, .zsw-paging input:hover, .zsw-paging-page li:hover, .zsw-active { background-color: #5cb85c !important; border: #5cb85c 1px solid !important; color: #fff !important; }
paging.js内容
function zswPage(opt) { this.LoadCss(‘paging.css‘); this.defaultOption = { pageSize: 10, elem: ".zsw-page", dataTotalCount: 0, pageTotalCount: 0, labelNumber: 5, firstName: "first", lastName: "last", firstLastShow: true, prevName: "prev", nextName: "next", prevNextShow: true, repeatClick: true } this.currentOption = $.extend({}, this.defaultOption, opt); this.pageIndex = 0; this.LabelClickAfter; //页码点击事件绑定 this.LabelClick(); //绑定事件 this.FirstClick(); this.LastClick(); this.PrevClick(); this.NextClick(); } zswPage.prototype = { PageInit: function () { //如果页码在创建对象时就赋值,那么久调用初始化方法 this.CreatePageHtml(); }, LoadCss: function (cssPath) { var path = this.getPath(‘paging.js‘); path = path + cssPath; var head = document.getElementsByTagName(‘head‘)[0]; var link = document.createElement(‘link‘); link.type = ‘text/css‘; link.rel = ‘stylesheet‘; link.href = path; head.appendChild(link); }, LastPositionIndex: function () { return $(".zsw-paging-page li").eq(this.currentOption.labelNumber - 1).html() - 1; }, FirstPositionIndex: function () { return $(".zsw-paging-page li").eq(0).html() - 1 }, CalcTotalPage: function () { var pageTotalCount = 0; if (this.currentOption.dataTotalCount == 0) { pageTotalCount = this.currentOption.pageTotalCount; } else { pageTotalCount = parseInt(this.currentOption.dataTotalCount / this.currentOption.pageSize) + (this.currentOption.dataTotalCount % this.currentOption.pageSize > 0 ? 1 : 0); } return pageTotalCount }, CreatePageHtml: function () { var pageTotalCount = this.CalcTotalPage(); var labelNumber = this.currentOption.labelNumber; if (pageTotalCount == 0) { $(this.currentOption.elem).html(""); return false; } var html = ""; html += ‘<div class="zsw-paging">‘; if (this.currentOption.firstLastShow) { html += ‘<span class="zsw-paging-first">‘ + this.currentOption.firstName + ‘</span> ‘; //html += ‘<input type="button" class="zsw-paging-first" value="‘+this.currentOption.firstName+‘" /> ‘; } if (this.currentOption.prevNextShow) { html += ‘<span class="zsw-paging-prev">‘ + this.currentOption.prevName + ‘</span> ‘; } html += ‘<ul class="zsw-paging-page"> ‘; var lastIndex = this.LastPositionIndex(); var firstIndex = this.FirstPositionIndex(); if (this.pageIndex < (this.currentOption.labelNumber - 1)) { for (var i = 0; i < pageTotalCount; i++) { if (i < labelNumber) { if (i == this.pageIndex) { html += ‘<li class="zsw-active">‘ + (i + 1) + ‘</li> ‘ } else { html += ‘<li>‘ + (i + 1) + ‘</li> ‘ } } else { break; } } } else if (this.pageIndex >= pageTotalCount - (this.currentOption.labelNumber) + 1) { for (var i = pageTotalCount - this.currentOption.labelNumber; i < pageTotalCount; i++) { if (i < pageTotalCount) { if (i == this.pageIndex) { html += ‘<li class="zsw-active">‘ + (i + 1) + ‘</li> ‘ } else { html += ‘<li>‘ + (i + 1) + ‘</li> ‘ } } else { break; } } } else { if (this.pageIndex == firstIndex) { for (var i = this.pageIndex - this.currentOption.labelNumber + 2; i < this.pageIndex + 2; i++) { if (i == this.pageIndex) { html += ‘<li class="zsw-active">‘ + (i + 1) + ‘</li> ‘ } else { html += ‘<li>‘ + (i + 1) + ‘</li> ‘ } } } else if (this.pageIndex == lastIndex) { for (var i = this.pageIndex - 1; i < this.pageIndex - 1 + this.currentOption.labelNumber; i++) { if (i == this.pageIndex) { html += ‘<li class="zsw-active">‘ + (i + 1) + ‘</li> ‘ } else { html += ‘<li>‘ + (i + 1) + ‘</li> ‘ } } } else { for (var i = this.pageIndex - parseInt(this.currentOption.labelNumber / 2); i < pageTotalCount; i++) { if (i < parseInt(this.pageIndex) + parseInt(labelNumber) - (this.currentOption.labelNumber / 2)) { if (i == this.pageIndex) { html += ‘<li class="zsw-active">‘ + (i + 1) + ‘</li> ‘ } else { html += ‘<li>‘ + (i + 1) + ‘</li> ‘ } } else { break; } } } } html += ‘</ul> ‘; if (this.currentOption.prevNextShow) { html += ‘<span class="zsw-paging-next">‘ + this.currentOption.nextName + ‘</span> ‘; } if (this.currentOption.firstLastShow) { html += ‘<span class="zsw-paging-last">‘ + this.currentOption.lastName + ‘</span> ‘; } html += ‘</div>‘; $(this.currentOption.elem).html(html); }, LabelClick: function () { var that = this; $(this.currentOption.elem).on("click", "li", function () { if (!that.currentOption.repeatClick) { var lastIndex = that.LastPositionIndex(); var firstIndex = that.FirstPositionIndex(); //阻止重复点击 if (that.pageIndex == parseInt($(this).html()) - 1 && that.pageIndex != lastIndex && that.pageIndex != firstIndex) { return false; } } that.pageIndex = parseInt($(this).html()) - 1; var lastli = $(".zsw-paging-page li").eq(that.currentOption.labelNumber - 1).html(); var firstli = $(".zsw-paging-page li").eq(0).html(); if (that.pageIndex == (lastli - 1) || that.pageIndex == (firstli - 1)) { that.CreatePageHtml(); } else { $(".zsw-paging-page li").removeClass("zsw-active") $(this).addClass("zsw-active") } if (that.LabelClickAfter && typeof (that.LabelClickAfter) === "function") { that.LabelClickAfter(that.pageIndex); } }) }, FirstClick: function () { var that = this; $(this.currentOption.elem).on("click", ".zsw-paging-first", function () { if (!that.currentOption.repeatClick) { //阻止重复点击 if (that.pageIndex == 0) { return false; } } that.pageIndex = 0; that.CreatePageHtml(); if (that.LabelClickAfter && typeof (that.LabelClickAfter) === "function") { that.LabelClickAfter(that.pageIndex); } }) }, LastClick: function () { var that = this; $(this.currentOption.elem).on("click", ".zsw-paging-last", function () { if (!that.currentOption.repeatClick) { //阻止重复点击 if (that.pageIndex == that.CalcTotalPage() - 1) { return false; } } that.pageIndex = that.CalcTotalPage() - 1; that.CreatePageHtml(); if (that.LabelClickAfter && typeof (that.LabelClickAfter) === "function") { that.LabelClickAfter(that.pageIndex); } }) }, PrevClick: function () { var that = this; $(this.currentOption.elem).on("click", ".zsw-paging-prev", function () { that.pageIndex = that.pageIndex - 1; if (!that.currentOption.repeatClick) { //阻止重复点击 if (that.pageIndex < 0) { that.pageIndex = 0; return false; } } var firstIndex = that.FirstPositionIndex(); if (that.pageIndex == (firstIndex) || that.pageIndex == (firstIndex - 1)) { if ((that.pageIndex) != firstIndex && (that.pageIndex) != firstIndex - 1) { return false; } that.CreatePageHtml(); } else { $(".zsw-paging-page li").removeClass("zsw-active") var lilist = $(".zsw-paging-page li"); $.each(lilist, function (i, item) { if (that.pageIndex == ($(item).html() - 1)) { $(this).addClass("zsw-active") } }) } if (that.LabelClickAfter && typeof (that.LabelClickAfter) === "function") { that.LabelClickAfter(that.pageIndex); } }) }, NextClick: function () { var that = this; $(this.currentOption.elem).on("click", ".zsw-paging-next", function () { that.pageIndex = that.pageIndex + 1; var totalPage = that.CalcTotalPage(); if (!that.currentOption.repeatClick) { //阻止重复点击 if (that.pageIndex >= totalPage) { that.pageIndex = totalPage - 1; return false; } } var lastIndex = that.LastPositionIndex(); if (that.pageIndex == (lastIndex) || that.pageIndex == (lastIndex + 1)) { if ((that.pageIndex) != lastIndex && (that.pageIndex) != lastIndex + 1) { return false; } that.CreatePageHtml(); } else { $(".zsw-paging-page li").removeClass("zsw-active") var lilist = $(".zsw-paging-page li"); $.each(lilist, function (i, item) { if (that.pageIndex == ($(item).html() - 1)) { $(this).addClass("zsw-active") } }) } //that.CreatePageHtml(); if (that.LabelClickAfter && typeof (that.LabelClickAfter) === "function") { that.LabelClickAfter(that.pageIndex); } }) }, GetPageIndex: function () { return this.pageIndex; }, //设置总页码 SetPageTotalCount: function (totalPage) { //总页数相同时,不重新计算 if (this.currentOption.pageTotalCount == totalPage) { return false; } this.currentOption.pageTotalCount = totalPage; if (this.pageIndex >= totalPage) { this.pageIndex = totalPage - 1; } this.CreatePageHtml(); }, //设置数据总数 SetDataTotalCount: function (dataTotal) { //总页数相同时,不重新计算 if (this.currentOption.dataTotalCount == dataTotal) { return false; } //var oldPageTotal = this.CalcTotalPage(); this.currentOption.dataTotalCount = dataTotal; var pageTotal = this.CalcTotalPage(); if (this.pageIndex >= pageTotal) { this.pageIndex = pageTotal - 1; } this.CreatePageHtml(); }, //刷新数据 refreshData: function (a, b) { var pageIndex = 0; var type = ""; if(arguments.length == 1){ type = arguments[0]; } if(arguments.length == 2){ pageIndex = arguments[0] type = arguments[1]; } //刷新数据 if (type == this.optionType[0]) { if (pageIndex == 0) { this.pageIndex = 0; } } if(type == this.optionType[1]){ this.currentOption.dataTotalCount = this.currentOption.dataTotalCount - 1; var totalPage = this.CalcTotalPage(); if(this.pageIndex == totalPage){ this.pageIndex = totalPage - 1; } } if(type == this.optionType[2]){ this.currentOption.dataTotalCount = this.currentOption.dataTotalCount + 1; } this.CreatePageHtml(); if (this.LabelClickAfter && typeof (this.LabelClickAfter) === "function") { this.LabelClickAfter(this.pageIndex); } }, optionType: [ "refresh", "delete", "insert", ], getPath: function (jsName) { var js = document.scripts;//页面js引用 var path = ‘‘; $.each(js, function (i, item) { var src = item.src; src = src.substring(src.lastIndexOf("/") + 1, src.length); //jsArray.push(src); if (src == jsName) { path = item.src.substring(0, item.src.lastIndexOf("/") + 1); return false; } }) return path; } }
demo.html内容
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div class="zsw-page"></div> <div> <input id="totalPage" type="text" /> <input type="button" id="ok" value="确定" /> </div> <div> <input type="button" id="add" value="增加" /> <input type="button" id="refresh" value="刷新" /> <input type="button" id="del" value="删除" /> </div> </body> </html> <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <script src="paging/paging.js"></script> <script src="paging/demo.js"></script>
demo.js内容
var page = new zswPage({ dataTotalCount:128,//数据总量 pageSize:10,//每页数量 labelNumber: 8,//显示的按钮数 默认 5 firstName: "首页", //默认first 可以写html标签,并自定义样式,如需自己写功能,阻止冒泡即可 lastName: "末页", //默认last 可以写html标签,并自定义样式,如需自己写功能,阻止冒泡即可 prevName: "上一页", //默认prev 可以写html标签,并自定义样式,如需自己写功能,阻止冒泡即可 nextName: "下一页", //默认next 可以写html标签,并自定义样式,如需自己写功能,阻止冒泡即可 repeatClick: false,//同一个按钮重复点击是否被允许 默认true firstLastShow: true,//首页与末页是否显示 默认true prevNextShow: true//上一页与下一页是否显示 默认trye }) //ajax获取页码后设置,使用下面的方法 //设置点击的回调函数 page.LabelClickAfter = function (pageIndex) { //调用并传递页码 TestClick(); //pageIndex当前页码,从0开始 //alert(pageIndex); } //ajax调用的方法 function TestClick() { // $.ajax({ // success: function () { // page.SetPageTotalCount(8);//设置 // } // }) //page.SetDataTotalCount(187); //alert() } //首次执行 TestClick(); //设置总数量应该放在ajax中,在总数量改变的时候重新生成,主要是最后一页的问题 page.SetDataTotalCount(187); var type = [ "refresh", "delete", "insert", ] $("#add").click(function(){ //新增时调用 page.refreshData(type[2]) }) $("#refresh").click(function(){ //刷新,并切换到第一页 //page.refreshData(0,type[0]) //刷新,不切换页面 page.refreshData(0,type[0]) }) $("#del").click(function(){ //删除时调用 page.refreshData(type[1]) })
以上是关于分页插件--记录的主要内容,如果未能解决你的问题,请参考以下文章
Jacoco和Tycho surefire的Eclipse RCP插件代码介绍