JS 自写datapage.js 通用分页

var Page = function () { };

Page.prototype = {

    Loading: "<img src='/Content/Scripts/Datapager/loading.gif /><span>正在加载数据，请稍等...</span>",

    NoResult: "暂无相关数据！",

    Count: 10,

    Current: 1,

    Total: 0,

    Url: "",

    Dom: null,

    Container: null,

    Data: {},

    EXP: null,//扩展参数

    type: 0,

    CallBack: null,

    GetPageData: function () {

        $this = this;

        //if ($this.Dom) {

        //   $this.Data = new JSONSerializer().Serialize($this.Dom);

        //}

        

        this.Data.PageSize = this.Count;

        this.Data.PageNum = this.Current;

        this.Data.type = this.type;

        this.Data.EXP = this.EXP;

        this.Data._ = Math.random();

        $("#filter").hide();

        $("#dataArea").hide();

        $("#caption").html($this.Loading);

        $.ajax({

            url: $this.Url,

            async: false,

            cache: false,

            dataType: "json",

            data: $this.Data,

            success: function (result) {

                if (result.ReturnType) {

                    if (result.ReturnCount > 0) {

                        $("#pagers").show();

                        if ($this.CallBack) {

                            if ($this.Container) {

                                $this.Container.empty();

                            }

                            $this.CallBack(result.ReturnData);

                            // $this.Total = result.ReturnData[0].TotalItems;//原来写法

                            $this.Total = result.ReturnCount;//当前写法

                        }

                    }

                    else {

                        if ($this.Container) {

                            $this.Container.empty();

                        }

                        $("#mtitle").html("信息提示");

                        $("#msg").html(result.ReturnMsg);

                        $("#msg_btn").html("<a class="btn btn-warning" style='border-radius:6px;'  data-dismiss="modal">OK</a>");

                        $('#alertModel').modal('show');

                        $("#pagers").hide();

                    }

                }

                else {

                    if ($this.Container) {

                        $this.Container.empty();

                    }

                    $("#mtitle").html("信息提示");

                    $("#msg").html(result.ReturnMsg);

                    $("#msg_btn").html("<a class="btn btn-warning" style='border-radius:6px;'  data-dismiss="modal">OK</a>");

                    $('#alertModel').modal('show');

                    $("#pagers").hide();

                }

            },

            complete: function () {

                $this.Paged();

            }

        });

    },

    Paged: function () {

        var max = Math.ceil(this.Total / this.Count);

        $this = this;

        $("#btnSearch").unbind("click").click(function () {

            $this.Current = 1;

            $this.GetPageData();

        });

        $("#firstPage").unbind("click").click(function () {

            $this.Current = 1;

            $this.GetPageData();

        });

        $("#prePage").unbind("click").click(function () {

            if ($this.Current > 1) {

                $this.Current--;

                $this.GetPageData();

            }

        });

        $("#nextPage").unbind("click").click(function () {

            if ($this.Current < max) {

                $this.Current++;

                $this.GetPageData();

            }

        });

        $("#lastPage").unbind("click").click(function () {

            if ($this.Current < max) {

                $this.Current = max;

                $this.GetPageData();

            }

        });

        if ($this.Current == 1) {

            $("#firstPage,#prePage").addClass("disabled");

            $("#prePage").unbind("click");

            if ($this.Current == max) {

                $("#lastPage,#nextPage").addClass("disabled");

            }

            else {

                $("#lastPage,#nextPage").removeClass("disabled");

            }

        }

        else if ($this.Current == max) {

            $("#lastPage,#nextPage").addClass("disabled");

            $("#firstPage,#prePage").removeClass("disabled");

        }

        else {

            $("#lastPage,#nextPage,#firstPage,#prePage").removeClass("disabled");

        }

        $("#pages").val("当前第" + $this.Current + "页 共" + max + "页");

        $("#pages").unbind("blur").blur(function () {

            var page = parseInt($("#pages").val());

            if (page > 0 && page < max + 1) {

                $this.Current = page;

                $this.GetPageData();

            }

            else {

                $("#pages").val("当前第" + $this.Current + "页 共" + max + "页");

            }

        });

        $("#pages").unbind("focus").focus(function () {

            var page = $("#pages").val("");

        });

    },

    Pchange: function () {

        $this.Count = parseInt($("#selelct_PageCount").val());

        $this.Current = 1;

        $this.GetPageData();

    }

}

//初始化分页

