var CreatePage = function (option) {
    //$(".table-responsive").responsiveTable();
    var config = {
        PageBar: "#PageBar",
        PageNo: 1,
        PageSize: 50,
        DataCount: 0,
        PageCount: 0,
        ToPage: function () { },
        Count: 3
    };
    
    config = $.extend(config, option);
    config.PageCount = parseInt((config.DataCount + config.PageSize - 1) / config.PageSize);
    if (config.PageCount <= 1) {
        $(config.PageBar).html("");
        $(config.PageBar).hide();
        return;
    }
    $(config.PageBar).html("");
    if (config.DataCount > 0) {
        var clearcss = "<div style='clear:both;'></div>";
        var nEnd = config.PageNo * config.PageSize;
        if (nEnd > config.DataCount) {
            nEnd = config.DataCount;
        }
        var total = "<div class='pull-left'>" + ((config.PageNo - 1) * config.PageSize + 1) + "~" + nEnd + " / " + config.DataCount + "</div>";
        if (config.PageCount <= 1) {
            total += clearcss;
        }
        $(config.PageBar).append(total);
    }
    

    var eRight = $('<div class="btn-group pull-right"></div>')
    $(config.PageBar).append(eRight);

    var eFirst = $('<button class="btn btn-sm">首页</button>');
    eFirst.bind("click", function () {
        config.ToPage(1);
    });
    $(eRight).append(eFirst);

    var ePrev = $('<button class="btn btn-sm">上一页</button>');
    ePrev.bind("click", function () {
        var page = config.PageNo - 1;
        if (page < 1) {
            page = 1;
        }
        config.ToPage(page);
    });
    $(eRight).append(ePrev);

    var nStart = 1;
    var nEnd = 1;
    nStart = config.PageNo - config.Count;
    nEnd = config.PageNo + config.Count;
    if (nStart < 1) {
        nEnd = nEnd + (1 - nStart);
        nStart = 1;
    }
    if (nEnd > config.PageCount) {
        nStart = nStart - (nEnd - config.PageCount);
        nEnd = config.PageCount;
    }
    if (nStart < 1) {
        nStart = 1;
    }

    for (var i = nStart; i <= nEnd; i++) {
        var eItem = $('<button data-page="' + i + '" class="btn btn-sm ' + (i == config.PageNo ? "btn-info" : "") + '">' + i + '</button>');
        eItem.bind("click", function () {
            config.ToPage(Number($(this).attr("data-page")));
        });
        $(eRight).append(eItem);
    }

    var eNext = $('<button class="btn btn-sm">下一页</button>');
    eNext.bind("click", function () {
        var page = config.PageNo + 1;
        if (page > config.PageCount) {
            page = config.PageCount;
        }
        config.ToPage(page);
    });
    $(eRight).append(eNext);

    var eLast = $('<button class="btn btn-sm">末页</button>');
    eLast.bind("click", function () {
        config.ToPage(config.PageCount);
    });
    $(eRight).append(eLast);
    $(eRight).append($('<div style="clear:both;"></div>'));
};