Case Study: 利用JS实现数据库网页的数据分页、数据选择、数据详细信息查看功能

一、目标

该笔记的目的是引导读者借助WampServer平台和MySQL数据库，利用HTML/CSS/JS/PHP设计一个能够进行实现数据分页显示、数据选择、数据详细信息查看功能的数据库网页。该数据库网页的效果如图1所示。区域1实现数据分页功能，区域2能够实现用户自主选择数据，区域5实现数据详细信息的查看，区域6为一个按钮（链接）。点击区域6按钮时，能跳转到另一页面，对用户所选择的数据进行进一步分析与可视化。

图1 分页数据库网页效果

该笔记假定读者已经能自己动手利用WampServer搭建出数据库网页，即利用PHP将获取服务器MySQL数据库中的数据，并将其呈递给JS，最后展示给用户。如尚不能搭建一个简易的网页数据库，请参考Case study：数据库网页构建原理和实践。

二、搭建步骤

1. 加载JS数据：假定需要搭建的数据库网页由3个文件组成，即"main.php"、“read_data.php"和"show_data.js”。其中"main.php"用于存放HTML元素。"main.php"调用"read_data.php"来向MySQL数据库中读取数据。"main.php"调用"show_data.js"来实现数据表输出。现在假设PHP已经从MySQL数据库中读取数据表，并且JS已将PHP读取的数据转化为一个名为points的JS变量（若对上述步骤不熟悉，请参考Case study：数据库网页构建原理和实践）。执行console.log(points)，结果如图2所示：
   
   图2 需展示的源数据

2. 加载数据分页、数据选择和数据详细信息查看功能模块：向"show_data.js"文件中加入以下代码。其中print_table_kit存放了分页输出工具箱的基本参数。该变量最为重要。我们可以暂时不关注其他代码的含义。在print_table_kit的几个参数中，data为源数据，table_head表示在网页中向用户呈现的表格的表头中各字段显示的名字。field_option表示各字段的功能。其中select为复选框，呈现效果如图1的区域2；auto为自动分配整数值，呈现效果如图1的区域3；data表示直接依照field_option中对应的字段输出MySQL数据库中的数据；href表示提供一个链接，用户点击链接后能够查看某条数据的具体信息。max_data_option表示每页最大数据输出量的几种选择，表现为图1区域1中下拉列表框的各个值。init_max_data表示开始时默认的最大数据输出量；foreign_key用于指定跳转到其他页面时传递的变量（例如点击了图1中的Info按钮，跳转到另一个页面来查看某一条特定数据的详细信息。但另一个页面必须得知道用户需要查看的是哪条数据的信息。foreign_key就用来实现这一功能。同理在点击Analysis!按钮时也会用到）；href_display表现为图1中详细信息查看按钮上的文字显示为Info；href_newage表示点击Info按钮后是新跳出一个页面，还是原页面跳转到新的URL；href_location表示点击Info后跳转到的页面（该笔记并不详述跳转后页面的实现代码，因此为了简化，也可以把该值直接设置为任意一个网址，比如"https://www.baidu.com/“）；select_button_display表现为图1中区域6的按钮显示文字为"Analysis!”，用于分析用户选择的数据并进行可视化，同时跳转到新的页面；select_button_location指定了点击Analysis!按钮后跳转到的界面。同样为了简化，可以直接将其设为百度的网址。

/********* 分页输出工具箱 ********/
/********************************/
// 工具箱参数
var print_table_kit = {
   
    "data": points,                             //源数据
    "table_head":   ["Select", "No.", "Location", "Longtitude", "Latitude", "User", "Time", "Detailed"],
                                                //网页中向用户展示的数据表字段名，不影响JS和PHP代码运行
    "field_option": ["select", "auto", "data", "data", "data", "data", "data", "href"],
                                                //数据字段种类
                                                //  select: 复选框
                                                //  auto: 自动分配递增整数值
                                                //  data: 显示数据表中对应内容
                                                //  href: 提供数据查看链接
    "field_data":   ["NA", "NA", "location", "long", "lat", "user", "time", "NA"],
                                                //MySQL数据库中对应的数据字段
    "max_data_option": [5, 10, 20, 50, 100],    //每页最大数据输出量的若干选项
    "init_max_data": 20,                        //默认的每页最大数据输出量
    "foreign_key": "picture",                   //外键，用于查看数据详细信息，或进行进一步数据可视化
    "href_display": "Info",                     //网页中向用户展示的链接的名字，不影响JS和PHP代码运行
    "href_newpage": false,                      //点击链接后是否打开新的网页
    "href_location": "./info.php",              //点击链接后转到的页面
    "select_button_display": "Analysis!",       //选中数据后能点击按钮跳转到另一网页，该按钮在网页中展示的文字
    "select_button_location": "analysis_result.php"
                                                //点击按钮后跳转到的页面
}

//辅助变量和函数
var seldat=[];                                  //用户点击checkbox后所有选中的数据

function min(a,b){
                                 //获取最小值
    if(a>b) {
   return b;}
    return a;
}

Array.prototype.remove = function(val) {
           // Array的remove方法arr.remove()
    var index = this.indexOf(val);              // 删除数组中为某一值的元素
    if (index > -1) {
    
    this.splice(index, 1); 
    } 
};

function contains(arr, obj) {