分页

来源：互联网发布：淘宝内部优惠券群号编辑：程序博客网时间：2024/06/06 00:58
表格分页
插件来自：http://www.jq22.com/jquery-info15943
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <meta http-equiv="X-UA-Compatible" content="ie=edge">    <link rel="stylesheet" href="./paging.css">    <title>Paging</title>    <style type="text/css" rel="stylesheet">        td{            width:150px;height:50px; text-align: center;        }    </style></head><body><table border="1" cellspacing="0" cellpadding="0">    <thead>    <tr>        <td >ID</td>        <td >标题</td>        <td >内容</td>        <td >时间</td>    </tr>    </thead>    <tbody>    </tbody></table><div class="box" id="box"></div>    <script src="./jquery-1.11.1.min.js"></script>    <script src="./paging.js"></script>    <script>        var items=0;        var size=5;        $.ajax({            type:"GET",            dataType: "json",            url:"http://10.20.12.30:3000/queryAllActivity?page=0&size=5",            success:function(res){                items=res.num;                $('#box').paging({                    initPageNo: 1, // 初始页码                    totalPages: Math.ceil(items/size), //总页数                    totalCount: '合计' + items + '条数据', // 条目总数                    slideSpeed: 600, // 缓动速度。单位毫秒                    jump: true, //是否支持跳转                    callback: function(page) { // 回调函数                        page=page-1;                        $.ajax({                            type:"GET",                            dataType: "json",                            url:"http://10.20.12.30:3000/queryAllActivity?page="+page+"&size="+size,                            success:function(res){                                var str='';                                for( var i=0;i<res.data.length;i++){                                    str+='<tr><td>'+res.data[i].id+'</td><td>'+res.data[i].title+                                    '</td><td>'+res.data[i].content+'</td><td>'+res.data[i].addTime+'</td></tr>';                                }                                $("tbody").html(str)                            }                        })                    }                })            }        });    </script></body></html>
阅读全文
0 0