如何用jQuery实现长尾词搜索的分页效果？

本文共计721个文字，预计阅读时间需要3分钟。

jQuery.pager.js / 分页插件 / * Created by ck on 2017/4/17. */ / * (function($, window, document, undefined) { if ($.fn.pager) { console.error('可能与其他插件冲突'); } var options={}; var leftCount, rightCount, threshold; / * ... 省略中间代码 ... */ })(*); */

jquery.pager.js

/** * 分页插件 * Created by ck on 2017/4/17. */ ;(function ($, window, document, undefined) { if ($.fn.pager) { console.error('可能与其他插件冲突'); } var options = {}; var leftCount, rightCount, threshold; /** * @param args * @constructor */ var Pager = function (args) { var defaults = { pageSize: 10, aroundCount: 1, leftCount: 1, rightCount: 1 }; this.pageRange = []; $.extend(options, defaults, args); var centerCount = options.aroundCount * 2 + 1; leftCount = options.leftCount || centerCount; rightCount = options.rightCount || centerCount; threshold = leftCount + centerCount + rightCount; // 阈值 }; Pager.prototype = { reset: function (args) { options = {}; $.extend(options, defaults, args); var centerCount = options.aroundCount * 2 + 1; leftCount = options.leftCount || centerCount; rightCount = options.rightCount || centerCount; threshold = leftCount + centerCount + rightCount; // 阈值 }, update: function (totalCount, currentPage) { this.pageRange = []; if (!totalCount || !totalCount) return this; var i = 1; var pageCount = parseInt(totalCount / options.pageSize); totalCount % options.pageSize > 0 && pageCount++; this.pageCount = pageCount; this.currentPage = Math.max(1, Math.min(currentPage, pageCount)); if (pageCount <= threshold) { for (i = 1; i <= pageCount; i++) { this.pageRange.push(i); } } else { var leftPage = currentPage - options.aroundCount; var rightPage = currentPage + options.aroundCount; if (leftPage - options.leftCount <= 1) { // 与左侧有交集 rightPage = Math.max(rightPage, options.leftCount); for (i = 1; i <= rightPage; i++) { this.pageRange.push(i); } this.pageRange.push(null); for (i = pageCount - options.rightCount + 1; i <= pageCount; i++) { this.pageRange.push(i); } } else if (pageCount - rightPage <= options.rightCount) { // 与右侧有交集 for (i = 1; i <= options.leftCount; i++) { this.pageRange.push(i); } this.pageRange.push(null); leftPage = Math.min(leftPage, pageCount - options.rightCount + 1); for (i = leftPage; i <= pageCount; i++) { this.pageRange.push(i); } } else { // 居中 for (i = 1; i <= options.leftCount; i++) { this.pageRange.push(i); } this.pageRange.push(null); for (i = leftPage; i <= rightPage; i++) { this.pageRange.push(i); } this.pageRange.push(null); for (i = pageCount - options.rightCount + 1; i <= pageCount; i++) { this.pageRange.push(i); } } } return this; } }; var pager = null; var $element, $pagerWrapper, $pagerList, $pagerJumper; var updateHtml = function (totalCount, currentPage) { if (totalCount == 0) { $pagerWrapper.hide(); return false; } else { $pagerWrapper.show(); } var pageRange = pager.update(totalCount, currentPage).pageRange; currentPage = pager.currentPage; var htmlArray = []; if (currentPage == 1) { // 如果当前页面是第一页 htmlArray.push('

‹

'); } else { htmlArray.push('

‹

'); } for (var i = 0; i < pageRange.length; i++) { if (pageRange[i] == null) { htmlArray.push('

...

'); } else if (pageRange[i] == currentPage) { htmlArray.push('

' + pageRange[i] + '

'); } else { htmlArray.push('

' + pageRange[i] + '

'); } } if (currentPage === pager.pageCount) { // 如果当前页面是最后一页 htmlArray.push('

›

'); } else { htmlArray.push('

›

'); } $pagerList.html(htmlArray.join('')); $pagerWrapper.show(); }; // 回调 var callbacks = { onChange: function (targetPage) { } }; // 直接调用 var method = { update: function (args) { updateHtml(args[0], args[1]); } }; $.fn.pager = function () { if (!arguments[0]) { console.error('error arguments'); return false; } if (arguments[0] === 'method') { // 执行方法 if (!pager) { console.error('pager must be initialized'); return false; } if (arguments.length < 3) { console.error('error arguments'); return false; } method[arguments[1]](arguments[2]); } else { // 初始化控件 var options = arguments[0]; $pagerWrapper = $(' '); $pagerList = $('

'); $pagerJumper = $('跳转到GO'); $(this).append($pagerWrapper.append($pagerList).append($pagerJumper)); $element = $pagerWrapper; pager = new Pager(options); options.onChange && (callbacks.onChange = options.onChange); $pagerList.on('click', 'li', function () { var $ele = $(this); if ($ele.hasClass('disabled')) { return false; } if ($ele.hasClass('pager-num')) { callbacks.onChange(parseInt($(this).text())); } else if ($ele.hasClass('pager-prev')) { callbacks.onChange(pager.currentPage - 1); } else if ($ele.hasClass('pager-next')) { callbacks.onChange(pager.currentPage + 1); } }); var $input = $pagerJumper.children('input'); $pagerJumper.children('button').click(function () { var targetPage = parseInt($input.val()); if (!targetPage || targetPage < 1) { console.error('请输入正确的页码'); return false; } callbacks.onChange(targetPage); }); } return this; }; })(jQuery, window, document);