jquery.twbsPagination.js动态页码分页demo

来源：互联网发布：小爱和花儿知乎编辑：程序博客网时间：2024/05/23 00:08
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.min.css"></head><body><div class="container" style="margin: 40px auto;">    <div class="row">        <div class="col-md-12">            <div class="row" id="render-div">                <!--<div class="col-md-4">                    <img src="" alt="img">                    <h4></h4>                    <p></p>                    <p></p>                </div>-->            </div>        </div>        <div class="col-md-12">            <ul class="pagination" id="pagination"></ul>        </div>    </div></div><script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script><script src="js/jquery.twbsPagination.min.js"></script><script>    /*http://esimakin.github.io/twbs-pagination/*/    function initUserlogData() {        //重置分页组件否则保留上次查询的，一般来说很多问题出现与这三行代码有关如：虽然数据正确但是页码不对仍然为上一次查询出的一致        $('#pagination').empty();        $('#pagination').removeData("twbs-pagination");        $('#pagination').unbind("page");        //设置默认当前页        var pagenow = 1;        //设置默认总页数        var totalPage = 1;        //设置默认可见页数        var visiblecount = 7;        //加载后台数据页面        //每页显示条数        var counts = 10;        function loaddata() {            $.ajax({                //url = http://imoocnote.calfnote.com/inter/getClasses.php?curPage=1                url: "http://imoocnote.calfnote.com/inter/getClasses.php",                type: "get",                data: {                    "curPage": pagenow                },                dataType: "json",                beforeSend: function (jqXHR) {                    //loadingNo();                    //jqXHR.setRequestHeader('secretKey', key);                    //jqXHR.setRequestHeader('appKey', 'appKey');                },                success: function (data) {                    $('#total').text('共' + data.totalCount + '条');                    var totalCount = data.totalCount;                    $('#render-div').empty();                    var html = '';                    if (data && data.data && data.data.length > 0) {                        //计算页码数                        totalCount = data.totalCount;//总条数                        var total_page = totalCount / counts;//计算总页码                        totalPage = (parseInt(total_page) == total_page) ? parseInt(total_page) : parseInt(total_page) + 1;                        //遍历渲染数据                        $.each(data.data, function (i, v) {                            html += '<div class="col-md-3">' +                                '<img src="' + v.image + '" alt="' + v.title + '">' +                                '<h4 style="height: 32px;">' + v.title + '</h4>' +                                '<p style="height: 32px;">' + v.subtitle + '</p>' +                                '<p style="height: 32px;">' + v.timespan + '</p>' +                                '</div>';                        });                    }                    $('#render-div').append(html);                    //后台总页数与可见页数比较如果小于可见页数则可见页数设置为总页数，                    if (totalPage < visiblecount) {                        visiblecount = totalPage;                    }                    $('#pagination').twbsPagination({                        totalPages: totalPage,                        visiblePages: visiblecount,                        version: '1.1',                        //页面点击时触发事件                        onPageClick: function (event, page) {                            // 将当前页数重置为page                            pagenow = page;                            //调用后台获取数据函数加载点击的页码数据                            loaddata();                        }                    });                },                error: function (e) {                    alert("数据访问失败")                }            });        }        //函数初始化是调用内部函数        loaddata();    }    initUserlogData();</script></body></html>
阅读全文
0 0