Ajax搜索结果页面下方的分页按钮的生成
发布时间:2020-12-14 22:56:40 所属栏目:资源 来源:网络整理
导读:时间紧木有做成JQ插件,通用性可能差一些但是基本功能是有的,比较适合初学者,望老鸟大虾表拍砖才好 哦少说了一句我用的是 JQueryUI里面的button感觉还不错 下图是第一页的样子 这是最后一页的样子 废话不说了上代码上面有参数说明看不懂的欢迎留言 复制代码
时间紧木有做成JQ插件,通用性可能差一些但是基本功能是有的,比较适合初学者,望老鸟大虾表拍砖才好 哦少说了一句我用的是 JQueryUI里面的button感觉还不错 下图是第一页的样子 这是最后一页的样子 废话不说了上代码上面有参数说明看不懂的欢迎留言 复制代码 代码如下: //------------------------------------------------------ // pageingBtn() 分页按钮的显示方法 // pageIndex: 当前第几页 // maxPage: 翻页数据集共有多少页 // btnSize: 最多显示按钮数 // pageSize: 分页数 // keyWord: 关键词 // container: 被填充的容器 //------------------------------------------------------ function pageingBtn(pageIndex,maxPage,btnSize,pageSize,keyWord,container) { var BtnList = ''; $(container).html(''); if (pageIndex != 1) { BtnList += '<button value="1" class="firstPage"> 第一页 </button>'; var prevPageIndex = ((pageIndex - 1) < 1 ? 1 : (pageIndex - 1)); BtnList += '<button value="' + prevPageIndex + '" class="prevPage" > 上一页 第' + prevPageIndex + '页</button>'; } //此处设置当前页显示的样式 var pageIndexStyle = ' class="pageIndex"'; //设定按钮的起始值 var start = (pageIndex - (btnSize / 2 | 0) > 0) ? (pageIndex - (btnSize / 2 | 0)) : 1; //如果按钮起始值+最多显示按钮数的和大于最大页数就将按钮起始值设置为最大页数减去起始值加一 if ((start + btnSize) > maxPage) { start = maxPage - btnSize + 1 } //这里处理的情况是如果你的最大显示按钮数为15那么当数据分页最大值为小于15的时候按钮将会出现-7,-6,-5,-4...0,1,2,3,4等很扯的情况 start = (start <= 0 ? 1 : start); for (var i = start; i < start + btnSize; i++) { if (i > maxPage) { break; } if (i == pageIndex) { BtnList += '<button value="' + i + '"' + pageIndexStyle + '> ' + i + ' </button>'; } else { BtnList += '<button value="' + i + '" > ' + i + ' </button>'; } } if (pageIndex < maxPage) { var nextPageIndex = ((pageIndex + 1) > maxPage ? maxPage : (pageIndex + 1)); BtnList += '<button value="' + nextPageIndex + '" class="nextPage" > 下一页 第' + nextPageIndex + '页 </button>'; BtnList += '<button value="' + maxPage + '" class="endPage"> 最后一页 第' + maxPage + '页 </button>'; } $(container).append(BtnList); //绑定后生成的按钮事件 $(container).find("button").button().click(function () { loadingimg(); $.post("/author/query/", { 'pageIndex': $(this).val(), 'pageSize': pageSize, 'order': 'DESC', 'sort': '', 'KeyWords': keyWord //$("#SearchText").val() }, function (data) { $("#SearchText").val(keyWord); LoadBookList(data); } ); } ); //在此处修改按钮样式 $(".nextPage").button({ icons: { secondary: "ui-icon-seek-next" },text: false }); $(".prevPage").button({ icons: { primary: "ui-icon-seek-prev" },text: false }); $(".endPage").button({ icons: { secondary: "ui-icon-seek-end" },text: false }); $(".firstPage").button({ icons: { primary: "ui-icon-seek-start" },text: false }); $(".pageIndex ").css({ 'background': '#ff0000','color': '#ffffff' }); } (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |