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

来源：互联网发布：in软件怎么裁剪编辑：程序博客网时间：2024/04/27 17:24

先上效果图
这里写图片描述

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;}

0 0