又是分页控件.移动端的.下拉形式的分页.再也不要做了

先上效果图

js代码部分

Stringformat = function (string,obj) {
    var result = string;
    if (arguments.length > 1) {
        if (arguments.length == 2 && typeof (obj) == "object") {
            for (var key in obj) {
                if (obj[key] != undefined) {
                    var reg = new RegExp("({" + key + "})", "g");
                    result = result.replace(reg, obj[key]);
                }
            }
        }
        else {
            for (var i = 1; i < arguments.length; i++) {
                if (arguments[i] != undefined) {
                    //var reg = new RegExp("({[" + i + "]})", "g");//这个在索引大于9时会有问题，谢谢何以笙箫的指出
                    var reg = new RegExp("({)" + i + "(})", "g");
                    result = result.replace(reg, arguments[i]);
                }
            }
        }
    }
    return result;
}


     ///实际使用时修改此代码
     window.gotoPage=function(pageIndex){

         showPaginate(pageIndex,pageSize,totalNum);
     }

     window.showPaginate = function(pageIndex,pageSize,totalNum){

         $(".am-pagination-prev").empty();
         $(".am-pagination-select-el").empty();
         $(".am-pagination-next").empty();  

         var opts = jQuery.extend({  
             PageIndex : 0, 
             PageSize : 0, 
             link_to: "javascript:void(0)", //兼容
             //link_to: "#",
             prev_text: "上一页",
             next_text: "下一页",
             frist_text: "第一页",
             last_text: "最后一页",
             ellipse_text: "...",  
             StartPageIndex:0, //从第0页开始的
             callback: function () { return false; }
         }, opts || {});

            var RowCounts = totalNum ;

            opts.PageSize = pageSize == 0 ? 20 : pageSize;
            opts.CurrentPageIndex = pageIndex == undefined ? opts.StartPageIndex : pageIndex;
            opts.RowCounts = RowCounts  ? RowCounts : 0;
            opts.endPageIndex = (RowCounts / opts.PageSize);

            var endindex = parseInt(opts.endPageIndex);//取整
            opts.endPageIndex = opts.endPageIndex - endindex > 0 ? endindex + 1 : endindex;//多1行都算一页

            opts.leftPageIndex = Math.max(opts.StartPageIndex, opts.CurrentPageIndex - 5); //左边最多显示5页

            opts.rightPageIndex = Math.min(opts.endPageIndex,opts.CurrentPageIndex + 5);//右边最多显示5页


            if ($(".am-pagination-select-el").data("changeBind") != true) {
                $(".am-pagination-select-el").change(function(){
                    var index = $(this).find(":selected").data("PageIndex"); 
                    //if (index  == undefined) {
                    //    alert(999);
                    //} 
                    gotoPage(index);
                })
                .data("changeBind",true);
            }


            //$(".am-pagination-prev").append( Stringformat('<a href="javascript:gotoPage({StartPageIndex})">{frist_text}</a> ',opts));
            if (opts.CurrentPageIndex >   opts.StartPageIndex) {
                opts.TmpPageIndex = opts.CurrentPageIndex - 1;
                $(".am-pagination-prev").append( Stringformat('<a href="javascript:gotoPage({TmpPageIndex})">{prev_text}</a>',opts));
            }else{
                $(".am-pagination-prev").append( Stringformat('<a href="javascript:void({TmpPageIndex})">{prev_text}</a>',opts));
            }

            // 从开始到结束
            opts.TmpPageIndex = opts.leftPageIndex;
            while ( opts.TmpPageIndex < opts.rightPageIndex  ) 
            {  
                var s = $(  Stringformat('<option>{TmpPageIndex}/{endPageIndex}</option>',opts) ); 
                s.data("PageIndex",opts.TmpPageIndex); 
                $(".am-pagination-select-el").append(s);

                opts.TmpPageIndex ++ ;
            }

            //给当前页加样式数据
            $(".am-pagination-select-el").find("option").each(function(){
                var PageIndex =  $(this).data("PageIndex");
                if(PageIndex == opts.CurrentPageIndex){
                    $(this).attr("selected","selected");
                }
            });

            if (opts.CurrentPageIndex < opts.endPageIndex -1  ) //-1 最后一页就不再下一页了
            {
                opts.TmpPageIndex = opts.CurrentPageIndex + 1;
                $(".am-pagination-next").append(Stringformat('<a href="javascript:gotoPage({TmpPageIndex})">{next_text}</a>',opts));
            }else{
                $(".am-pagination-next").append(Stringformat('<a href="javascript:void({TmpPageIndex})">{next_text}</a>',opts));
            }
                //$(".am-pagination-next").append(Stringformat('<a href="javascript:gotoPage({endPageIndex})">{last_text}</a>',opts));



     } 

html代码部分

<!--更多-->
                <ul data-am-widget="pagination" class=" am-pagination am-pagination-select">
                    <li class="am-pagination-prev ">
                        <a href="#" class="">上一页</a>
                    </li>
                    <li class="am-pagination-select">
                        <select class="am-pagination-select-el">
                            <option value="#" class="">1 / 3</option>
                            <option value="#" class="">2 / 3</option>
                            <option value="#" class="">3 / 3</option>
                        </select>
                    </li>
                    <li class="am-pagination-next ">
                        <a href="#" class="">下一页</a>
                    </li>
                </ul>

css部分

取自amazeui.css
/* ==========================================================================
   Component: Pagination
 ============================================================================ */
.am-pagination {
  padding-left: 0;
  margin: 1.5rem 0;
  list-style: none;
  color: #999999;
  text-align: left;
}
.am-pagination:before,
.am-pagination:after {
  content: " ";
  display: table;
}
.am-pagination:after {
  clear: both;
}
.am-pagination > li {
  display: inline-block;
}
.am-pagination > li > a,
.am-pagination > li > span {
  position: relative;
  display: block;
  padding: 0.5em 1em;
  text-decoration: none;
  line-height: 1.2;
  background-color: #ffffff;
  border: 1px solid #dddddd;
  border-radius: 0;
  margin-bottom: 5px;
  margin-right: 5px;
}
.am-pagination > li:last-child > a,
.am-pagination > li:last-child > span {
  margin-right: 0;
}
.am-pagination > li > a:hover,
.am-pagination > li > span:hover,
.am-pagination > li > a:focus,
.am-pagination > li > span:focus {
  background-color: #eeeeee;
}
.am-pagination > .am-active > a,
.am-pagination > .am-active > span,
.am-pagination > .am-active > a:hover,
.am-pagination > .am-active > span:hover,
.am-pagination > .am-active > a:focus,
.am-pagination > .am-active > span:focus {
  z-index: 2;
  color: #ffffff;
  background-color: #0e90d2;
  border-color: #0e90d2;
  cursor: default;
}
.am-pagination > .am-disabled > span,
.am-pagination > .am-disabled > span:hover,
.am-pagination > .am-disabled > span:focus,
.am-pagination > .am-disabled > a,
.am-pagination > .am-disabled > a:hover,
.am-pagination > .am-disabled > a:focus {
  color: #999999;
  background-color: #ffffff;
  border-color: #dddddd;
  cursor: not-allowed;
  pointer-events: none;
}
.am-pagination .am-pagination-prev {
  float: left;
}
.am-pagination .am-pagination-prev a {
  border-radius: 0;
}
.am-pagination .am-pagination-next {
  float: right;
}
.am-pagination .am-pagination-next a {
  border-radius: 0;
}
.am-pagination-centered {
  text-align: center;
}
.am-pagination-right {
  text-align: right;
}