Case Study: 利用JS实现数据库网页的数据分页、数据选择、数据详细信息查看功能
一、目标
该笔记的目的是引导读者借助WampServer平台和MySQL数据库，利用HTML/CSS/JS/PHP设计一个能够进行实现数据分页显示、数据选择、数据详细信息查看功能的数据库网页。该数据库网页的效果如图1所示。区域1实现数据分页功能，区域2能够实现用户自主选择数据，区域5实现数据详细信息的查看，区域6为一个按钮（链接）。点击区域6按钮时，能跳转到另一页面，对用户所选择的数据进行进一步分析与可视化。
图1 分页数据库网页效果
该笔记假定读者已经能自己动手利用WampServer搭建出数据库网页，即利用PHP将获取服务器MySQL数据库中的数据，并将其呈递给JS，最后展示给用户。如尚不能搭建一个简易的网页数据库，请参考Case study：数据库网页构建原理和实践。
二、搭建步骤
加载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 需展示的源数据加载数据分页、数据选择和数据详细信息查看功能模块：向"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) { //判断obj是否在arr内var i = arr.length;while (i--) {if (arr[i] === obj) {return true;}}return false;
}var setCookie = function (name, value, day) { //设置cookie变量//当设置的时间等于0时，不设置expires属性，cookie在浏览器关闭后删除var expires = day * 24 * 60 * 60 * 1000;var exp = new Date();exp.setTime(exp.getTime() + expires);document.cookie = name + "=" + value + ";expires=" + exp.toUTCString();
};// Select模块功能：点击全选按钮，选中所有数据
function selall(){var items_all = document.getElementsByName("select_all");var items = document.getElementsByName("selitem");if(items_all[0].checked){for (i = 0; i < items.length; i++){ items[i].checked = true;if(!contains(seldat, items[i].value)){seldat.push(items[i].value); }} } else{for (i = 0; i < items.length; i++){ items[i].checked = false;seldat.remove(items[i].value);} }//console.log(seldat);
}// Select模块功能：点击数据复选框，选中或取消选中数据
function click_databox(box){var items_all = document.getElementsByName("select_all");if(box.checked){if(!contains(seldat, box.value)){seldat.push(box.value); }//刷新全选复选框 var items = document.getElementsByName("selitem");var items_all_set = true;for (var i = 0; i < items.length; i++){ if(!items[i].checked) { items_all_set = false; }} items_all[0].checked = items_all_set;} else{seldat.remove(box.value);//刷新全选复选框items_all[0].checked = false;}//console.log(seldat);
}// Select模块功能：刷新页面中的复选框
function renovate_checkbox(){var items_all_set = true;// 刷新单项数据复选框var items = document.getElementsByName("selitem");for (i = 0; i < items.length; i++){ if(contains(seldat, items[i].value)){items[i].checked = true;} else {items_all_set = false;}}// 刷新全选复选框var items_all = document.getElementsByName("select_all");items_all[0].checked = items_all_set;
}// Select模块功能：点击Analysis按钮，js数组传到Cookie，跳转到数据分析与可视化界面
function analysis(){ setCookie('arr',seldat,1); //利用COOKIE将选择的数据的外键名传给新的页面location.href = print_table_kit["select_button_location"];//console.log(arr); //alert("选择的个数为：" + arr.length);
}// href模块功能：点击Info按钮，跳转到图片info界面
function info(path, new_page){setCookie("query_key",path,1); //利用COOKIE向新页面传送外键信息if(new_page){window.open(print_table_kit["href_location"]);} else{location.href = print_table_kit["href_location"];}
}// data模块功能：负责展示第i条数据
function showdata(i){var cout = "<tr>";var FK_value = print_table_kit["data"][i][print_table_kit["foreign_key"]];for(var j=0; j<print_table_kit["table_head"].length; j++){cout += "<td>";if(print_table_kit["field_option"][j] == "select"){cout += '<label>';cout += '<input name="selitem" type="checkbox" οnclick="click_databox(this)" value="' + FK_value + '" />';cout += '</label>';} else if(print_table_kit["field_option"][j] == "auto"){cout += String(i+1);} else if(print_table_kit["field_option"][j] == "data"){cout += print_table_kit["data"][i][print_table_kit["field_data"][j]];} else if(print_table_kit["field_option"][j] == "href"){cout += '<button type="button" οnclick=\'info("' + FK_value + '", ' + print_table_kit["href_newpage"] + ')\'>' +print_table_kit["href_display"];}cout += "</td>";}cout += "</tr>";return cout;
}//分页控件：翻到下一页
function nextpage(page, max_page){var objS = document.getElementById("changesize");var max_data = objS.options[objS.selectedIndex].value;if(page < max_page){print_data(max_data, page+1);}
}//分页控件：翻到上一页
function formerpage(page){var objS = document.getElementById("changesize");var max_data = objS.options[objS.selectedIndex].value;if(page > 1){print_data(max_data, page-1);}
}//分页控件：翻到首页
function firstpage(){var objS = document.getElementById("changesize");var max_data = objS.options[objS.selectedIndex].value;print_data(max_data, 1);
}//分页控件：翻到尾页
function lastpage(max_page){var objS = document.getElementById("changesize");var max_data = objS.options[objS.selectedIndex].value;print_data(max_data, max_page);
}//输出分页按钮
function print_switchpage(max_data, page){var max_page = Math.ceil(print_table_kit["data"].length/max_data);var cout = '<a href="###" οnclick=firstpage()>\<\<</a>';cout += ' ';cout += '<a href="###" οnclick="formerpage('+String(page)+')">\<</a>';cout += ' ';cout += '<a href="###">'+ String(page) +'</a>';cout += '/' + String(max_page);cout += ' ';cout += '<a href="###" οnclick="nextpage('+String(page)+','+String(max_page)+')">\></a>';cout += ' ';cout += '<a href="###" οnclick="lastpage('+String(max_page)+')">\>\></a>';cout += ' ';return cout;
}//改变最大数据输出量下拉列表框的值触发事件
function change_maxdata(){var objS = document.getElementById("changesize");var max_data = objS.options[objS.selectedIndex].value;print_data(max_data, 1);
}//输出改变最大数据输出量的下拉列表框
function print_changesize(max_data){var cout = 'Maximum output: ';cout += '<select id="changesize" οnchange="change_maxdata();">';for(var i=0; i<print_table_kit["max_data_option"].length; i++){cout += '<option value="'+String(print_table_kit["max_data_option"][i])+'"';if(print_table_kit["max_data_option"][i] == max_data){cout += ' selected';}cout += '>';cout += String(print_table_kit["max_data_option"][i]);cout += '</option>';}cout += '</select>';return cout;
}// 输出表头
function print_tablehead(){var cout = "<table>";cout += "<tr class='head'>";for(var i=0; i<print_table_kit["table_head"].length; i++){cout += "<th>";cout += print_table_kit["table_head"][i];if(print_table_kit["field_option"][i] == "select"){cout += '<label>';cout += '<input name="select_all" type="checkbox" οnclick="selall()" value="" />';cout += '</label>';}cout += "</th>";}return cout;
}// 输出表格
function print_data(max_data, page){num_data = 0; //页面中显示数据个数初始化// 输出分页按钮var cout = print_switchpage(max_data, page);// 输出最大数据输出量下拉列表框cout += print_changesize(max_data);// 输出表头cout += print_tablehead();// 输出数据var start = (page - 1) * max_data; for (var k = start; k < start + Number(min(max_data, print_table_kit["data"].length - start)); k += 1){cout += showdata(k);}cout += "</table>";// 输出数据分析按钮cout += '<a href="###" οnclick="analysis()">'+print_table_kit["select_button_display"]+'</a></p>';document.getElementById("showtb").innerHTML = cout;//刷新所有select复选框renovate_checkbox();
}
/******** /分页输出工具箱 ********/
/********************************/
- 在"main.php"中加入代码
<div id="showtb"></div>。这段id为"showtb"的区域将会被填充为数据表。同时要为<body>添加onload事件，即<body onload="init()">。其中init()函数必须要执行的内容如下。此时就可以实现数据分页、数据选择以及数据详细信息查看功能（伪链接）。
function init(){print_data(print_table_kit["init_max_data"], 1);
}
欢迎感兴趣的同行朋友们批评指正。
联系邮箱：hrwu_ecology@163.com
Case Study: 利用JS实现数据库网页的数据分页、数据选择、数据详细信息查看功能相关推荐
- Case Study: 利用JS设计高级检索功能通过PHP获取MySQL数据
一.目标 该笔记的目的是引导读者借助WampServer平台和MySQL数据库,利用HTML/CSS/JS/PHP设计一个含有高级检索功能的数据库网页.该功能效果如图1所示.用户在文本框中输入相应内容 ...
- Case Study: 利用PHP获取关系型数据库中多张数据表的数据
一.目标 该笔记的目的是引导读者借助WampServer平台和MySQL数据库,利用HTML/CSS/JS/PHP设计一个多数据表关联的网页.在上一个案例(Case Study: 利用JS实现数据库网 ...
- 利用JS实现的网页赛车小游戏
今天学完了JavaScript基础,打算做个网页小游戏练练手,想来想去,想起了小时候那种游戏机里的赛车游戏,于是做了一个玩玩,效果如下: 通过操纵最底下的小车来回躲避上方随机出来的三个障碍车辆从而 ...
- 利用js，实现网页上实时更新时间，需要时直接拿来用，不需要改动
html文件代码 <div><span id="showNowTime"></span></div> js文件代码 <scri ...
- 利用 JS 脚本实现网页全自动秒杀抢购
1.制作测试网页 首先我们来做一个简易的抢购页面 Apple WATCH S E R I E S 6 健康的未来,现在戴上. 预售倒计时 秒! 亚马逊测评 www.yisuping.com
- 【脚本】网页端微信读书书架中书籍详细信息
首先进入书架中的一个分组 然后在控制台输入如下代码 // 书架中的书籍链接 let shelf_arr = []; // 存储链接 let shelf_book = document.getEleme ...
- Case study：在数据库网页中设计数据排序工具
一.目的 该笔记的目的是引导读者在已搭建的数据库网页的基础上,利用JS设计数据排序工具.其效果如图1所示."Order by"下拉列表框由一系列字段组成,如"Locati ...
- Case study：数据库网页构建原理和实践
该笔记的目的是引导读者借助WampServer平台,并利用HTML/CSS/JS/PHP将MySQL数据库挂载到网页中.同时,该笔记通过一个具体的案例,向读者分析数据库网页架构中五个部分协同工作的机理 ...
- 利用js制作html table分页示例(js实现分页)
有时候table的列数太长,不利于使用者查询,所以利用JS做了一个table的分页,以下为相关代码 一.JS代码 <script type="text/javascript" ...
最新文章
- Python GuidLine(python编程规范) PEP8
- Vue + Element UI 实现权限管理系统 前端篇（七）：功能组件封装
- 科大星云诗社动态20210813
- MySQL探秘(二)：SQL语句执行过程详解
- 谷歌云端语音识别软件
- Windows Server 2012活动目录基础配置与应用（新手教程）之1---为什么需要域？
- Openlayer：学习笔记之解析地图组成
- Bootstrapbutton
- 190815每日一句
- 《软件方法》书中自测题大全-题目全文+分卷自测
- 汉字区位码转换为“汉字ASCII码“
- 微信游戏小程序源码-合成大西瓜小游戏(合成版)源码 附带流量主功能
- 矩阵乘法实现卷积运算
- chrome鼠标手势插件
- 实现元素水平垂直居中的4种方法
- 联想笔记本无线网络无法使用（无线开关已打开，但搜不到无线网络）
- 盘点谷歌浏览器中的一些神级插件
- 如何理解同震、震后、震间的含义
- 【R实验.8】方差分析
- 汽车电子狗的原理 【闲杂篇】