妹子UI之自定义分页控件

最新推荐文章于 2022-10-09 09:30:57 发布

遛狗的代码

最新推荐文章于 2022-10-09 09:30:57 发布

阅读量4.7k

点赞数 1

分类专栏： Web前端文章标签：妹子UI分页

本文链接：https://blog.csdn.net/Brave_Coder/article/details/52367124

版权

本文介绍了如何基于妹子UI（AmazeUI）设计并实现一个自定义分页控件。通过使用paginator.js，可以方便地进行Ajax分页，并在回调函数中处理返回的数据。在使用时，需要注意在URL中添加offset参数，并在HTML中设置合适的父节点。

摘要由CSDN通过智能技术生成

妹子UI，http://amazeui.org，在这儿顺便帮他打下广告，我个人觉得比Bootstrap漂亮，于是，我就选择了基于它的UI写出来自己的分页控件。

paginator.js的内容如下：

(function ($) {
    $.fn.paginator = function (options) {
        //this指向当前的选择器
        var config = {
            url: "",
            pageParent: "",
            totalBars: -1,
            limit: -1,
            offset: 1,
            callback: null
        }
        //合并参数
        var opts = $.extend(config, options);

        opts.totalBars = Math.ceil(opts.totalBars / opts.limit);
        //计算按钮的总个数

        //获取offset参数
        var queryString = function (url) {
            var offset = (url.split("?")[1]).split("=")[1];
            return parseInt(offset);
        }

        //ajax核心方法，用于分页的数据操作
        var ajaxCore = function (offset, fn) {
            $.ajax({
                "url": opts.url,
                "data": {
                    "offset": offset,
                    "limit": opts.limit
                },
                "dataType": "JSON",
                "method": "POST",
                "success": fn
            });
        }

        //重新装配分页按钮
        var pageCore = function (offset) {
            if (opts.offset == offset) {
                return;
            } //如果是当前页面，那么就什么事都不用干了！
            else {
                ajaxCore(offset, opts.callback);
                $(opts.pageParent).empty();
                //否则，清空所有的节点，重新向DOM插入新的分页按钮
                var output = "";
                var nextBar = offset == opts.totalBars ? "<li class=\"am-disabled\"><a yxhref=\"javascript:;\">»</a></li>" : "<li><a yxhref=\"" + opts.url + (offset + 1) + "\">»</a></li>";
                var preBar = offset == 1 ? "<li class=\"am-disabled\"><a yxhref=\"javascript:;\">«</a><