function Page(index, size, count) {
                var len = 10,
                        show = len - 3;


                var prev = $("<li />").addClass("prev").html('<a href="#">上一頁</a>');
                var next = $("<li />").addClass("next").html('<a href="#">下一頁</a>');
                var li;
                if (index <= 0) prev.addClass("disabled");
                if (index >= count / size || index + 1 >= count / size) next.addClass("disabled");
                var _p = $(".dataTables_paginate > ul");


                _p.html("");

                //上一頁
                prev.click(function () {
                        if (index > 0) load(index);
                });
                _p.append(prev);
                if (index * size >= count) {
                        li = $("<li />").html('<a href="#">1</a>').addClass("active");
                        _p.append(li);
                }
                var _page = (count % size) == 0 ? count / size : parseInt(count / size) + 1;
                if (index * size < count) {

                        if (_page <= len) {
                                for (var i = 1; i < _page + 1; i++) {
                                        li = $("<li />").html('<a href="#">' + i + '</a>');
                                        if (i === index + 1) li.addClass("active");
                                        _p.append(li);
                                }
                        }

                        if (_page > len) {

                                if (index < show) {
                                        for (var i = 1; i < 9; i++) {
                                                li = $("<li />").html('<a href="#">' + i + '</a>');
                                                if (i === index + 1) li.addClass("active");

                                                _p.append(li);
                                        }
                                        _p.append(li);
                                        $("<li />").html('<a href="#">...</a>').appendTo(_p);

                                        li = $("<li />").html('<a href="#">' + _page + '</a>');

                                        _p.append(li);

                                }
                                if (index >= show && index <= _page - show) {

                                        /* 第一頁*/
                                        li = $("<li />").html('<a href="#">1</a>');

                                        _p.append(li);

                                        $("<li />").html('<a href="#">...</a>').appendTo(_p);


                                        /*中間頁*/

                                        for (var i = index - 2; i < index + 6; i++) {
                                                li = $("<li />").html('<a href="#">' + i + '</a>');
                                                if (i === index + 1) li.addClass("active");
                                                _p.append(li);
                                        }


                                        /* 最后頁*/
                                        $("<li />").html('<a href="#">...</a>').appendTo(_p);

                                        li = $("<li />").html('<a href="#">' + _page + '</a>');

                                        _p.append(li);

                                }

                                if (index > _page - show) {
                                        /* 第一頁 */
                                        li = $("<li />").html('<a href="#">1</a>');

                                        _p.append(li);

                                        $("<li />").html('<a href="#">...</a>').appendTo(_p);


                                        /* 中間頁 */

                                        for (var i = _page - 8; i < _page + 1; i++) {
                                                li = $("<li />").html('<a href="#">' + i + '</a>');
                                                if (i === index + 1) li.addClass("active");

                                                _p.append(li);
                                        }

                                }

                        }
                        next.click(function () {
                                if (index < _page - 1) load(index + 2);
                        });
                        _p.append(next);

                        $("li:not(:first):not(:last) a").click(function () {
                                var _pa = $(this).text();
                                if (_pa != "...") {

                                        load(_pa);
                                }

                        });
                }
        }

.pagination {
        height: 36px;
        margin: 18px 0;
}

        .pagination ul {
                display: inline-block;
                *display: inline;
                *zoom: 1;
                margin-left: 0;
                margin-bottom: 0;
                -webkit-border-radius: 3px;
                -moz-border-radius: 3px;
                border-radius: 3px;
                -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
                -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
                box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
        }

                .pagination ul > li {
                        display: inline;
                }

                        .pagination ul > li > a, .pagination ul > li > span {
                                float: left;
                                padding: 0 14px;
                                line-height: 34px;
                                text-decoration: none;
                                background-color: #ffffff;
                                border: 1px solid #dddddd;
                                border-left-width: 0;
                        }

                                .pagination ul > li > a:hover, .pagination ul > .active > a, .pagination ul > .active > span {
                                        background-color: #f5f5f5;
                                }

                .pagination ul > .active > a, .pagination ul > .active > span {
                        color: #999999;
                        cursor: default;
                }

                .pagination ul > .disabled > span, .pagination ul > .disabled > a, .pagination ul > .disabled > a:hover {
                        color: #999999;
                        background-color: transparent;
                        cursor: default;
                }

                .pagination ul > li:first-child > a, .pagination ul > li:first-child > span {
                        border-left-width: 1px;
                        -webkit-border-radius: 3px 0 0 3px;
                        -moz-border-radius: 3px 0 0 3px;
                        border-radius: 3px 0 0 3px;
                }

                .pagination ul > li:last-child > a, .pagination ul > li:last-child > span {
                        -webkit-border-radius: 0 3px 3px 0;
                        -moz-border-radius: 0 3px 3px 0;
                        border-radius: 0 3px 3px 0;
                }

.pagination-centered {
        text-align: center;
}

.pagination-right {
        text-align: right;
}