99 lines
4.1 KiB
HTML
99 lines
4.1 KiB
HTML
<!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">
|
|
<link rel="stylesheet" href="../../lib/datatables/media/css/jquery.dataTables.min.css">
|
|
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
|
|
<link rel="stylesheet" href="../../lib/datatables/media/css/dataTables.jqueryui.css">
|
|
<style>
|
|
</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"></i>
|
|
</button>
|
|
</form>
|
|
</div>
|
|
<!--数据表格-->
|
|
<table id="userTable" class="table table-striped table-bordered" cellspacing="0" width="100%"/>
|
|
</div>
|
|
<!--js逻辑-->
|
|
<script src="../../lib/layui/layui.js"></script>
|
|
<script src="../../lib/datatables/media/js/jquery.js"></script>
|
|
<script src="../../lib/datatables/media/js/jquery.dataTables.min.js"></script>
|
|
<script src="../../lib/datatables/media/js/dataTables.jqueryui.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"});
|
|
|
|
$.fn.dataTable.defaults.oLanguage = {
|
|
"sProcessing": "处理中...",
|
|
"sLengthMenu": "显示 _MENU_ 项结果",
|
|
"sZeroRecords": "没有匹配结果",
|
|
"sInfo": "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
|
|
"sInfoEmpty": "显示第 0 至 0 项结果，共 0 项",
|
|
"sInfoFiltered": "(由 _MAX_ 项结果过滤)",
|
|
"sInfoPostFix": "",
|
|
"sSearch": "搜索：",
|
|
"sUrl": "",
|
|
"sEmptyTable": "表中数据为空",
|
|
"sLoadingRecords": "载入中...",
|
|
"sInfoThousands": ",",
|
|
"oPaginate": {
|
|
"sFirst": "首页",
|
|
"sPrevious": "上页",
|
|
"sNext": "下页",
|
|
"sLast": "末页"
|
|
},
|
|
"oAria": {
|
|
"sSortAscending": ": 以升序排列此列",
|
|
"sSortDescending": ": 以降序排列此列"
|
|
}
|
|
}
|
|
|
|
$("#userTable").DataTable({
|
|
ajax: {
|
|
url: okMock.api.datatables,
|
|
type: "get",
|
|
},
|
|
columns: [
|
|
{data: "id", title: "ID"},
|
|
{data: "username", title: "账号"},
|
|
{data: "password", title: "密码"},
|
|
{data: "nickname", title: "昵称"},
|
|
{data: "name", title: "姓名"},
|
|
{data: "role", title: "角色"},
|
|
{data: "status", title: "状态"},
|
|
{data: "email", title: "邮箱"},
|
|
{data: "phone", title: "手机"},
|
|
{data: "createTime", title: "创建时间"},
|
|
{data: "updateTime", title: "更新时间"},
|
|
]
|
|
});
|
|
|
|
form.on("submit(search)", function (data) {
|
|
return false;
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|