layui分页 ajax数据交互渲染

layui分页


这是一个基础的layui的分页数据操作,欢迎指出更改意见。

不喜勿喷。

效果图
layui分页 ajax数据交互渲染_第1张图片
layui的版本号
在这里插入图片描述
点击分页的效果区分因为我数据是同样的json数据,所以只有这个图了。

HTML

<body>
		<!--数据-->
		<ul id="zj"></ul>
		<!--分页-->
		<div class="page">
			<div id="zjLove"></div>
		</div>
	</body>

JS

<script>
	function zjRendering(curr,limit){
		$.ajax({
			type:"get",
			url:"user.json",
			data:{
				xcurr:curr,
				xlimit:limit
			},
			success:function(data){
				//渲染数据
				var templent ='';
				for (var i = 0 ; i<limit;i++) {
					//渲染模板
					templent += '
  • '+ data.data[i].zj05 +'
  • '
    ; } $('#zj').append(templent); layui.use(['laypage', 'layer'], function() { var laypage = layui.laypage, layer = layui.layer; laypage.render({ elem: 'zjLove', //id count: data.count, //总数据 limit:10, //一页多少数据 curr:curr, //当前页 theme:'#015293', //颜色设置 layout: ['count', 'prev', 'page', 'next', 'skip'], //分页的配置 jump: function(obj,first) { //首次不加载 if(!first){ $('#zj li').remove(); zjRendering(obj.curr,obj.limit); } } }); }); }, error:function(data){ } }); } // 加载分页 zjRendering(1,10) </script>

    你可能感兴趣的:(layui基础)