Datatables JSON 服务器

最后修改于 2020 年 7 月 13 日

Datatables JSON 服务器教程演示了如何在 Datatables 组件中显示来自 JSON 服务器的数据。在本教程中，我们使用 Gulp 4 来管理文件。

Datatables

DataTables 是一个 jQuery 插件，用于创建动态 HTML 数据表。它支持分页、排序或搜索等许多功能。

JSON 服务器

json-server 是一个用于创建测试 REST API 的 JavaScript 库。

Datatables 示例

首先，我们使用 faker 生成一些测试数据。

$ mkdir datatables-example
$ cd datatables-example

$ mkdir -p src/js

我们创建 src 和 src/js 目录。这些目录将存放开发文件。分发文件将位于 build 目录中。构建过程由 Gulp 管理。

$ npm init
$ npm i -g json-server

我们初始化一个 Node 项目并安装 json-server。

$ npm i faker fs datatables jquery

我们安装四个依赖项。faker 和 fs 模块用于生成测试数据。datatables 和 jquery 是项目依赖项。

$ npm i -g gulp  
$ npm i --save-dev gulp-minify

我们安装两个开发依赖项：gulp 和 gulp-minify；我们使用它们来构建项目。您可能还需要调用 npm link gulp 来创建与全局 gulp 模块的本地链接。

package.json

{
  "name": "datatables-jsonserver",
  "version": "1.0.0",
  "description": "jQuery Datatable with JSON Server example",
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Jan Bodnar",
  "license": "ISC",
  "devDependencies": {
    "gulp-minify": "^3.1.0"
  },
  "dependencies": {
    "datatables": "^1.10.18",
    "faker": "^4.1.0",
    "fs": "0.0.1-security",
    "jquery": "^3.3.1"
  }
}

这是我们的 package.json 文件。

generate-fake-users.js

const faker = require('faker')
const fs = require('fs')

function generateUsers() {

  let users = []

  for (let id=1; id <= 100; id++) {

    let firstName = faker.name.firstName()
    let lastName = faker.name.lastName()
    let email = faker.internet.email()

    users.push({
      "id": id,
      "first_name": firstName,
      "last_name": lastName,
      "email": email
    })
  }

  return { "data": users }
}

let dataObj = generateUsers();

fs.writeFileSync('data.json', JSON.stringify(dataObj, null, '\t'));

使用 faker，我们生成一百个具有 id、名字、姓氏和电子邮件属性的用户。数据被写入 data.json 文件。该文件由 json-server 使用。

$ tree
.
├── data.json
├── generate-fake-users.js
├── gulpfile.js
├── package.json
├── package-lock.json
└── src
    ├── index.html
    └── js
        └── main.js

这是在安装 node 模块之前的项目结构。

src/index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Home page</title>

  <link rel="stylesheet" type="text/css" href="css/jquery.dataTables.min.css">

</head>
<body>

<table id="mytable" class="display">

</table>

<script src="js/jquery.slim.min.js"></script>
<script src="js/jquery.dataTables.min.js"></script>
<script src="js/main-min.js"></script>

</body>
</html>

数据将显示在 table 标签中。

src/js/main.js

setUpDataTable();

async function setUpDataTable() {

    const res = await fetch('https://:3004/data');
    const data = await res.json();

    var users = data.map(el => Object.values(el));

    $(document).ready( () => {

        $('#mytable').DataTable( {

          data: users,
          columns : [
              { title: "Id" },
              { title: "First name" },
              { title: "Last name" },
              { title: "Email" },
          ]
      });
    });
}

在 main.js 中，我们设置数据表。

const res = await fetch('https://:3004/data');
const data = await res.json();

我们从 JSON 服务器获取数据。使用 await，我们可以等待 Promise 完成。

var users = data.map(el => Object.values(el));

返回的数据是 JSON 对象数组的形式。我们将其转换为 Datatables 理解的 JavaScript 数组的数组格式。

$(document).ready( () => {

    $('#mytable').DataTable( {

      data: users,
      columns : [
          { title: "Id" },
          { title: "First name" },
          { title: "Last name" },
          { title: "Email" },
      ]
  });
});

我们初始化 DataTable 组件。我们添加数据并指定列名。

gulpfile.js

const gulp = require("gulp");
const minify = require("gulp-minify");

gulp.task('copyHtml', () => {
  return gulp.src('src/index.html')
    .pipe(gulp.dest('build'))
})

gulp.task('copyJS', () => {
  return gulp.src(['node_modules/datatables/media/js/jquery.dataTables.min.js',
      'node_modules/jquery/dist/jquery.slim.min.js'])
    .pipe(gulp.dest('build/js'))
})

gulp.task('copyCSS', () => {
  return gulp.src('node_modules/datatables/media/css/jquery.dataTables.min.css')
    .pipe(gulp.dest('build/css'))
})

gulp.task('minify', () => {
  return gulp.src('src/js/main.js') 
    .pipe(minify({noSource: true}))
    .pipe(gulp.dest('build/js'))
})

gulp.task('default', gulp.series([ 'copyHtml', 'minify', 'copyJS', 'copyCSS']));

这是 gulpfile.js。该文件包含管理我们应用程序的 Gulp 任务。在我们的例子中，它复制项目数据并压缩 main.js 文件。

$ gulp
[15:57:51] Using gulpfile ~/tmp/datatable-jsonserver/gulpfile.js
[15:57:51] Starting 'copyHtml'...
[15:57:51] Starting 'minify'...
[15:57:51] Starting 'copyJS'...
[15:57:51] Starting 'copyCSS'...
[15:57:51] Finished 'minify' after 168 ms
[15:57:51] Finished 'copyHtml' after 185 ms
[15:57:51] Finished 'copyCSS' after 161 ms
[15:57:51] Finished 'copyJS' after 167 ms
[15:57:51] Starting 'default'...
[15:57:51] Finished 'default' after 47 μs

我们构建项目。文件现在位于 build 目录中。

$ json-server --watch data.json --port 3004

我们启动 JSON 服务器。

$ firefox build/index.html

我们启动主页。

Displaying data in DataTable component — 图示：在 DataTable 组件中显示数据

在本教程中，我们展示了如何在 jQuery DataTable 组件中显示来自 JSON 服务器的数据。项目由 Gulp 管理。

电子书

Datatables JSON 服务器

Datatables

JSON 服务器

Datatables 示例