张金龙的博客分享 http://blog.sciencenet.cn/u/zjlcas 物种适应性、分布与进化

博文

基于DataTables Javascript库建立本地版物种信息快速查询网页

已有 3140 次阅读 2017-5-15 17:29 |个人分类:科研笔记|系统分类:科研笔记|关键词:学者


小型标本馆可能并没有足够的经费开发自己的数据管理系统。然而建立自己的标本查询系统又是很多小型标本馆梦寐以求的。对于藏品只有几万份的标本馆来说,一般在开发服务器版本的网页之前, 可以考虑先建立一个基于局域网的本地小型查询系统。

html和Javascript是开发过程中绕不开的两种语言:html用来生成网页布局, 而javascript可用来实现本地版本的动态网页。

在网页中用表格展示数据表, 已经有若干JS脚本, DataTables (https://datatables.net/) 就是其中之一。这里主要介绍将IUCN数据导入DataTables, 并通过html展示。标本记录数据与之类似。

1. 创建文件夹

先创建文件夹, 改名为IUCN,例如位置在 C:UsersjlzhangDesktopIUCN

2. 下载DataTables库

解压缩到IUCN文件夹下。 以版本DataTables-1.10.15为例, 所有内容解压缩到C:UsersjlzhangDesktopIUCNDataTables-1.10.15

3. 创建index.html文件

创建一个叫做index.html的纯文本文件。

代码的编码改为UTF-8。拷贝如下内容

<html><meta  http-equiv="Content-Type"content="text/html; charset=UTF-8"><head>

 <link  rel="stylesheet"type="text/css"href="./DataTables-1.10.15/media/css/jquery.dataTables.css">
 </head><body><table  id="example"class="display"width="100%"></table>
 <script  type="text/javascript"charset="utf8"src="./DataTables-1.10.15/media/js/jquery.js"></script>  
 <script  type="text/javascript"charset="utf8"src="./DataTables-1.10.15/media/js/jquery.dataTables.js"></script>
 <script  type="text/javascript"charset="utf8"src="./dat.js"></script>

 <script>
 $(document).ready(function(){
   $('#example').DataTable({       data:dataSet,       columns:[
           { title:   "科"     },//barcode
           { title:   "中文科名"  },//locationof the storage
           { title:   "学名"},
           { title:   "中文名"   },
           { title:   "濒危等级"     },
           { title:   "是否特有"   }
           ],//Link to the photo
     });  
    });      
 </script></body></html>

其中:

<link  rel="stylesheet"type="text/css"href="./DataTables-1.10.15/media/css/jquery.dataTables.css">

是引用dataTables所带的css样式表, 以调整网页的外观。

<script  type="text/javascript"charset="utf8"src="./DataTables-1.10.15/media/js/jquery.js"></script>

是读取 JQuery函数库。因为dataTable是依赖于JQuery库的, 所以必须要先载入。

<script  type="text/javascript"charset="utf8"src="./DataTables-1.10.15/media/js/jquery.dataTables.js"></script>

是读取 jquery.dataTables.js 里面的函数。

<script  type="text/javascript"charset="utf8"src="./dat.js"></script>

是读取 dat.js中的数据。该数据以Json格式保存。

4. 将数据导入 dat.js文件

IUCN_CN.xlsx 中保存的是IUCN红色名录数据。用以下R代码将Excel中的数据保存为Json数据。

#### Rscript for generatingjson data
setwd("C:/Users/jlzhang/Desktop/IUCN")
library(openxlsx)
library(jsonlite)
dat <- read.xlsx("IUCN_CN.xlsx")#### 
colnames(dat)
rrrr <- toJSON(dat, dataframe="values")
writeLines(c("vardataSet = ", rrrr, ";"),"dat.js",useBytes =TRUE)
###useBytes 保证存储的数据是UTF-8格式

IUCN_CN.xlsx 数据表对应的各列名称为:

科, 中文科名, 学名, 中文种名,濒危等级, 是否中国特有

因此, 在html文件的Javascript脚本中创建表格对象时, 要设定DataTable对象要展示的各列。

对应的Javascript代码如下:

<script>
 $(document).ready(function(){
   $('#example').DataTable({       
   data:dataSet,       
   columns:[
           { title:   "科"     },//barcode
           { title:   "中文科名"  },//locationof the storage
           { title:   "学名"},
           { title:   "中文名"   },
           { title:   "濒危等级"     },
           { title:   "是否特有"   }
           ],//Link to the photo
     });  
    });      
 </script>

5. 浏览 index.html 文件

保存index.html 文件。 用Firefox或者Chrome打开, 即可浏览。DataTable将导入dat.js数据,并以表格的形式展示出来,并提供表格的查找, 排序等功能。如果已经标本已经数字化, 则可以在R中,生成文件的链接。

本文所述 源代码和数据下载


本文所述 源代码和数据下载  

IUCN.zip



图1. IUCN物种分布示例数据



图2 用DataTable生成的网页版可查询页面




https://m.sciencenet.cn/blog-255662-1055098.html

上一篇:宝天曼随想
下一篇:用HUGO生成静态网站

2 姜小龙 Atrichum

该博文允许注册用户评论 请点击登录 评论 (3 个评论)

数据加载中...
扫一扫,分享此博文

Archiver|手机版|科学网 ( 京ICP备07017567号-12 )

GMT+8, 2022-10-3 18:58

Powered by ScienceNet.cn

Copyright © 2007- 中国科学报社

返回顶部