分页组件的使用-jqPaginator

来源：互联网发布：ssh连接指定端口编辑：程序博客网时间：2024/05/21 18:11
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>jqpaginator分页</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">            <p id="p2"></p>            <ul class="pagination" id="pagination2"></ul>            <p id="total"></p>        </div>    </div></div><script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script><script src="js/jqPagingtor.min.js"></script><script>    /*官网 http://jqpaginator.keenwon.com/*/    //url = http://imoocnote.calfnote.com/inter/getClasses.php?curPage=1    $.jqPaginator('#pagination2', {        //注意：要么设置totalPages，要么设置totalCounts + pageSize，否则报错；设置了totalCounts和pageSize后，会自动计算出totalPages。        //totalPages: 10,//分页的总页数;默认0        totalCounts: 10,//分页的总条目数；默认0        pageSize: 10,//每一页的条目数；默认0        visiblePages: 7,//最多显示的页码数        currentPage: 1,        first: '<li class="prev"><a href="javascript:;">First</a></li>',        last: '<li class="prev"><a href="javascript:;">Last</a></li>',        prev: '<li class="prev"><a href="javascript:;">Previous</a></li>',        next: '<li class="next"><a href="javascript:;">Next</a></li>',        page: '<li class="page"><a href="javascript:;">{{page}}</a></li>',        onPageChange: function (num, type) {            $('#p2').text('当前页码：' + type + '：' + num);            $.ajax({                //url = http://imoocnote.calfnote.com/inter/getClasses.php?curPage=1                url: "http://imoocnote.calfnote.com/inter/getClasses.php",                type: "get",                timeout: 5000,                dataType: 'json',                /*                 contentType: "application/json",                 data: JSON.stringify(datajson),                 * */                data: {curPage: num},                success: function (data) {                    $('#total').text('共' + data.totalCount + '条');                    var totalCount = data.totalCount;                    //初始化后，动态修改配置                    $('#pagination2').jqPaginator('option', {                        totalCounts: totalCount//根据返回的总条目数动态显示页码总数                    });                    $('#render-div').empty();                    var html = '';                    if (data && data.data && data.data.length > 0) {                        $.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);                },                error: function (xhr, textStatus) {                    console.log('错误');                    console.log(xhr);                    console.log(textStatus);                }            })        }    });</script></body></html>
阅读全文
0 0