怎么让HTML5的表格支持后台排序与分页

怎么让HTML5的表格支持后台排序与分页,第1张

如果数据库中有几千甚至几万条数据,一下子显示出来也是不现实的,立马就想要了分页。查看TWaver的API,并没有发现表格中提供了分页的功能。算了,还是自己来扩展,想想TWaverJava中分页的功能,HTML5实现起来应该也不算太难,我们需要定义一个PagedTablePane,panel中包含表格和分页栏,分页栏参考了TWaver Java的那种:

仔细看看上面的分页条,其实也不是那么复杂,几个分页按钮加上分页的信息,于是很快就模仿了一个类似的分页栏,先上图:

界面实现起来还是比较容易的,主要的是按钮的 *** 作和分页信息的显示,我们需要定义几个变量:currentPage(当前页)、countPerPage(每页的条数)、pageCount(页数)、count(总数),定义了这几个变量就可以将上图中分页的信息表示出来

除非最终检索它们并利用它们来做点事情,否则将记录放入数据库没什么好处。这就是 SELECT 语句的用途,即帮助取出数据。SELECT 大概是 SQL 语言中最常用的语句,而且怎样使用它也最为讲究;用它来选择记录可能相当复杂,可能会涉及许多表中列之间的比较。本节介绍Select语句关于查询的最基本功能。

SELECT 语句的语法如下:

SELECT selection_list 选择哪些列

FROM table_list 从何处选择行

WHERE primary_constraint 行必须满足什么条件

GROUP BY grouping_columns 怎样对结果分组

HAVING secondary_constraint 行必须满足的第二条件

ORDER BY sorting_columns 怎样对结果排序

LIMIT count 结果限定

注意:所有使用的关键词必须精确地以上面的顺序给出。例如,一个HAVING子句必须跟在GROUP BY子句之后和ORDER BY子句之前。

除了词“SELECT”和说明希望检索什么的 column_list 部分外,语法中的每样东西都是可选的。有的数据库还需要 FROM 子句。MySQL 有所不同,它允许对表达式求值而不引用任何表。

查询特定行:

你能从你的表中只选择特定的行。例如,如果你想要验证你对Bowser的出生日期所做的改变,像这样精选Bowser的记录:

mysql>SELECT * FROM pet WHERE name = "Bowser"

其结果为:

+--------+-------+---------+------+------------+------------+

| name | owner | species | sex | birth | death |

+--------+-------+---------+------+------------+------------+

| Bowser | Diane | dog | m| 1990-08-31 | 1995-07-29 |

+--------+-------+---------+------+------------+------------+

你可以对照前一个例子来验证。

进行表达式计算

前面的多数查询通过从表中检索值已经产生了输出结果。MySQL 还允许作为一个公式的结果来计算输出列的值。表达式可以简单也可以复杂。下面的查询求一个简单表达式的值(常量)以及一个涉及几个算术运算符和两个函数调用的较复杂的表达式的值。例如,计算Browser生活的天数:

mysql>SELECT death-birth FROM pet WHERE name="Bowser"

其结果是:

+-------------+

| death-birth |

+-------------+

| 49898 |

+-------------+

由于MySQL允许对表达式求值而不引用任何表。所以也可以这样使用:

mysql>select (2+3*4.5)/2.5

其结果为:

+---------------+

| (2+3*4.5)/2.5 |

+---------------+

| 6.200 |

+---------------+

条件查询

不必每次查询都返回所有的行记录,你能从你的表中只选择特定的行。为此你需要使用WHERE或者HAVING从句。HAVING从句与WHERE从句的区别是,HAVING表达的是第二条件,在与其他从句配合使用,显然不能在WHERE子句中的项目使用HAVING。因此本小节紧介绍WHERE从句的使用,HAVING从句的使用方法类似。另外WHERE从句也可以实现HAVING从句的绝大部分功能。

为了限制 SELECT 语句检索出来的记录集,可使用 WHERE 子句,它给出选择行的条件。可通过查找满足各种条件的列值来选择行。

