<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<#-- <script type="text/javascript" src="js/jquery.min.js"></script>-->
<script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="layui/layui.js"></script>
<#-- <script type="text/javascript" src="layui/lay/modules/laypage.js"></script>-->
<link rel="stylesheet" href="layui/css/layui.css" />
</head>
<body>
<h1>aa</h1>
<table class="layui-table">
<colgroup>
<col width="80">
<col width="80">
<col width="50">
</colgroup>
<thead>
<tr>
<th>昵称</th>
<th>加入时间</th>
<th>签名</th>
</tr>
</thead>
<tbody>
<div id="content"></div>
</tbody>
</table>
<div id="test1" ></div>
<h1>---------------------------------</h1>
<#--<script>-->
<#-- layui.use('laypage', function(){-->
<#-- var laypage = layui.laypage;-->
<#-- laypage.render({-->
<#-- elem: 'test1'-->
<#-- ,count: 70 //数据总数，从服务端得到-->
<#-- ,jump: function(obj, first){-->
<#-- //obj包含了当前分页的所有参数，比如：-->
<#-- console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。-->
<#-- console.log(obj.limit); //得到每页显示的条数-->
<#-- //首次不执行-->
<#-- if(!first){-->
<#-- //do something-->
<#-- }-->
<#-- }-->
<#-- });-->
<#-- });-->
<#--</script>-->
<script>
function showData(result) {
// console.log(result.data.length);
// debugger;
$("tbody").html("");
if(result.total==null || result.total ==0){
$("tbody").html("<tr><td colspan='3'><span style='color: red'>暂无数据</span></td></tr>");
}
var data= result.list;
var html = "";
var ids = "";
for (var i = 0; i <data.length; i++) {
html += "<tr><td>"+data[i].name+"</td><td>"+data[i].birth+"</td><td>"+ data[i].id +"</td></tr>";
ids+=data[i].id+"---";
}
console.log(html);
$("tbody").append(html);
result = null;
};
$(function () {
getListData(1);
// layui.use('laypage', function(){
// var laypage = layui.laypage;
// //执行一个laypage实例
// laypage.render({
// elem: 'test1' //注意，这里的 test1 是 ID，不用加 # 号
//
// });
// });
});
//分页
function paged(count,currPage){
debugger;
layui.use(['laypage', 'layer'], function() {
var laypage = layui.laypage
, layer = layui.layer;
laypage.render({
// cont:'test1' // 容器id
elem:'test1' // 容器id
,count: count //总页数，从服务端得到
, limit: 5 //每页显示条数
, limits: [5, 10]
, curr: currPage //起始页
, groups: 5 //连续页码个数
, prev: '上一页' //上一页文本
, next: '下一页' //下一页文本
, first: 1 //首页文本
, layout: ['prev', 'page', 'next','limit','skip']
// , skip:true
// ,page:true
// ,refresh:true
, jump: function (obj,first) {
currPage =obj.curr; //这里是后台返回给前端的当前页数
if(!first){ //点击跳页触发函数自身，并传递当前页：obj.curr ajax 再次请求
console.log(".........currPage............"+currPage)
getListData(currPage);
}
}
});
});
};
// 异步获取数据
function getListData(currPage){
$.ajax({
type: 'GET',
url: "/getData1", // ajax请求路径
data: {
page:currPage //当前页数
},
dataType:'json',
success: function(data){
console.log("---------------"+data+"----------------"+data.count)
showData(data);
if(data!="" && data.total != null && data.total!=0) {
paged(data.total, currPage);
}
}
});
};
</script>
</body>
</html>
