文档章节

20.EASYUI pagination组件

F
 Favour
发布于 2016/08/16 20:07
字数 507
阅读 8
收藏 0
点赞 0
评论 0

一,基本分页组件

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
	<meta charset="UTF-8">
	<title>Basic Resizable - jQuery EasyUI Demo</title>
	<link rel="stylesheet" type="text/css" href="../jquery-easyui-1.3.3/themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="../jquery-easyui-1.3.3/themes/icon.css">
	<link rel="stylesheet" type="text/css" href="../css/demo.css">
	<script type="text/javascript" src="../jquery-easyui-1.3.3/jquery.min.js"></script>
	<script type="text/javascript" src="../jquery-easyui-1.3.3/jquery.easyui.min.js"></script>
	<script type="text/javascript" src="../jquery-easyui-1.3.3/locale/easyui-lang-zh_CN.js"></script>
</head>
<body>
	<h2>基本分页组件</h2>
	<div class="demo-info">
		<div class="demo-tip icon-tip"></div>
		<div>用户能够在分页工具条上改变页码和每天记录大小.</div>
	</div>
	<div style="margin:10px 0;"></div>
	<div class="easyui-pagination" data-options="total:114" style="border:1px solid #ddd;"></div>
</body>
</html>

二,定制分页组件按钮

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
	<meta charset="UTF-8">
	<title>Basic Resizable - jQuery EasyUI Demo</title>
	<link rel="stylesheet" type="text/css" href="../jquery-easyui-1.3.3/themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="../jquery-easyui-1.3.3/themes/icon.css">
	<link rel="stylesheet" type="text/css" href="../css/demo.css">
	<script type="text/javascript" src="../jquery-easyui-1.3.3/jquery.min.js"></script>
	<script type="text/javascript" src="../jquery-easyui-1.3.3/jquery.easyui.min.js"></script>
	<script type="text/javascript" src="../jquery-easyui-1.3.3/locale/easyui-lang-zh_CN.js"></script>
</head>
<body>
	<h2>定制分页组件按钮</h2>
	<div class="demo-info">
		<div class="demo-tip icon-tip"></div>
		<div>定制按钮能够添加到分页工具条上去.</div>
	</div>
	<div style="margin:10px 0;"></div>
	<div class="easyui-pagination" data-options="total:114,buttons:buttons" style="border:1px solid #ddd;"></div>
	<script>
		var buttons = [{
			iconCls:'icon-add',
			handler:function(){
				alert('添加');
			}
		},{
			iconCls:'icon-cut',
			handler:function(){
				alert('剪切');
			}
		},{
			iconCls:'icon-save',
			handler:function(){
				alert('保存');
			}
		}];
	</script>
</body>
</html>

三,简化分页组件

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
	<meta charset="UTF-8">
	<title>Basic Resizable - jQuery EasyUI Demo</title>
	<link rel="stylesheet" type="text/css" href="../jquery-easyui-1.3.3/themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="../jquery-easyui-1.3.3/themes/icon.css">
	<link rel="stylesheet" type="text/css" href="../css/demo.css">
	<script type="text/javascript" src="../jquery-easyui-1.3.3/jquery.min.js"></script>
	<script type="text/javascript" src="../jquery-easyui-1.3.3/jquery.easyui.min.js"></script>
	<script type="text/javascript" src="../jquery-easyui-1.3.3/locale/easyui-lang-zh_CN.js"></script>
</head>
<body>
	<h2>简化分页组件</h2>
	<div class="demo-info">
		<div class="demo-tip icon-tip"></div>
		<div>此示例教大家如何简化分页组件.</div>
	</div>
	<div style="margin:10px 0;"></div>
	<div class="easyui-pagination" style="border:1px solid #ddd;" data-options="
				total: 114,
				showPageList: false,
				showRefresh: false,
				displayMsg: ''
			"></div>

</body>
</html>

 

© 著作权归作者所有

共有 人打赏支持
F
粉丝 4
博文 185
码字总数 96673
作品 0
成都
程序员
EasyUI基础入门之分页和按钮

前言 对于一些企业级的应用来说(非网站),页面上最为主要的内容也就是表格和form了。对于类似于ERP这类系统来说数据记录比较大,前端表格展示的时候必需得实现分页功能了。恰巧EasyUI就提供了分...

Amamatthew ⋅ 2014/10/10 ⋅ 0

Framework7 2.3.1 发布,全功能 HTML 移动端框架

Framework7 2.3.1 已发布,更新内容显示,本次更新集中在搜索栏、排序和 Swiper 组件这几方面,此外还包含一些小的修复。 更新内容如下 Searchbar Fixed issue with not hiding/showing back...

局长 ⋅ 06/02 ⋅ 0

yii2分页的基本使用及其配置详解

作者:白狼 出处:http://www.manks.top/yii2linkpagerpagination.html 本文版权归作者,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责...

白狼栈 ⋅ 2016/05/21 ⋅ 0

Bootstrap 路径分页标签和徽章组件

一.路径组件 路径组件也叫做面包屑导航。 //面包屑导航 首页 产品列表 韩版 2015 年羊绒毛衣 二.分页组件 分页组件可以提供带有展示页面的功能。 //默认分页 «

菜鸟不菜么 ⋅ 05/14 ⋅ 0

Searchkit 0.8 发布,React 建立的 UI 组件

Searchkit 0.8 发布了。 Searchkit 是一套由 React 建立的 UI 组件,它旨在快速创建好看的搜索应用程序。 更新内容: Breaking Changes Classname changes,in RefinementListFilter, MenuFi...

oschina ⋅ 2016/03/21 ⋅ 0

Element 2.3.5 发布,基于 Vue 2.0 的桌面端组件库