WHERE 子句中的表达式可使用表1 中的算术运算符、表2 的比较运算符和表3 的逻辑运算符。还可以使用圆括号将一个表达式分成几个部分。可使用常量、表列和函数来完成运算。在本教程的查询中,我们有时使用几个 MySQL 函数,但是 MySQL 的函数远不止这里给出的这些。请参阅附录 一,那里给出了所有MySQL 函数的清单。

例如,如果你想要验证你对Bowser的出生日期所做的改变,像这样精选Bowser的记录:

mysql>SELECT * FROM pet WHERE name = "Bowser"

+--------+-------+---------+------+------------+------------+

| name | owner | species | sex | birth | death |

+--------+-------+---------+------+------------+------------+

| Bowser | Diane | dog | m| 1990-08-31 | 1995-07-29 |

+--------+-------+---------+------+------------+------------+

输出证实出生年份现在正确记录为1990,而不是1909。

字符串比较通常是大小些无关的,因此你可以指定名字为"bowser"、"BOWSER"等等,查询结果将是相同的。

你能在任何列上指定条件,不只是name。例如,如果你想要知道哪个动物在1998以后出生的,测试birth列:

mysql>SELECT * FROM pet WHERE birth >= "1998-1-1"

+----------+-------+---------+------+------------+-------+

| name | owner | species | sex | birth | death |

+----------+-------+---------+------+------------+-------+

| Chirpy | Gwen | bird| f| 1998-09-11 | NULL |

| Puffball | Diane | hamster | f| 1999-03-30 | NULL |

+----------+-------+---------+------+------------+-------+

你能组合条件,例如,找出雌性的狗:

mysql>SELECT * FROM pet WHERE species = "dog" AND sex = "f"

+-------+--------+---------+------+------------+-------+

| name | owner | species | sex | birth | death |

+-------+--------+---------+------+------------+-------+

| Buffy | Harold | dog | f| 1989-05-13 | NULL |

+-------+--------+---------+------+------------+-------+

上面的查询使用AND逻辑 *** 作符,也有一个OR *** 作符:

mysql>SELECT * FROM pet WHERE species = "snake" OR species = "bird"

+----------+-------+---------+------+------------+-------+

| name | owner | species | sex | birth | death |

+----------+-------+---------+------+------------+-------+

| Chirpy | Gwen | bird| f| 1998-09-11 | NULL |

| Whistler | Gwen | bird| NULL | 1997-12-09 | NULL |

| Slim | Benny | snake | m| 1996-04-29 | NULL |

+----------+-------+---------+------+------------+-------+

AND和OR可以混用。如果你这样做,使用括号指明条件应该如何被分组是一个好主意:

mysql>SELECT * FROM pet WHERE (species = "cat" AND sex = "m")

->OR (species = "dog" AND sex = "f")

+-------+--------+---------+------+------------+-------+

| name | owner | species | sex | birth | death |

+-------+--------+---------+------+------------+-------+

| Claws | Gwen | cat | m| 1994-03-17 | NULL |

| Buffy | Harold | dog | f| 1989-05-13 | NULL |

+-------+--------+---------+------+------------+-------+

查询排序

使用ORDER BY子句对查询返回的结果按一列或多列排序。ORDER BY子句的语法格式为:

ORDER BY column_name [ASC|DESC] [,…]

其中ASC表示升序,为默认值,DESC为降序。ORDER BY不能按text、text和image数据类型进行排 序。另外,可以根据表达式进行排序。

例如,这里是动物生日,按日期排序:

mysql>SELECT name, birth FROM pet ORDER BY birth

+----------+------------+

| name | birth |

+----------+------------+

| Buffy| 1989-05-13 |

| Fang | 1990-08-27 |

| Bowser | 1990-08-31 |

| Fluffy | 1993-02-04 |

| Claws| 1994-03-17 |

| Slim | 1996-04-29 |

| Whistler | 1997-12-09 |

| Chirpy | 1998-09-11 |

| Puffball | 1999-03-30 |

+----------+------------+

为了以逆序排序,增加DESC(下降 )关键字到你正在排序的列名上:

mysql>SELECT name, birth FROM pet ORDER BY birth DESC

+----------+------------+

| name | birth |

+----------+------------+

| Puffball | 1999-03-30 |

