LEN

Bootstrap Ajax 生成分页
<div class="main-box-body filter-block pull-righ...
扫描右侧二维码阅读全文
10
2017/03

Bootstrap Ajax 生成分页

 <div class="main-box-body filter-block pull-right hide-if-no-paging">
      <ul class="pagination" id="paging">
            <li class="disabled" ><a href="#" tag="right"><i class="fa fa-chevron-right"></i></a></li>
            <li><a href='#'>1</a></li>
            <li><a href="#" tag="right"><i class="fa fa-chevron-right"></i></a></li>
      </ul>
</div>

Bootstrap Ajax 生成分页支持代码

    
    //生成分页工具
    function create_paging(cur_page, page_num) {
        var paging = $('ul#paging');
        var element = '';
        var start = '';
        var end = '';
        for (var i = 1; i <= page_num; i++) {
            if (i == cur_page) {
                element += '<li class="active"><a href="#" tag="' + i + '">' + i + '</a></li>';
            } else {
                element += '<li><a href="#" tag="' + i + '">' + i + '</a></li>';
            }
        }

        if (1 >= page_num) { //如果都是 页数不大于1
            end += '<li class="disabled" ><a href="#" tag="right"><i class="fa fa-chevron-right"></i></a></li>';
            start += '<li class="disabled"> <a href="#" tag="left"> <i class="fa fa-chevron-left"></i></a></li>';
        } else if (page_num == cur_page) { //当前页 等于最后一页
            end += '<li class="disabled" ><a href="#" tag="right"><i class="fa fa-chevron-right"></i></a></li>';
            start += '<li> <a href="#" tag="left"> <i class="fa fa-chevron-left"></i></a></li>';
        } else if (1 == cur_page) { // 当前是第一页
            start += '<li class="disabled"> <a href="#" tag="left"> <i class="fa fa-chevron-left"></i></a></li>';
            end += '<li><a href="#" tag="right"><i class="fa fa-chevron-right"></i></a></li>';
        } else { //正常情况
            start += '<li> <a href="#" tag="left"> <i class="fa fa-chevron-left"></i></a></li>';
            end += '<li><a href="#" tag="right"><i class="fa fa-chevron-right"></i></a></li>';
        }
        paging.html(start + element + end);

        bindChangePage(); //给每个分页元素绑定触发事件
    }

    function bindChangePage() {
        $('ul#paging a').click(function () {
            var cur_page = $(this).attr('tag');
            dump(cur_page);
            get_record_list(cur_page);
        })
    }

Bootstrap 3

   <div class="row" style="margin-left:15px;float: left;">
        <div class="main-box-body filter-block pull-right hide-if-no-paging">
            <ul class="pagination" id="paging">
                <li class="disabled">
                    <a href="#" tag="right">
                        <span aria-hidden="true">&laquo;</span>
                    </a>
                </li>
                <li>
                    <a href='#'>1</a>
                </li>
                <li>
                    <a href="#" tag="right">
                        <span aria-hidden="true">&raquo;</span>
                    </a>
                </li>
            </ul>
        </div>
    </div>


</div><!-- /row -->

<script type="text/javascript">
    $(function () {
        get_record_list(1);
    })
    /**
     * 获取记录
     * @param cur_page
     */
    function get_record_list(cur_page) {
        $.ajax({
            url: './log_list',
            dataType: "json",
            type: 'POST',
            data: "page=" + cur_page,
            success: function (data) {
                if (data.status == 200) {
                    console.log(data.data);
                    var count = data.data.count;
                    var page = data.data.page;
                    console.log(count, page, data.data);


                    create_paging(page, count);
                }
            }
        });
    }

    //生成分页工具
    function create_paging(cur_page, page_num) {
        var paging = $('ul#paging');
        var element = '';
        var start = '';
        var end = '';
        for (var i = 1; i <= page_num; i++) {
            if (i == cur_page) {
                element += '<li class="active"><a href="#" tag="' + i + '">' + i + '</a></li>';
            } else {
                element += '<li><a href="#" tag="' + i + '">' + i + '</a></li>';
            }
        }

        if (1 >= page_num) { //如果都是 页数不大于1
            end += '<li class="disabled" ><a href="#" tag="right"><span aria-hidden="true">&raquo;</span></a></li>';
            start += '<li class="disabled"> <a href="#" tag="left"> <span aria-hidden="true">&laquo;</span></a></li>';
        } else if (page_num == cur_page) { //当前页 等于最后一页
            end += '<li class="disabled" ><a href="#" tag="right"><span aria-hidden="true">&raquo;</span></a></li>';
            start += '<li> <a href="#" tag="left"> <span aria-hidden="true">&laquo;</span></a></li>';
        } else if (1 == cur_page) { // 当前是第一页
            start += '<li class="disabled"> <a href="#" tag="left"> <span aria-hidden="true">&laquo;</span></a></li>';
            end += '<li><a href="#" tag="right"><span aria-hidden="true">&raquo;</span></a></li>';
        } else { //正常情况
            start += '<li> <a href="#" tag="left"> <span aria-hidden="true">&laquo;</span></a></li>';
            end += '<li><a href="#" tag="right"><span aria-hidden="true">&raquo;</span></a></li>';
        }
        paging.html(start + element + end);

        bindChangePage(); //给每个分页元素绑定触发事件
    }

    function bindChangePage() {
        $('ul#paging a').click(function () {
            var cur_page = $(this).attr('tag');
            get_record_list(cur_page);
        })
    }

</script>
最后修改:2017 年 11 月 03 日 12 : 44 PM
如果觉得我的文章对你有用,请随意赞赏

发表评论