easui Pagination Layout

分页显示方式有几种
layout: ['first', 'prev', 'next', 'last']
layout: ['list', 'sep', 'first', 'prev', 'sep', 'manual', 'sep', 'next', 'last', 'sep', 'refresh']
layout: ['links']
layout: ['first', 'prev', 'links', 'next', 'last']
layout: ['first', 'prev', 'next', 'last', 'sep', 'links', 'sep', 'manual']

Html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Pagination Layout - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
<link rel="stylesheet" type="text/css" href="../demo.css">
<script type="text/javascript" src="../../jquery.min.js"></script>
<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
</head>
<body>
<h2>Pagination Layout</h2>
<p>The pagination layout supports various types of pages which you can choose.</p>
<div style="margin:20px 0;"></div>
<div class="easyui-panel">
<div id="pp" class="easyui-pagination" data-options="
total:114,
layout:['first','prev','next','last']
"></div>
</div>
<div style="margin-top:10px">
<select onchange="setLayout(this.value)">
<option value="1">Previous Next</option>
<option value="2">Manual Page Input</option>
<option value="3">Numeric Links</option>
<option value="4">Previous Links Next</option>
<option value="5">Go To Page</option>
</select>
</div>
<script>
function setLayout(type){
var p = $('#pp');
switch(parseInt(type)){
case 1:
p.pagination({layout:['first','prev','next','last']});
break;
case 2:
p.pagination({
layout:['list','sep','first','prev','sep','manual','sep','next','last','sep','refresh'],
beforePageText:'Page',
afterPageText:'of {pages}'
});
break;
case 3:
p.pagination({layout:['links']});
break;
case 4:
p.pagination({layout:['first','prev','links','next','last']});
break;
case 5:
p.pagination({
layout:['first','prev','next','last','sep','links','sep','manual'],
beforePageText:'Go Page',
afterPageText:''
});
break;
}
}
</script>
</body>
</html>

转载于:https://www.cnblogs.com/huangf714/p/5834122.html

easui Pagination Layout相关推荐

EasyUI中分页的简单使用
场景效果属性名称类型描述默认值 total number 记录总数,应该在创建分页(pagination)时设置. 1 pageSize number 页面尺寸.(注:每页显示的最大记录数 ...
学成在线--2.CMS前端页面查询开发
文章目录 0.思路总结 1.创建CMS模块的目录架构 2.创建页面并配置路由 1)在page目录新建page_list.vue,扩展名为.vue. 2)在cms的router下配置路由. 3)在bas ...
商易通-预约挂号详情页面-预约确认（三十五）
目录: (1)前台用户系统-预约挂号详情-接口开发 (2)前台用户系统-预约挂号详情-前端整合 (3)前台用户系统-预约挂号-预约确认功能实现 (1)前台用户系统-预约挂号详情-接口开发当点击 ...
尚医通（二十二）预约下单
目录一.预约下单功能(一) 1.需求 2.搭建订单模块 3.封装Feign调用获取就诊人接口 4.封装Feign调用获取排班下单信息接口二.预约下单功能(二) 1.实现生成订单接口三.预约下单功 ...
YYGH-2-排班管理
需求分析 1.页面效果排班管理这是我们想要实现的页面,从mongodb中获取数据显示到页面上排班分成三部分显示: 1.科室信息(大科室与小科室树形展示) 2.排班日期,分页显示,根据上传排班数据聚 ...
Vue双向绑定是怎么实现的?
用了Vue长达2年,如果自己去实现一个双向绑定,我可能一个字母都写不出来,是时候探究一下了. 先看data里某对象的输出 data() {return {pagination: {layout: 'p ...
尚医通（十五）医院排班管理
目录一.医院排班管理需求 1.页面效果 2.接口分析二.科室列表(接口) 1.添加service接口和实现 2.添加DepartmentController方法三.科室列表(前端) 1.添加隐藏 ...
YYGH-9-预约下单
预约下单之前我们做到了分析下单参数:就诊人id与排班id 1.下单我们要获取就诊人信息 2.获取排班下单信息与规则信息 3.获取医院签名信息,然后通过接口去医院预约下单 4.下单成功更新排班信息 ...
尚医通 (三十五) --------- 预约下单
目录一.预约下单前端 1. 封装 api 请求 2. 页面修改二.后端逻辑 1. 需求分析 2. 搭建 service-order 模块 3. 添加订单基础类 4. 封装 Feign 调用获取就诊 ...

easui Pagination Layout

easui Pagination Layout相关推荐

最新文章

热门文章