| Chirpy | 1998-09-11 |

| Whistler | 1997-12-09 |

| Slim | 1996-04-29 |

| Claws| 1994-03-17 |

| Fluffy | 1993-02-04 |

| Bowser | 1990-08-31 |

| Fang | 1990-08-27 |

| Buffy| 1989-05-13 |

+----------+------------+

你能在多个列上排序。例如,按动物的种类排序,然后按生日,首先是动物种类中最年轻的动物,使用下列查询:

mysql>SELECT name, species, birth FROM pet ORDER BY species, birth DESC

+----------+---------+------------+

| name | species | birth |

+----------+---------+------------+

| Chirpy | bird| 1998-09-11 |

| Whistler | bird| 1997-12-09 |

| Claws| cat | 1994-03-17 |

| Fluffy | cat | 1993-02-04 |

| Bowser | dog | 1990-08-31 |

| Fang | dog | 1990-08-27 |

| Buffy| dog | 1989-05-13 |

| Puffball | hamster | 1999-03-30 |查询分组与行计数

GROUP BY 从句根据所给的列名返回分组的查询结果,可用于查询具有相同值的列。其语法为:

GROUP BY col_name,….

你可以为多个列分组。

例如:

mysql>SELECT * FROM pet GROUP BY species

+----------+--------+---------+------+------------+-------+

| name | owner | species | sex | birth | death |

+----------+--------+---------+------+------------+-------+

| Chirpy | Gwen | bird| f| 1998-09-11 | NULL |

| Fluffy | Harold | cat | f| 1993-02-04 | NULL |

| Buffy| Harold | dog | f| 1989-05-13 | NULL |

| Puffball | Diane | hamster | f| 1999-03-30 | NULL |

| Slim | Benny | snake | m| 1996-04-29 | NULL |

+----------+--------+---------+------+------------+-------+

由以上结果可以看出:

查询显示结果时,被分组的列如果有重复的值,只返回靠前的记录,并且返回的记录集是排序的。这并不是一个很好的结果。仅仅使用GROUP BY从句并没有什么意义,该从句的真正作用在于与各种组合函数配合,用于行计数。

1、COUNT()函数计数非NULL结果的数目。

你可以这样计算表中记录行的数目:

mysql>select count(*) from pet

+----------+

| count(*) |

+----------+

|9 |

+----------+

计算sex为非空的记录数目:

mysql>select count(sex) from pet

+------------+

| count(sex) |

+------------+

| 8 |

+------------+

现在配合GROUP BY 从句使用。

例如:要知道每个主人有多少宠物

mysql>SELECT owner, COUNT(*) FROM pet GROUP BY owner

+--------+----------+

| owner | COUNT(*) |

+--------+----------+

| Benny |2 |

| Diane |2 |

| Gwen |3 |

| Harold |2 |

+--------+----------+

又如,每种宠物的个数:

mysql>SELECT species,count(*) FROM pet GROUP BY species

+---------+----------+

| species | count(*) |

+---------+----------+

| bird|2 |

| cat |2 |

| dog |3 |

| hamster |1 |

| snake |1 |

+---------+----------+

如果你除了计数还返回一个列的值,那么必须使用GROU BY语句,否则无法计算记录。例如上例,使用GROUP BY对每个owner分组所有记录,没有它,你得到的一切是一条错误消息:

mysql>SELECT owner, COUNT(owner) FROM pet

ERROR 1140 at line 1: Mixing of GROUP columns (MIN(),MAX(),COUNT()...)

with no GROUP columns is illegal if there is no GROUP BY clause

也可以根据多个列分组,例如:

按种类和性别组合的动物数量:

mysql>SELECT species, sex, COUNT(*) FROM pet GROUP BY species, sex

+---------+------+----------+

| species | sex | COUNT(*) |

+---------+------+----------+

| bird| NULL |1 |

| bird| f|1 |

| cat | f|1 |

| cat | m|1 |

| dog | f|1 |

| dog | m|2 |

| hamster | f|1 |

| snake | m|1 |

+---------+------+----------+

| Slim | snake | 1996-04-29 |

+----------+---------+------------+

