一、目的

该笔记的目的是引导读者在已搭建的数据库网页的基础上，利用JS设计数据排序工具。其效果如图1所示。“Order by”下拉列表框由一系列字段组成，如“Location”“Longitude”“Latitude”“User”“Time”五个字段。点击“Latitude”，JS就会自动按“Latitude”字段从小到大（升序）将待输出的数据进行排序；再次点击“Latitude”字段，JS会自动按“Latitude”字段从大到小（降序）将待输出的数据进行排序。

该笔记假定读者已阅读过案例“Case Study: 利用JS实现数据库网页的数据分页、数据选择、数据详细信息查看功能”，因为该笔记的代码中部分变量和函数延续了上一篇笔记中的相应变量和函数。这些变量或函数有print_table_kit["data"]、print_table_kit["init_max_data"]、print_data()和IndexOf()。

print_table_kit["data"]：待输出的数据。执行console.log(print_table_kit["data"])数据，结果如图2所示。
print_table_kit["init_max_data"]：用于数据分页输出，规定了每页最大的数据输出量。数据分页功能详见上一案例。如果您不需要进行数据分页输出，而仅仅需要数据排序功能，则只需要规定自己的print_data()函数，将print_table_kit["data"]的内容直接输出到某个HTML元素中即可。
print_data()：用于输出数据，主要通过代码document.getElementById("xxx").innnerHTML()向HTML元素输出数据表。
IndexOf()：寻找某一元素在数组中的位置。可以直接从上一个案例的代码中摘抄此函数。

二、实现方法

在“Case Study: 利用JS实现数据库网页的数据分页、数据选择、数据详细信息查看功能”案例的基础上，在“show.data.js”文件中加入以下代码块。您需要修改排序工具箱参数，使之适应您希望的排序方式，并确保IndexOf()函数已存在。此外，您可以将print_table_kit["data"]改成您需要输出的JSON数组变量名，并定义自己的print_data()函数。运行数据库网页，即可使用数据排序控件。

/*********  数据库排序 **********/
/*******************************/// 排序工具箱参数
var data_sort_kit = {"field_value": ["location", "long", "lat", "user", "time"],                 //MySQL数据表中需要排序的字段"field_display": ["Location", "Longtitude", "Latitude", "User", "Time"],    //排序字段在下拉列表框中的显示内容"order": ["asc", "asc", "asc", "asc", "asc"]                                //初始的排序方法//  "asc"升序、"desc"降序
}// 辅助函数：查找元素在数组中的位置
// 参考 https://blog.csdn.net/qq_41244810/article/details/104768450
//    IndexOf(arr, item)函数，在笔记"Case Study: 利用JS实现数据库网页的数据分页、数据选择、数据详细信息查看功能"
//    中已存在// 数据排序算法
function getSortFun(order, sortBy) {var ordAlpah = (order == 'asc') ? '>' : '<';var sortFun = new Function('a', 'b', 'return a.' + sortBy + ordAlpah + 'b.' + sortBy + '?1:-1');return sortFun;
}// 排序字段选择下拉列表框值改变时，进行排序
function perform_sort(){// 获取要排序的字段var objS = document.getElementById("change_sort");var sortBy = objS.options[objS.selectedIndex].value;// 执行排序函数var index = IndexOf(data_sort_kit["field_value"], sortBy);print_table_kit["data"].sort(getSortFun(data_sort_kit["order"][index], sortBy));// 修改升序降序参数for(var i=0; i<data_sort_kit["order"].length; i++){if(i == index){if(data_sort_kit["order"][i] == "asc"){data_sort_kit["order"][i] = "desc";} else {data_sort_kit["order"][i] = "asc";}} else {data_sort_kit["order"][i] = "asc";}}// 刷新数据表print_data(print_table_kit["init_max_data"], 1);
}// 输出排序字段选择下拉列表框
function print_order_select(){var cout = 'Order by: ';cout += '<select id="change_sort" οnchange="perform_sort()">';for(var i = 0; i < data_sort_kit["field_value"].length; i++){cout += '<option value="'+data_sort_kit['field_value'][i] +'">'+data_sort_kit['field_display'][i] +'</option>';}cout += '</select>';return cout;
}/********* /数据库排序 **********/
/*******************************/

欢迎感兴趣的同行朋友们批评指正。
联系邮箱：hrwu_ecology@163.com

Case study：在数据库网页中设计数据排序工具相关推荐

Case study：数据库网页构建原理和实践
该笔记的目的是引导读者借助WampServer平台,并利用HTML/CSS/JS/PHP将MySQL数据库挂载到网页中.同时,该笔记通过一个具体的案例,向读者分析数据库网页架构中五个部分协同工作的机理 ...
Case Study: 利用JS实现数据库网页的数据分页、数据选择、数据详细信息查看功能
一.目标该笔记的目的是引导读者借助WampServer平台和MySQL数据库,利用HTML/CSS/JS/PHP设计一个能够进行实现数据分页显示.数据选择.数据详细信息查看功能的数据库网页.该数据库 ...
异构数据库结构与数据同步工具dbswitch
一.背景开源MPP数据库Greenplum是一种基于PostgreSQL的分布式数据库,其采用shared-nothing架构,其架构专门用于管理大规模分析数据仓库,Greenplum主要定位在OL ...
数据库结构以及数据对比工具方法使用教程
针对数据库多表多字段多数据使用. 1.百度下载Navicat Premium,此工具是Navicat MySql升级版工具.(有试用期限,使用期限到期,在去找绿色版就好) 2.电脑运行sql服务 ...
Case Study: 利用PHP获取关系型数据库中多张数据表的数据
一.目标该笔记的目的是引导读者借助WampServer平台和MySQL数据库,利用HTML/CSS/JS/PHP设计一个多数据表关联的网页.在上一个案例(Case Study: 利用JS实现数据库网 ...
Case Study: 利用JS设计高级检索功能通过PHP获取MySQL数据
一.目标该笔记的目的是引导读者借助WampServer平台和MySQL数据库,利用HTML/CSS/JS/PHP设计一个含有高级检索功能的数据库网页.该功能效果如图1所示.用户在文本框中输入相应内容 ...
exp导oracle数据库,使用exp/imp 在oracle数据库间导数据
最近工作需要将oracle数据库的表数据导出到另一个oracle数据库表,找到了oracle 自带的命令行,并记录下导数据过程. 导数据过程分以下几步: 假设源数据库为A,目标数据库为B 1.在B上通 ...
数据库——《对数据进行排序》
这是接着上面的文献第三篇文献,而这篇文献讲的是数据库里面对数据进行排序的文献总结,使用 SELECT 语句从表中查询数据时,不保证结果集中的行顺序.这意味着SQL Server可以返回具有未指定行顺序 ...
java 数据库排序_Java如何排序数据库表的数据内容？
在Java编程中,如何排序数据库表的数据内容?假定数据库名称是:testdb,其中有一个表:employee,这个表中有4条记录. 创建数据库表的语句 - use testdb; create tab ...

Case study：在数据库网页中设计数据排序工具

一、目的

二、实现方法

Case study：在数据库网页中设计数据排序工具相关推荐

最新文章

热门文章