• 封装的分页jq


    (function ($) {
    $.fn.page = function (options) {
    var defaults = {
    divid: "pagediv",
    count: 10, //remove or hide
    pageindex: 1,
    callback: function (pageindex) { }
    };
    var html = "";
    var opts = $.extend(defaults, options);
    opts.callback(1);
    var div = $("#" + opts.divid);
    var a = [];
    //根据当前页数判断上一页是否可以点击
    if (opts.pageindex == 1) {
    html = html + "<a href="#" class="prev unclick">上一页</a>";
    } else {
    html = html + "<a href="#" class="prev">上一页</a>";
    }
    
    for (var i = 0; i < opts.count; i++) {
    //判断显示页码的样式
    if ((i + 1) == opts.pageindex) {
    html = html + "<a href="javascript:void(0)" style="background:#999">" + (i + 1) + "</a>"
    } else {
    html = html + "<a href="javascript:void(0)">" + (i + 1) + "</a>";
    }
    }
    //根据当前页数判断上一页是否可以点击
    if (opts.pageindex == opts.count) {
    html = html + "<a href="javascript:void(0)" class="next unclick">下一页</a>";
    } else {
    html = html + "<a href="javascript:void(0)" class="next">下一页</a>";
    }
    $("#" + opts.divid).html(html);
    $("#" + opts.divid + " a").not($(".prev")).not(".next").click(function () {
    $(this).css("background", "#999")
    $(this).siblings().removeAttr("style");
    opts.pageindex = $(this).html();
    if (opts.pageindex != 1) {
    $(".prev").removeClass("unclick");
    } else {
    $(".prev").addClass("unclick");
    }
    if (opts.pageindex == opts.count) {
    $(".next").addClass("unclick");
    } else {
    $(".next").removeClass("unclick");
    }
    opts.callback(opts.pageindex);
    })
    $(".prev").click(function () {
    $("#" + opts.divid + " a").eq(opts.pageindex).removeAttr("style");
    if (opts.pageindex == 1) {
    opts.pageindex == 1
    } else {
    opts.pageindex = opts.pageindex - 1;
    }
    $("#" + opts.divid + " a").eq(opts.pageindex).css("background", "#999");
    if (opts.pageindex != 1) {
    $(".prev").removeClass("unclick");
    } else {
    $(".prev").addClass("unclick");
    }
    if (opts.pageindex == opts.count) {
    $(".next").addClass("unclick");
    } else {
    $(".next").removeClass("unclick");
    }
    opts.callback(opts.pageindex);
    });
    $(".next").click(function () {
    $("#" + opts.divid + " a").eq(opts.pageindex).removeAttr("style");
    if (opts.pageindex == 10) {
    opts.pageindex == 10
    } else {
    opts.pageindex = parseInt(opts.pageindex) + 1;
    }
    $("#" + opts.divid + " a").eq(opts.pageindex).css("background", "#999");
    if (opts.pageindex != 1) {
    $(".prev").removeClass("unclick");
    } else {
    $(".prev").addClass("unclick");
    }
    if (opts.pageindex == opts.count) {
    $(".next").addClass("unclick");
    } else {
    $(".next").removeClass("unclick");
    }
    opts.callback(opts.pageindex);
    });
    
    }
    
    })(jQuery);
  • 相关阅读:
    如何搭建Redis集群
    AOP的作用
    IDEA上传代码到GitGub
    Runnable的作用及使用方式
    idea如何自动生成序列化ID?
    15000 字的 SQL 语句大全
    图解算法时间复杂度
    图解JVM的类加载机制(详细版)
    (转)图解排序算法之归并排序
    图解分布式id生成算法SnowFlake
  • 原文地址:https://www.cnblogs.com/liuchang/p/3990619.html
Copyright © 2020-2023  润新知