注意DESC关键词仅适用于紧跟在它之前的列名字(birth);species值仍然以升序被排序。注意,输出首先按照species排序,然后具有相同species的宠物再按照birth降序排列。

查询多个表

查询多个表,FROM子句列出表名,并用逗号分隔,因为查询需要从他们两个拉出信息。

当组合(联结-join)来自多个表的信息时,你需要指定在一个表中的记录怎样能匹配其它表的记录。这很简单,因为它们都有一个name列。查询使用WHERE子句基于name值来匹配2个表中的记录。

因为name列出现在两个表中,当引用列时,你一定要指定哪个表。这通过把表名附在列名前做到。

现在有一个event表:

mysql>select * from event

+----------+------------+----------+-----------------------------+

| name | date | type | remark |

+----------+------------+----------+-----------------------------+

| Fluffy | 1995-05-15 | litter | 4 kittens, 3 female, 1 male |

| Buffy| 1993-06-23 | litter | 5 puppies, 2 female, 3 male |

| Buffy| 1994-06-19 | litter | 3 puppies, 3 female |

| Chirpy | 1999-03-21 | vet | needed beak straightened|

| Slim | 1997-08-03 | vet | broken rib |

| Bowser | 1991-10-12 | kennel | NULL|

| Fang | 1991-10-12 | kennel | NULL|

| Fang | 1998-08-28 | birthday | Gave him a new chew toy |

| Claws| 1998-03-17 | birthday | Gave him a new flea collar |

| Whistler | 1998-12-09 | birthday | First birthday |

+----------+------------+----------+-----------------------------+

同样方法也可用于同一张表中,你不必有2个不同的表来执行一个联结。如果你想要将一个表的记录与同一个表的其他记录进行比较,联结一个表到自身有时是有用的。例如,为了在你的宠物之中繁殖配偶,你可以用pet联结自身来进行相似种类的雄雌配对:

mysql>SELECT p1.name, p1.sex, p2.name, p2.sex, p1.species

->FROM pet AS p1, pet AS p2

->WHERE p1.species = p2.species AND p1.sex = "f" AND p2.sex = "m"

+--------+------+--------+------+---------+

| name | sex | name | sex | species |

+--------+------+--------+------+---------+

| Fluffy | f| Claws | m| cat |

| Buffy | f| Fang | m| dog |

| Buffy | f| Bowser | m| dog |

+--------+------+--------+------+---------+

关于Web前端学习的必经阶段。正在从事Web前端学习的小伙伴们来和小伙伴们一起看一看吧。希望能够对大家有所帮助!

第一阶段:

● HTML+CSS:

HTML进阶、CSS进阶、div+css布局、HTML+css整站开发、

● JavaScript基础:

Js基础教程、js内置对象常用方法、常见DOM树 *** 作大全、ECMAscript、DOM、BOM、定时器和焦点图。

● JS基本特效:

常见特效、例如:tab、导航、整页滚动、轮播图、JS制作幻灯片、d出层、手风琴菜单、瀑布流布局、滚动事件、滚差视图。

● JS高级特征:

正则表达式、排序算法、递归算法、闭包、函数节流、作用域链、基于距离运动框架、面向对象基础、

● JQuery:基础使用

悬着器、DOM *** 作、特效和动画、方法链、拖拽、变形、JQueryUI组件基本使用。

第二阶段:HTML5和移动Web开发

● HTML5:

HTML5新语义标签、HTML5表单、音频和视频、离线和本地存储、SVG、Web Socket、Canvas.

● CSS3:

CSS3新选择器、伪元素、脸色表示法、边框、阴影、background系列属性改变、Transition、动画、景深和深透、3D效果制作、Velocity.js框架、元素进场、出场策略、炫酷CSS3网页制作。

● Bootstrap:

响应式概念、媒体查询、响应式网站制作、删格系统、删格系统原理、Bootstrap常用模板、LESS和SASS。

● 移动Web开发:

跨终端WEB和主流设备简介、视口、流式布局、d性盒子、rem、移动终端JavaScript事件、手机中常见JS效果制作、Zepto.js、手机聚划算页面、手机滚屏。

第三阶段:HTTP服务和AJAX编程

