使用layui的laypage完成分页

使用layui分页

<link rel="stylesheet" href="css/layui.css">//样式直接放header里
<div id="test1"></div>
<script src="js/layui.js"></script>
//根据total(数据总量)初始化分页组件
var js_total=0;
function aaa(total){
			layui.use(['laypage'], function() {
      		var laypage = layui.laypage; //分页
		      /*layer弹出一个示例
		      layer.msg('Hello World');*/
		    laypage.render({
			elem: 'test1'
			,count: total //数据总数,从服务端得到
			,limit: 20
			,limits: [20, 30, 50]
		    ,layout: ['count', 'prev', 'page', 'next', 'limit']
			,jump: function(obj, first){
				//obj包含了当前分页的所有参数,比如:
				console.log(obj.curr); //得到当前页,以便向服务端请求对应页的数据。
				console.log(obj.limit); //得到每页显示的条数
	    		
				//首次不执行
				if(!first){
				//do something
				serch(obj.curr,obj.limit);
				}
			}
		});
    });
		}

//获取总量后调用分页组件
function getTotal(){
	$("#tbodyRwfp").html("");
	var queryksnd =  $("#queryksnd").val();
	var querykc = $("#querykc").val();
	$.ajax({
   type: "POST",
   url: "dataTj.do?method=getStbTotal&queryksnd="+queryksnd+"&querykc="+querykc,
   dataType:'json',   //接受数据格式
   async: 'false',
   error:function(XMLHttpRequest){
   	alert(XMLHttpRequest.responseText);
   },
   success: function(data){
	   if(data.isTrue){
	   		js_total=data.total;
	   		console.log(js_total);
	   		aaa(js_total);
	   		if(js_total>0){
	   			serch(1,20);
	   		}
	   }else{
	    	alert(data.errMsg);
	    	return;
	   }
   }
});
}

//每次点击页码所调用的函数
function serch(page,limit){
	var queryksnd =  $("#queryksnd").val();
	var querykc = $("#querykc").val();
	//alert(queryksnd+querykc);
	$.ajax({
   type: "POST",
   url: "dataTj.do?method=getStbDownladTj&queryksnd="+queryksnd+"&querykc="+querykc+"&page="+page+"&limit="+limit,
   dataType:'json',   //接受数据格式
   async: 'false',
   error:function(XMLHttpRequest){
   	alert(XMLHttpRequest.responseText);
   },
   success: function(data){
	   if(data.isTrue){
	   		var list  = data.list;
	   		console.log(list)
	   		//js_total=data.total;
	   		var pyrwList = data.list;
			$("#tbodyRwfp").html("");
			for(var i=0;i<pyrwList.length;i++){
				var pyrwMap = pyrwList[i];
				var ssmc = pyrwMap["SSMC"];
				var kc = pyrwMap["KC"];
				var f = (pyrwMap["F"]=="0"?"否":"是");
				var s = (pyrwMap["S"]=="0"?"否":"是");
				
				var pyrwStr = "<tr align='center'><td>"+ssmc+"</td>";
				pyrwStr += "<td>"+kc+"</td>";
				pyrwStr += "<td>"+f+"</td>";
				pyrwStr += "<td>"+s+"</td>";
				pyrwStr += "</tr>";
				$("#tbodyRwfp").append(pyrwStr);
				}
	   }else{
	    	alert(data.errMsg);
	    	return;
	   }
   }
});
}

在这里插入图片描述

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
以下是一个使用 layui 实现自定义分页的例子: HTML 代码: ```html <div class="layui-table-page"> <div class="layui-box layui-laypage layui-laypage-default"> <a class="layui-laypage-prev layui-disabled" href="javascript:;" data-page="0">上一页</a> <span class="layui-laypage-curr"><em class="layui-laypage-em"></em>1</span> <a class="layui-laypage-next" href="javascript:;" data-page="2">下一页</a> <span class="layui-laypage-skip">到第<input type="text" min="1" value="1" class="layui-input">页<button class="layui-laypage-btn">确定</button></span> <span class="layui-laypage-total">共 100 条</span> </div> </div> ``` JavaScript 代码: ```javascript layui.use(['layer', 'laypage'], function(){ var layer = layui.layer; var laypage = layui.laypage; laypage.render({ elem: '.layui-table-page', count: 100, limit: 10, prev: '<a class="layui-laypage-prev" href="javascript:;" data-page="{{prev}}">上一页</a>', next: '<a class="layui-laypage-next" href="javascript:;" data-page="{{next}}">下一页</a>', layout: ['prev', 'page', 'next', 'skip', 'total'], jump: function(obj, first){ if(!first){ // 在这里编写分页的 AJAX 请求代码 layer.msg('第 '+ obj.curr +' 页'); } } }); }); ``` 在上面的例子中,我们首先定义了一个包含分页元素的 HTML 结构,并在 JavaScript使用 layui.laypage.render() 方法进行分页的渲染。 其中,我们可以通过设置 `count` 属性来指定总条目数,通过设置 `limit` 属性来指定每页显示的条目数,通过设置 `prev` 和 `next` 属性来指定上一页和下一页的 HTML 元素,通过设置 `layout` 属性来指定分页布局,通过设置 `jump` 属性来指定分页跳转时的回调函数。 在 `jump` 回调函数中,我们可以编写分页的 AJAX 请求代码,并使用 `layer.msg()` 方法来提示当前页码。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值