Element 2.3.5 已发布,更新如下: 修复 DatePicker 的 为 week 时面板错误高亮的问题,#10712 修复 InputNumber 初始值为 0 时输入框为空的问题,#10714 新增 Select 的 属性,#10042 修复 ...

王练 ⋅ 04/21 ⋅ 0

jQuery EasyUI使用教程之在数据网格中添加一个分页

<jQuery EasyUI最新版下载> 本教程中涉及的示例演示了如何从服务器端加载数据,如何添加分页组件到数据网格中。 查看演示 创建数据网格 想要从远程服务器端加载数据,首先你应该设置“URL”属...

Miss_Hello_World ⋅ 2015/12/11 ⋅ 0

关于VueAwesomeSwiper在VUE中的使用以及遇到的一些问题

Vue-Awesome-Swiper 轮播图插件,可以同时支持Vue.js(1.X ~ 2.X),兼顾PC和移动端,随着vue的广泛使用,其中插件swiper也算是使用的比较频繁的插件,现在分享一下使用方法以及开发中会遇到...

littleyu ⋅ 01/11 ⋅ 0

Flex分页组件--Pagination

基于Flex SDK 4.6.x + page4as3lib的一套分页组件 : Pagination for Flex 基于Flex SDK 4.6.x; 分页逻辑基于page4as3lib; 高度定制化分页参数(依照UI/UE的设计思想);...

王磊-Kenshin ⋅ 2012/08/20 ⋅ 1

Ant Design 3.1.0 发布,阿里企业级 UI 设计语言

Ant Design 3.1.0 已发布,Ant Design 是蚂蚁金服开发和正在使用的一套企业级的 UI 设计语言和 React 实现。 更新内容: 修复组件 Spin 可能出现跳动的问题。#8602 @jhsu 修复 Table 在设置 ...

周其 ⋅ 2017/12/30 ⋅ 2

没有更多内容

加载失败,请刷新页面

加载更多

下一页

从方法论到零售客户实践 解码阿里巴巴数据中台——2018上海云栖大会

摘要: 一、数据中台之道 6月8日,上海云栖大会进入了第二天的议程,数据中台专场论坛座无虚席,数据中台总架构师邓中华女士向在场的观众介绍了数据中台的衍生发展之道。 基于OneID、OneData...

阿里云云栖社区 ⋅ 21分钟前 ⋅ 0

Ubuntu部署django问题汇总

使用Anaconda3的Python3.6的pip安装UWSGI报错 原因是gcc版本不兼容,安装4.7并修改gccsudo apt-get install gcc-4.7sudo mv /usr/bin/gcc /usr/bin/gcc.baksudo ln -s /usr/bin/gcc-4.......

wuyaSama ⋅ 25分钟前 ⋅ 0

从方法论到零售客户实践 解码阿里巴巴数据中台——2018上海云栖大会

摘要: 一、数据中台之道 6月8日,上海云栖大会进入了第二天的议程,数据中台专场论坛座无虚席,数据中台总架构师邓中华女士向在场的观众介绍了数据中台的衍生发展之道。 基于OneID、OneData...

猫耳m ⋅ 25分钟前 ⋅ 0

Docker减肥小记

如果经常使用 docker,你会发现 docker 占用的资源膨胀很快,其中最明显也最容易被察 如何快速的清理 docker 占用的系统资源,具体点说就是删除那些无用的镜像、容器、网络和数据卷… 1、查看...

寰宇01 ⋅ 35分钟前 ⋅ 0

微信小程序中如何使用WebSocket实现长连接(含完整源码)

本文由腾讯云技术团队原创,感谢作者的分享。 1、前言 微信小程序提供了一套在微信上运行小程序的解决方案,有比较完整的框架、组件以及 API,在这个平台上面的想象空间很大。腾讯云研究了一...

JackJiang- ⋅ 43分钟前 ⋅ 0

定制库到Maven本地资源库

1.如果只有定制库的JAR文件 下载链接如下:pdf.jar 2.使用命令转换成Maven本地资源 mvn install:install-file -Dfile=/Users/manager/Downloads/clj-pdf-2.2.33.jar -DgroupId=clj-pdf -Dar......

年少爱追梦 ⋅ 47分钟前 ⋅ 0

高仿springmvc之xuchen-mvc

package org.mvc.framework.servlet; import java.io.BufferedReader; import java.io.ByteArrayInputStream; import java.io.ByteArrayOutputStream; import java.io.File; import java.io.......

徐志 ⋅ 50分钟前 ⋅ 0

关于自定义URLStreamHandler的一次踩坑

关于自定义URLStreamHandler的一次踩坑 20180625 lambo init 说明 一般自定义实现url的协议解析.方案为实现URLStreamHandler.实现其 openConnection 就可以了, 如果我们执行 new URL("xx://...

林小宝 ⋅ 51分钟前 ⋅ 0

【SM2证书】利用BC的X509v3CertificateBuilder组装X509国密证书

演示证书文件 链接: https://pan.baidu.com/s/1ijHNnMQJj7jzW-jXEVd6Gg 密码: vfva 所需jar包 <!-- https://mvnrepository.com/artifact/org.bouncycastle/bcpkix-jdk15on --> <dependenc......

小帅帅丶 ⋅ 52分钟前 ⋅ 0

用Calendar 实现 计算 一段时间的毫秒值

Calendar c=Calendar.getInstance();c.add(Calendar.MONTH, -1);int lastMonthMaxDay=c.getActualMaximum(Calendar.DAY_OF_MONTH);c.set(c.get(Calendar.YEAR), c.get(Calendar.MONTH)......

岸芷汀兰 ⋅ 55分钟前 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部