2017-05-15

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

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

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

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

1. 创建文件夹

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

2. 下载DataTables库

解压缩到IUCN文件夹下。以版本DataTables-1.10.15为例，所有内容解压缩到C:Users/jlzhang/Desktop/IUCN/DataTables-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>

其中：

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

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

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

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

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

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

1	<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生成的网页版可查询页面