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

Posted 2023-05-08

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

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

界面实现起来还是比较容易的，主要的是按钮的操作和分页信息的显示，我们需要定义几个变量：currentPage（当前页）、countPerPage（每页的条数）、pageCount（页数）、count（总数），定义了这几个变量就可以将上图中分页的信息表示出来 参考技术A 可以在后台先把数据完成排序与分页，然后再传到前台。同时可以在前台的请求url中加上排列顺序和一个页面要多少行。这样一次只想前台输送一部分（按页输送）。

_排序与分页

-- 排序与分页

-- 排序，没有排序操作，按照添加顺序
SELECT * FROM employees;
-- 练习 按salary从小到大
  -- 使用order by 对查询的数据排序操作
  --  升序asc
  -- 降序desc
  
  
SELECT employee_id ,last_name,salary
FROM employees;
ORDER BY salary ASC;

# 列的别名只能在ORDER BY 中使用，不能在where使用
-- 强调排序 where在 order by之前
SELECT *
FROM employees
WHERE department_id IN (50,60,70)
ORDER BY department_id DESC;

-- 二级排序 department_id 降序 salary升序
SELECT department_id,salary,employee_id
FROM employees
WHERE department_id IN (50,60,70)
ORDER BY department_id DESC,salary ASC;


-- 分页
-- 2.1 mysql 使用mimit实现数据的分页功能
# 需求一 每页显示20记录，此时显示第一页
SELECT employee_id,last_name
FROM employees
LIMIT 0,20


# 需求2 每页显示20记录，此时显示第二页
SELECT employee_id,last_name
FROM employees
LIMIT 20,20


-- 2.1  where order by   limit 声明顺序
SELECT employee_id,last_name,salary
FROM employees
WHERE salary>6000
ORDER BY salary DESC
LIMIT  10;

-- 练习 表中有107个数据，只显示32，33 条数据
SELECT employee_id	,last_name
FROM employees
LIMIT 31,2;
-- 显示最高的工资
SELECT salary
FROM employees
ORDER BY salary DESC
LIMIT 0,1;