layui实现分页

最新推荐文章于 2022-05-14 15:35:19 发布

whxweb

最新推荐文章于 2022-05-14 15:35:19 发布

阅读量162

点赞数

CC 4.0 BY-SA版权

文章标签： jquery

本文链接：https://blog.youkuaiyun.com/whxweb/article/details/109142507

本文介绍了一个使用JavaScript和jQuery实现的供应商列表页面的具体代码。该页面通过Ajax从服务器请求供应商数据，并使用layui进行分页展示。每个供应商条目包含名称、详情链接、更新链接及删除操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

var Page = 1;
		window.onload = function(){
			//Page = parseURL(window.location.href)["currPage"];
			getSupplierList(Page,15)
		}
		
		/* 获取供应商列表 */
		function getSupplierList(currPage,limit){
			var supplierHtml = '';
			var supplier = 'supplier';
			var url = comUrl + "/supplier/get/allList";
			var data = {
				supplier:supplier,
				currPage:currPage,
				pageSize:limit,
				userId:123
			}
			$.ajax({
				url:url,
				type:"get",
				data:data,
				success:function(res){
					console.log(res)
					var data = res.data.data;
					if(res.code == "SWB_000000"){

						$('#supplier').empty();
						if(data!=undefined && data.length>0){
							layui.use(['laypage', 'layer'], function(){
							  var laypage = layui.laypage
							  ,layer = layui.layer;
							
							  laypage.render({
							    elem: 'page',
							    count: res.data.totalCount,
								limit:15,
								curr:currPage,	
								layout: ['count', 'prev', 'page', 'next'],	
								jump: function(obj, first){
								Page = obj.curr;
								console.log(obj.curr); 
								console.log(obj.limit);
													
								  if(!first){
									 // alert('aaaaa')
										getSupplierList(obj.curr,obj.limit);
								  }
								}
							  });
							 
							});
							for(i = 0;i < data.length; i++){
								supplierHtml += '<div class="row departmet_list" >';
								supplierHtml += '<div class="inner clearfix col-xs-12">';
								supplierHtml += '<div class="departmet_name supplier_name pull-left">';
								supplierHtml += '<strong><a href="supplier_detail.html?currPage=' + Page + '&id=' + data[i].id + '">' + data[i].supplier_name+ '</a></strong>';
								supplierHtml += '</div>';
								supplierHtml += '<div class="operation pull-right">';						
								supplierHtml += '<a href="update_supplier.html?currPage=' + Page + '&id=' + data[i].id + '"><img src="../img/update.png" /></a>';
								supplierHtml += '<a href="supplier_detail.html?currPage=' + Page + '&id=' + data[i].id + '"><img src="../img/detail.png" /></a>';
								supplierHtml += "<img src=\"../img/del.png\" onclick=\"confirmDel('"+data[i].id+"')\"/>";
								supplierHtml += '</div>';
								supplierHtml += '</div>';
								supplierHtml += '</div>';
								
							}
							$('#supplier').html(supplierHtml);
						}else{
							supplierHtml = '<div class="noDtaTips">暂无供应商</div>';
						}
						
					}else{
						alert("响应失败！")
					}
				}
			})
		}