一个完全独立的、简洁的jquery前端分页组件，用到动态添加页内样式的方法哦。

以前一直没有动态往页面添加过可被调用样式类，今天为了封装的独立性（只有js文件），尝试了一下，竟然能行，因此记录下来，已备后用

function insertStyleSheet(styles,styleId) {
    if (!document.getElementById(styleId)) {
        var style = document.createElement("style");
        style.id = styleId;
        (document.getElementsByTagName("head")[0] || document.body).appendChild(style);
        if (style.styleSheet) { //for ie
            style.styleSheet.cssText = styles;
        } else {//for w3c
            style.appendChild(document.createTextNode(styles));
        }
    }
}

jQuery.fn.LoadPageFilter = function (url, pageIndex, totalPage) {
    if (totalPage > 1) {
        var styles = ".pagefilter{100%;height:36px;text-align:center;}.pagefilter a {color:#0f7fc9;text-decoration:none;padding:4px 12px;font-weight:bold;border-radius:3px;box-shadow:0 1px 0px 1px rgba(0, 0, 0, 0.05);margin:5px;}.pagefilter a:hover {color:#337383;background-color:#eeeeee;transition:all ease-in-out 0.2s;}.pagefilter .selected{background-color:#cccccc;}";
        insertStyleSheet(styles, "pageFilterStyle");
        var t = $(this);
        var frame = $('<div class="pagefilter"></div>');
        t.append(frame);
        if (pageIndex > 1) {
            frame.append('<a href="' + url + '?pageIndex=' + (pageIndex - 1) + '">← Previous</a>');
        }
        frame.append('<a href="' + url + '?pageIndex=1" class="' + (pageIndex == 1 ? "selected" : "") + '">1</a>');
        if (pageIndex == 3) {
            frame.append('<a href="' + url + '?pageIndex=2">2</a>');
        }
        if (pageIndex > 3) {
            frame.append('<a href="#"> ... </a>');
            frame.append('<a href="' + url + '?pageIndex=' + (pageIndex - 1) + '">' + (pageIndex - 1) + '</a>');
        }
        if (pageIndex > 1 && pageIndex < totalPage) {
            frame.append('<a href="#" class="selected">' + pageIndex + '</a>');
        }
        if (pageIndex < (totalPage - 2)) {
            frame.append('<a href="' + url + '?pageIndex=' + (pageIndex + 1) + '">' + (pageIndex + 1) + '</a>');
            frame.append('<a href="#"> ... </a>');
        }
        if (pageIndex == (totalPage - 2)) {
            frame.append('<a href="' + url + '?pageIndex=' + (totalPage - 1) + '">' + (totalPage - 1) + '</a>');
        }
        frame.append('<a href="' + url + '?pageIndex=' + totalPage + '" class="' + (pageIndex == totalPage ? "selected" : "") + '">' + totalPage + '</a>');
        if (pageIndex < totalPage) {
            frame.append('<a href="' + url + '?pageIndex=' + (pageIndex + 1) + '">Next →</a>');
        }
    }
}

添加回调方法：

jQuery.fn.LoadPageFilter = function (pageIndex, totalPage, callback) {
    if (totalPage > 1) {
        var styles = ".pagefilter{100%;height:36px;text-align:center;padding:6px 0;margin:10px 0;}.pagefilter a {color:#0f7fc9;text-decoration:none;padding:4px 12px;font-weight:bold;border-radius:3px;box-shadow:0 1px 0px 1px rgba(0, 0, 0, 0.05);margin:5px;}.pagefilter a:hover {color:#337383;background-color:#eeeeee;transition:all ease-in-out 0.2s;}.pagefilter .selected{background-color:#cccccc;}";
        insertStyleSheet(styles, "pageFilterStyle");
        var t = $(this);
        var frame = $('<div class="pagefilter"></div>');
        t.append(frame);
        if (pageIndex > 1) {
            frame.append('<a href="javascript:' + callback + '(' + (pageIndex - 1) + ');">← Previous</a>');
        }
        frame.append('<a href="javascript:' + callback + '(1);" class="' + (pageIndex == 1 ? "selected" : "") + '">1</a>');
        if (pageIndex == 3) {
            frame.append('<a href="javascript:' + callback + '(2);">2</a>');
        }
        if (pageIndex > 3) {
            frame.append('<a href="#"> ... </a>');
            frame.append('<a href="javascript:' + callback + '(' + (pageIndex - 1) + ');">' + (pageIndex - 1) + '</a>');
        }
        if (pageIndex > 1 && pageIndex < totalPage) {
            frame.append('<a href="#" class="selected">' + pageIndex + '</a>');
        }
        if (pageIndex < (totalPage - 2)) {
            frame.append('<a href="javascript:' + callback + '(' + (pageIndex + 1) + ');">' + (pageIndex + 1) + '</a>');
            frame.append('<a href="#"> ... </a>');
        }
        if (pageIndex == (totalPage - 2)) {
            frame.append('<a href="javascript:' + callback + '(' + (totalPage - 1) + ');">' + (totalPage - 1) + '</a>');
        }
        frame.append('<a href="javascript:' + callback + '(' + totalPage + ');" class="' + (pageIndex == totalPage ? "selected" : "") + '">' + totalPage + '</a>');
        if (pageIndex < totalPage) {
            frame.append('<a href="javascript:' + callback + '(' + (pageIndex + 1) + ');">Next →</a>');
        }
    }
}