laypage切换一页显示多少条不生效_tp51 layui table.render 改变每页显示条数有错误-CSDN博客

文章描述了在使用layui前端框架时遇到的一个问题，即在切换表格每页显示条数时，分页功能不生效。问题出在table.render的limit属性上，作者发现将limit值改为动态变量$scope.pageInfo.pageSize后，问题得到解决。修复方法是使limit参数与分页插件laypage的limit保持一致，确保分页切换功能正常工作。

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

最近解决一个问题，接口请求传参以及返回值都正确。但是唯独切换每页显示多少条的时候就是不生效。

问题代码如下：

//加载layui的table表格
$scope.loadTableFun = function (){
	layui.use(['form', 'element', 'table', 'laypage', 'layer', 'upload', 'laydate'], function () {
		var $ = layui.jquery,
			form = layui.form,
			table = layui.table,
			layer = layui.layer,
			laypage = layui.laypage,
			element = layui.element,
			upload = layui.upload,
			laydate= layui.laydate;

		var tableHeader = $scope.searchConditionList.filter(function(sItem){
			return sItem.IsListView;
		}).map(function(tjItem){
			tjItem.field = tjItem.name;
			// tjItem.width = "100";
			// tjItem.templet="<span>"+tjItem.labelName+"</span>"
			if(tjItem.name === 'aptType'){
				tjItem.width = "15%";
			} else if(tjItem.name === 'kbDesc'){
				tjItem.width = "20%";
			}
			tjItem.style = "word-break: break-all";
			// tjItem.minWidth = "100";
			return tjItem;
		});
		
	    ........
		//执行获取分页数据的回调函数
		getData(layer,$scope.competorGuide, function(resData){
			if(resData.Result){
				var allTableData = [];
				// 把查询接口返回的resData 赋值给 allTableData中即可
				allTableData = resData.List.map(function(rdItem){
					var tmpObj = Object.assign({},{ID:rdItem.ID}, rdItem.listData);
					return tmpObj;
				});
			}
			// 在这里进行table.render
			table.render({
				elem: '#allData'
				,id: 'allData'
				,data: allTableData
				,cols: [tableHeader]
				,done: function (res, curr, count) {
					// 分页
					laypage.render({
						elem: 'paging'
						, curr: $scope.pageInfo.pageIndex
						, count: resData.Total
						, limit: $scope.pageInfo.pageSize
						, limits: [5, 10, 15, 20]
						, layout: ['count', 'prev', 'page', 'next', 'limit', 'skip']
						,prev: '<i class="laypage-prev-icon"></i>'
						,next: '<i class="laypage-next-icon"></i>'
						,first: '<i class="laypage-first-icon"></i>'
						,last: '<i class="laypage-last-icon"></i>'
						, jump: function (obj, first) {
							$scope.pageInfo.pageIndex = obj.curr;
							$scope.pageInfo.pageSize = obj.limit;
							if (!first) {
								$scope.loadTableFun();
							}
							return false;
						}
					});
					
					//监听工具条 编辑、删除、预览、下载
					table.on("tool(allData)", function (obj) {
						var data = obj.data, events = obj.event, tr = obj.tr; //获得当前行 tr 的DOM对象;
						switch(events){
							case "allData_edit":
								......
                                //编辑的方法
								break;
							case "allData_del":
								layer.confirm('确认要删除？', {icon: 3, title:'提示'}, function(index){
                                    .......
									//删除的方法
									layer.close(index);
								});
								break;
						}
					});
				}
				,limit: 5 //每页默认显示的数量
			});
		});
	});
}

如果单独看laypage，一直找不到任何问题。
最终找到，问题不在laypage上，问题在table的limit属性上。把limit改成$scope.pageInfo.pageSize变量即可。之前是写死的数值5。

table.render({

elem: '#allData'

,id: 'allData'

,data: allTableData

,cols: [tableHeader]

,done: function (res, curr, count) {

//laypage 分页初始化

laypage.render({

elem: 'paging'

, curr: $scope.pageInfo.pageIndex

, count: resData.Total