Shulou(Shulou.com)06/01 Report--

This article mainly introduces how to achieve amazeUI paging effect through the combination of the relevant knowledge, the content is detailed and easy to understand, the operation is simple and fast, with a certain reference value, I believe you will have something to gain after reading this article on how to achieve amazeUI paging effect through the combination of front and rear, let's take a look at it.

Front-end implementation

1. Introduce paginator.js

(function ($) {$.fn.paginator = function (options) {/ / this points to the current selector var config = {url: ", pageParent:", totalBars:-1, limit:-1, offset: 1 Callback: null} / / merge parameter var opts = $.extend (config, options) Opts.totalBars = Math.ceil (opts.totalBars / opts.limit); / / calculate the total number of buttons / / get the offset parameter var queryString = function (url) {var offset = (url.split ("?) [1]). Split (" = ") [1]; return parseInt (offset) } / / ajax core method Data operation var ajaxCore = function (offset, fn) {$.ajax ({"url": opts.url, "data": {"offset": offset, "limit": opts.limit}, "dataType": "JSON") for paging "method": "POST", "success": fn}) } / / reassemble the paging button var pageCore = function (offset) {if (opts.offset = = offset) {return;} / / if it's the current page, you don't have to do anything! Else {ajaxCore (offset, opts.callback); $(opts.pageParent). Empty (); / / otherwise, clear all nodes and re-insert a new paging button into DOM var output = "; var nextBar = offset = = opts.totalBars?" »: "»" Var preBar = offset = = 1? "«": "«"; / / assemble the previous node and next node if (opts.totalBars > 7) {if (offset < 5) {output + = preBar; for (var I = 1) I = 5 & & offset opts.totalBars-4 & & offset = 0; if (opts.totalBars-j = = offset) {output + = "" + (opts.totalBars-j) + ";} else {output + ="+ (opts.totalBars-j) +" }} output + = nextBar;} else {console.log ("paging data error!") ; return;}} else {output + = preBar; for (var I = 1; I 1? "»": "»"; / / Last page var output = "1"; if (opts.totalBars

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.