diff --git a/data/navs.json b/data/navs.json
index b210d6d..40068e4 100644
--- a/data/navs.json
+++ b/data/navs.json
@@ -273,7 +273,7 @@
         "children": [
             {
                 "title": "Datatables",
-                "href": "http://www.datatables.club",
+                "href": "pages/datatable/datatables.html",
                 "icon": "&#xe62e;",
                 "spread": false
             },
diff --git a/pages/datatable/datatables.html b/pages/datatable/datatables.html
new file mode 100644
index 0000000..96bf715
--- /dev/null
+++ b/pages/datatable/datatables.html
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <title>Datatables</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+    <link rel="stylesheet" href="../../css/oksub.css">
+    <style>
+        #bsgrid {
+            width: 100%;
+            margin-top: 10px;
+        }
+    </style>
+</head>
+<body>
+    <div class="ok-body">
+        <!--模糊搜索区域-->
+        <div class="layui-row">
+            <form class="layui-form layui-col-md12 ok-search">
+                <input class="layui-input" placeholder="开始日期" autocomplete="off" id="startTime" name="startTime">
+                <input class="layui-input" placeholder="截止日期" autocomplete="off" id="endTime" name="endTime">
+                <input class="layui-input" placeholder="账号" autocomplete="off" name="username">
+                <button class="layui-btn" lay-submit="" lay-filter="search">
+                    <i class="layui-icon">&#xe615;</i>
+                </button>
+            </form>
+        </div>
+        <!--数据表格-->
+        <table id="bsgrid">
+            <tr>
+                <th w_index="id" w_check="true"></th>
+                <th w_index="id">ID</th>
+                <th w_index="username" w_align="left">账号</th>
+                <th w_index="password" w_align="left">密码</th>
+                <th w_index="nickname">昵称</th>
+                <th w_index="name">姓名</th>
+                <th w_index="role" w_render="roleFmt" w_align="left">角色</th>
+                <th w_index="status" w_render="statusFmt">状态</th>
+                <th w_index="email" w_align="left">邮箱</th>
+                <th w_index="phone">手机</th>
+                <th w_index="createTime">创建时间</th>
+                <th w_index="updateTime">修改时间</th>
+                <th w_render="toolbar" w_align="center">工具栏</th>
+            </tr>
+        </table>
+    </div>
+    <!--js逻辑-->
+    <script src="../../lib/layui/layui.js"></script>
+    <script>
+        layui.use(["element", "util", "form", "laydate", "okMock", "okUtils"], function () {
+            let util = layui.util;
+            let okMock = layui.okMock;
+            let form = layui.form;
+            let laydate = layui.laydate;
+
+            util.fixbar({});
+
+            laydate.render({elem: "#startTime", type: "datetime"});
+            laydate.render({elem: "#endTime", type: "datetime"});
+
+
+            form.on("submit(search)", function (data) {
+                return false;
+            });
+        });
+    </script>
+</body>
+</html>
