Layer分页，Ajax请求分页

最近在研究layui，发现他的分页标签特别好用，所以小小研究了一下。

先来一个分页后的效果图看一下，是不是感觉特别精致，话不多说，直接上代码！！！

下边是代码文件：

首先引入文件：

注：layer框架是基于jquery的一个弹层框架，所以jquery文件必须在他之前引入，否则会报错。

<link rel="stylesheet" href="layui/css/layui.css" />
<link rel="stylesheet" href="layui/css/layui.mobile.css" />
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script src="layui/layui.js"></script>

Html：

<center>
    <div id="yscxPage"></div>
</center>

Js：

这里就直接写ajax调用成功后的内容

success: function(datas) {
	if(page==undefined||page==""||page==null){
		var laypage = layui.laypage;
		laypage.render({
			elem: 'yscxPage'			//注意，这里的 yscxPage 是 ID，不用加 # 号
			,groups:3				//所显示的页码数
			,count:datas.page.totalResult           //数据总数，从服务端得到
			,jump: function(obj, first){
			    //obj包含了当前分页的所有参数，比如：
                        //console.log(obj.curr);                //得到当前页，以便向服务端请求对应页的数据。
			    //	console.log(obj.limit);         //得到每页显示的条数
			    //	getYscx(obj.curr);
			    //首次不执行
			    if(!first){
			    	getYscx(obj.curr);
			    	//do something
			    }
	        }
	    });
	    page =1;
        }
	$("#Tbody").html("");
	var options="";
	$.each(datas.querywaterList,function (index, val) {
		options += "<tr ><td>" + ((page-1)*10+index+1) + "</td>" + "<td>" + val.FLOWNUM.toFixed(2) + "</td>" + "<td>" + new Date(val.UPDATE_DATE).format("yyyy-MM-dd hh:mm:ss") + "</td></tr>" ;
	});
        $("#Tbody").append(options);
},

附上官方文档：https://www.layui.com/doc/modules/laypage.html   

里边有具体的操作方法，非常全面！

希望可以帮到你，有什么疑问可以随时提出来，我师父教我的。