easyUI前台分页的实现

最新推荐文章于 2021-08-06 05:03:18 发布

原创最新推荐文章于 2021-08-06 05:03:18 发布 · 462 阅读

1 ·

CC 4.0 BY-SA版权

EasyUI 同时被 2 个专栏收录

7 篇文章

订阅专栏

JavaScript

5 篇文章

订阅专栏

本文详细介绍了如何使用easyUI在前端实现分页功能，包括配置分页参数、页面跳转、数据加载等关键步骤，助你轻松打造高效的数据展示体验。

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

<script type="text/javascript">
function pagerFilter(data){
    if (typeof data.length == 'number' && typeof data.splice == 'function'){    // 判断数据是否是数组
        data = {
            total: data.length,
            rows: data
        }
    }
    var dg = $(this);
    var opts = dg.datagrid('options');
    var pager = dg.datagrid('getPager');
    pager.pagination({
        onSelectPage:function(pageNum, pageSize){
            opts.pageNumber = pageNum;
            opts.pageSize = pageSize;
            pager.pagination('refresh',{
            	pageNumber:pageNum,
                pageSize:pageSize
            });
            dg.datagrid('loadData',data);
        }
    });
    if (!data.originalRows){
        data.originalRows = (data.rows);
    }
    var start = (opts.pageNumber-1)*parseInt(opts.pageSize);
    var end = start + parseInt(opts.pageSize);
    data.rows = (data.originalRows.slice(start, end));
    return data;
}
$(function(){//加载数据
	var rows = [];
        $.ajax({
            type: "post",
            dataType: "json",
            url: '../adverOrder/findAll',
            async:false,
            success: function (data) {
                for(var i in data.rows){
                    var id = data.rows[i].id;
                    var orderNumber = data.rows[i].orderNumber;
                    var advertistingName = data.rows[i].advertistingName;
                    var submitter = data.rows[i].submitter;
                    var communityName = data.rows[i].communityName;
                    var pattern = data.rows[i].pattern;
                    var startTime = data.rows[i].startTime;
                    var endTime = data.rows[i].endTime;
                    var isMaster = data.rows[i].isMaster;
                    var currentState = data.rows[i].currentState;
                    rows.push({
                        id: id,
                        orderNumber: orderNumber,
                        advertistingName: advertistingName,
                        submitter:submitter,
                        communityName:communityName,
                        pattern:pattern,
                        startTime:startTime,
                        endTime:endTime,
                        isMaster:isMaster,
                        currentState:currentState
                    });
                }
            }
        });
    // console.log(rows);
    $('#dg').datagrid({loadFilter:pagerFilter}).datagrid('loadData', rows);
});
</script>

 <table id="dg" title="所有订单列表" class="easyui-datagrid" loadMsg='正在加载...' 
   fitColumns="true" pagination="true" rownumbers="true"
    fit="true" autoRowHeight="false" rownumbers="true" toolbar="#tb,#tb1">
   <thead>
   <!-- 'ID','订单号','订单名称','提交人','投放小区','播放模式','开始时间','结束时间','是否管理员提交','审核状态' -->
	   	<tr>
	   		<th field="id" align="center" width="50">订单ID</th>
	   		 <th field="orderNumber" width="100" align="center">广告订单号</th> 
	   		 <th field="advertistingName" width="100" align="center">广告名称</th> 
	   		 <th field="submitter" width="100" align="center" >提交人</th> 
	   		 <th field="communityName" width="150" align="center">投放小区</th> 
	   		 <th field="pattern" width="100" align="center" data-options="field:'show',width:100" formatter="formatShow">播放模式</th> 
	   		 <th field="startTime" width="150" align="center">开始时间</th> 
	   		 <th field="endTime" width="150" align="center">结束时间</th> 
	   		 <th field="isMaster" width="150" align="center" data-options="field:'show',width:100" formatter="formatIsMaster">是否管理员提交</th> 
	   		 <th field="currentState" width="100" align="center" data-options="field:'show',width:100" formatter="formatResult">审核状态</th> 
	   	</tr>
   </thead>
 </table>