● WEB服务器基础:

服务器基础知识、Apache服务器和其他WEB服务器介绍、Apache服务器搭建、HTTP介绍。

● PHP基础:

PHP基础语法、使用PHP处理简单的GET或者POST请求、

● AJAX上篇:

Ajax简介和异步的概念、Ajax框架的封装、XMLHttpRequest对象详细介绍方法、兼容性处理方法、Ajax框架的封装、Ajax中缓存问题、XML介绍和使用。

● AJAX下篇:

JSON和JSON解析、数据绑定和模板技术、JSONP、跨域技术、图片预读取和lazy-load技术、JQuery框架中的AjaxAPI、使用Ajax实现瀑布流案例额。

第四阶段:面向对象进阶

● 面向对象终极篇:

从内存角度到理解JS面向对象、基本类型、复杂类型、原型链、ES6中的面向对象、属性读写权限、设置器、访问器。

● 面向对象三大特征:

继承性、多态性、封装性、接口。

● 设计模式:

面向对象编程思维、单例模式、工厂模式、策略模式、观察者模式、模板方法模式、代理模式、装饰者模式、适配器模式、面向切面编程。

第五阶段:封装一个属于自己的框架

● 框架封装基础:

事件流、冒泡、捕获、事件对象、事件框架、选择框架。

● 框架封装中级:

运动原理、单物体运动框架、多物体运动框架、运动框架面向对象封装。

● 框架封装高级和补充:

JQuery框架雏形、可扩展性、模块化、封装属于传智自己的框架。

第六阶段:模块化组件开发

● 面向组件编程:

面向组件编程的方式、面向组件编程的实现原理、面向组件编程实战、基于组件化思想开发网站应用程序。

● 面向模块编程:

AMD设计规范、CMD设计规范、RequireJS,LoadJS、淘宝的SeaJS。

第七阶段:主流的流行框架

● Web开发工作流:

GIT/SVN、Yeoman脚手架、NPM/Bower依赖管理工具、Grunt/Gulp/Webpack。

● MVC/MVVM/MVW框架:

Angular.js、Backbone.js、Knockout/Ember。

● 常用库:

React.js、Vue.js、Zepto.js。

第八阶段:HTML5原生移动应用开发

● Cordova:

WebApp/NativeApp/HybirdApp简介、Cordova简介、与PhoneGap之间的关系、开发环境搭建、Cordova实战(创建项目,配置,编译,调试,部署发布)。

● Ionic:

Ionic简介和同类对比、模板项目解析、常见组件及使用、结合Angular构建APP、常见效果(下拉刷新,上拉加载,侧滑导航,选项卡)。

● React Native:

React Native简介、React Native环境配置、创建项目,配置,编译,调试,部署发布、原生模块和UI组件、原生常用API。

● HTML5+:

HTML5+中国产业联盟、HTML5 Plus Runtime环境、HBuilder开发工具、MUI框架、H5+开发和部署。

第九阶段: Node.js全栈开发

● 快速入门:

Node.js发展、生态圈、Io.js、Linux/Windows/OS X环境配置、REPL环境和控制台程序、异步编程,非阻塞I/O、模块概念,模块管理工具、开发流程,调试,测试。

● 核心模块和对象:

全局对象global,process,console,util、事件驱动,事件发射器、加密解密,路径 *** 作,序列化和反序列化、文件流 *** 作、HTTP服务端与客户端、Socket.IO。

● Web开发基础:

HTTP协议,请求响应处理过程、关系型数据库 *** 作和数据访问、非关系型数据库 *** 作和数据访问、原生的Node.js开发Web应用程序、Web开发工作流、Node.js开发Blog案例。

● 快速开发框架:

Express简介+MVC简介、Express常用API、Express路由模块、Jade/Ejs模板引擎、使用Express重构Blog案例、Koa等其他常见MVC框架。

● Node.js开发电子商务实战:

需求与设计、账户模块注册登录、会员中心模块、前台展示模块、购物车,订单结算、在线客服即时通讯模块。


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/7249521.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-04-03
下一篇 2023-04-03

发表评论

登录后才能评论

评论列表(0条)

保存