$(function () {

    $("#selelct_PageCount").change(function () {

        var page = new Page();

        page.Pchange();

    });

});

 分页样式HTML

  <!--start 分页-->

                        <div class="content-body" style="border: none; " id="pagers">

                            <div class="gigantic pagination" style="margin-top: 10px; float:left; 322px;">

                                <a class="first" data-action="first" id="firstPage"><i class="fa fa-angle-double-left" style="font-size: 25px;"></i></a>

                                <a class="previous" data-action="previous" id="prePage"><i class="fa fa-angle-left" style="font-size: 25px"></i></a>

                                <input type="text" id="pages" />

                                <a class="next" data-action="next" id="nextPage"><i class="fa fa-angle-right" style="font-size: 25px"></i></a>

                                <a class="last" data-action="last" id="lastPage"><i class="fa fa-angle-double-right" style="font-size: 25px"></i></a>

                            </div>

                            <div>

                                <select id="selelct_PageCount" style="margin-left: 330px; margin-top: 10px; height: 37px; 55px;" class="maoxian">

                                    <i class="fa-caret-down"></i>

                                    <option value="2">2</option>

                                    <option value="3">3</option>

                                    <option value="5">5</option>

                                    <option selected="selected" value="10">10</option>

                                    <option value="20">20</option>

                                    <option value="30">30</option>

                                    <option value="50">50</option>

                                    <option value="100">100</option>

                                    <option value="200">200</option>

                                    <option value="500">500</option>

                                </select>

                            </div>

                            <div class="clearfix"></div>

                        </div>

                        <!--end 分页-->

 css文件

.pagination {

    position:absolute;

  display: inline-block;

  border:1px solid #cecece;

  320px;

  height:37px;

  border-radius: 3px; }

.pagination a {

  background-color:#1fb5ac;

  display: block;

  float: left;

  30px;

  height: 30px;

  outline: none;

  color: #1fb5ac;

  vertical-align: middle;

  text-align: center;

  text-decoration: none;

  font-weight: bold;

  font-size: 16px;

  font-family: Times, 'Times New Roman', Georgia, Palatino;

  /* ATTN: need a better font stack */

  background-color: #1fb5ac;

  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f3f3f3), color-stop(100%, lightgrey));

  background-image: -webkit-linear-gradient(#fff, #fff);

  background-image: linear-gradient(#fff, #fff); }

  .pagination a:hover, .pagination a:focus, .pagination a:active {

    background-color: #fff;

    color: #000;

    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #e4e4e4), color-stop(100%, #cecece));

    background-image: -webkit-linear-gradient(#e4e4e4, #e4e4e4);

    background-image: linear-gradient(#e4e4e4, #e4e4e4); 

    background-image: -webkit-linear-gradient(#fff, #fff);

    background-image: linear-gradient(#fff, #fff);

    cursor:pointer;

  }

  .pagination a.disabled, .pagination a.disabled:hover, .pagination a.disabled:focus, .pagination a.disabled:active {

    background-color: #fff;

   

    background-image: -webkit-linear-gradient(#fff, #fff);

    background-image: linear-gradient(#fff, #fff);

    color: #cecece;

    cursor: default; 

    background-color: #f3f3f3;

    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f3f3f3), color-stop(100%, lightgrey));

    background-image: -webkit-linear-gradient(#fff, #fff);

    background-image: linear-gradient(#fff, #fff);

    color: #a8a8a8;

    cursor:not-allowed;

  }

.pagination a:first-child {

  border: none;

  border-radius: 2px 0 0 2px; }

.pagination a:last-child {

  border: none;

  border-radius: 0 2px 2px 0; }

.pagination input {

  float: left;

  margin: 0;

  padding: 0;

  125px;

  height: 20px;

  outline: none;

  border: none;

  vertical-align: middle;

  text-align: center; }

/* gigantic class for demo purposes */

.gigantic.pagination {

  margin: 30px 0; }

.gigantic.pagination a {

    z-index:1000;

  height: 35px;

  35px;

  font-size: 31px;

  line-height: 31px; }

.gigantic.pagination input {

  178px;

  height: 35px;

  font-size: 14px;

  line-height: 30px;

  border-left:1px solid #cecece;

  border-right:1px solid #cecece;

}

/* log element for demo purposes */

.log {

  display: none;

  background-color: #EDEDED;

  

  height: 300px;

  524px;

  overflow: auto;

  margin-left: 0;

  list-style: none;

  padding: 10px; }

  .log li {

    margin-top: 0;

    margin-bottom: 5px; }

select.maoxian {

    border:1px solid #cecece;

    -webkit-appearance: none;

    -moz-appearance: none;

    -appearance: none;

    background               : url(/images/basic/down.png) 85% / 15% no-repeat #fdfdfd;

    border-radius: 3px;

    cursor:pointer;

    font-size:0.7em;

}

select.maoxian:hover {

    border:1px solid #cecece;

    -webkit-appearance: none;

    -moz-appearance: none;

    -appearance: none;

    background               : url(/images/basic/down-hover.png) 85% / 15% no-repeat #fdfdfd;

    border-radius: 3px;

    cursor:pointer;

    font-size:0.7em;

}

 

select.hetong {

    border:1px solid #cecece;

    -webkit-appearance: none;

    -moz-appearance: none;

    -appearance: none;

    background               : url(/images/basic/down.png) 93% / 7% no-repeat #fdfdfd;

    border-radius: 3px;

    cursor:pointer;

    font-size:0.7em;

}

select.hetong:hover {

    border:1px solid #cecece;

    -webkit-appearance: none;

    -moz-appearance: none;

    -appearance: none;

    background               : url(/images/basic/down-hover.png) 93% / 7% no-repeat #fdfdfd;

    border-radius: 3px;

    cursor:pointer;

    font-size:0.7em;

}