警告
查询失败

后台数据使用java,可用Eclipse打开项目文件查看源码。或者将WebRoot下的文件解压到tomcat下直接运行。 简要说明:

下载地址: 自行封装请求和返回数据的零耦合服务端分页
代码片段(java部分):
User.java
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
package com.thxopen.dt.bean;
 
/**
 * Created by Administrator on 2015/4/13.
 */
public class User {
 
    public String name;
    public String position;
    public String salary;
    public String start_date;
    public String office;
    public String extn;
    public Integer status;
    public Integer role;
 
    public User(String name, String position, String salary, String start_date, String office, String extn, Integer status, Integer role) {
        this.name = name;
        this.position = position;
        this.salary = salary;
        this.start_date = start_date;
        this.office = office;
        this.extn = extn;
        this.status = status;
        this.role = role;
    }
 
    public String getName() {
 
        return name;
    }
 
    public void setName(String name) {
        this.name = name;
    }
 
    public String getPosition() {
        return position;
    }
 
    public void setPosition(String position) {
        this.position = position;
    }
 
    public String getSalary() {
        return salary;
    }
 
    public void setSalary(String salary) {
        this.salary = salary;
    }
 
    public String getStart_date() {
        return start_date;
    }
 
    public void setStart_date(String start_date) {
        this.start_date = start_date;
    }
 
    public String getOffice() {
        return office;
    }
 
    public void setOffice(String office) {
        this.office = office;
    }
 
    public String getExtn() {
        return extn;
    }
 
    public void setExtn(String extn) {
        this.extn = extn;
    }
 
    public Integer getStatus() {
        return status;
    }
 
    public void setStatus(Integer status) {
        this.status = status;
    }
 
    public Integer getRole() {
        return role;
    }
 
    public void setRole(Integer role) {
        this.role = role;
    }
}
Config.java
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
package com.thxopen.dt.sys;
 
import javax.servlet.ServletContext;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.SQLException;
 
/**
 * Created by Administrator on 2015/4/16.
 */
public class Config {
    String deUrl= "jdbc:sqlite:/";
    public String url = "";
    public ServletContext application;
 
    public  Config(ServletContext application){
        this.application = application;
        try {
            Class.forName("org.sqlite.JDBC");
        } catch (ClassNotFoundException e) {
            e.printStackTrace();
        }
    }
 
    public Connection getConn(){
        url = deUrl+application.getRealPath("").replace("\\", "/") + "/dt.sqlite3";
//        url = deUrl + "d:\\workspaces\\workspaces\\Datatables-serverSide\\web\\".replace("\\", "/") + "/dt.sqlite3";
        try {
            return DriverManager.getConnection(url);
        } catch (SQLException e) {
            e.printStackTrace();
            return null;
        }
    }
}
页面部分:
datasource.jsp
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
<%@ page import="java.sql.ResultSet" %>
<%@ page import="java.sql.Statement" %>
<%@ page import="java.sql.DriverManager" %>
<%@ page import="java.sql.Connection" %>
<%@ page import="com.thxopen.dt.bean.User" %>
<%@ page import="com.google.gson.*" %>
<%@ page import="java.util.*" %>
<%@ page import="java.net.URLDecoder" %>
<%@ page import="com.thxopen.dt.sys.Config" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
 
    ResultSet rs = null;
    Statement stmt = null;
    Connection conn = new Config(application).getConn();
    String table = "user";
 
    //数据起始位置
    String startIndex = request.getParameter("startIndex");
    //数据长度
    String pageSize = request.getParameter("pageSize");
 
    //总记录数
    String total = "0";
 
    //定义列名
    String[] cols = {"name", "position", "salary", "start_date", "office", "extn", "status", "role"};
    //获取客户端需要那一列排序
    String orderColumn = request.getParameter("orderColumn");
    if(orderColumn == null){
        orderColumn = "name";
    }
 
    //获取排序方式 默认为asc
    String orderDir = request.getParameter("orderDir");
    if(orderDir == null){
        orderDir = "asc";
    }
 
    //获取用户过滤框里的字符
    List<String> sArray = new ArrayList<String>();
 
    String fuzzy = request.getParameter("fuzzySearch");
    if("true".equals(fuzzy)){
        String searchValue = request.getParameter("fuzzy");
        if (searchValue!=null&&!searchValue.equals("")) {
            sArray.add(" name like '%" + searchValue + "%'");
            sArray.add(" position like '%" + searchValue + "%'");
            sArray.add(" salary like '%" + searchValue + "%'");
            sArray.add(" start_date like '%" + searchValue + "%'");
            sArray.add(" office like '%" + searchValue + "%'");
            sArray.add(" extn like '%" + searchValue + "%'");
        }
    }else{
        String name = request.getParameter("name");
        if (name!=null&&!name.equals("")) {
            sArray.add(" name like '%" + name + "%'");
        }
        String position = request.getParameter("position");
        if (position!=null&&!position.equals("")) {
            sArray.add(" position like '%" + position + "%'");
        }
        String office = request.getParameter("office");
        if (office!=null&&!office.equals("")) {
            sArray.add(" office like '%" + office + "%'");
        }
        String extn = request.getParameter("extn");
        if (extn!=null&&!extn.equals("")) {
            sArray.add(" extn like '%" + extn + "%'");
        }
        String role = request.getParameter("role");
        if (role!=null&&!role.equals("")) {
            sArray.add(" role = " + role + "");
        }
        String status = request.getParameter("status");
        if (status!=null&&!status.equals("")) {
            sArray.add(" status = " + status + "");
        }
    }
 
    String individualSearch = "";
    if (sArray.size() == 1) {
        individualSearch = sArray.get(0);
    } else if (sArray.size() > 1) {
        for (int i = 0; i < sArray.size() - 1; i++) {
            individualSearch += sArray.get(i) + " or ";
        }
        individualSearch += sArray.get(sArray.size() - 1);
    }
 
    List<User> users = new ArrayList<User>();
    if (conn != null) {
        String recordsTotalSql = "select count(1) as total from " + table;
        stmt = conn.createStatement();
 
        String searchSQL = "";
        String sql = "SELECT * FROM " + table;
        if (individualSearch != "") {
            searchSQL = " where " + individualSearch;
        }
        sql += searchSQL;
        recordsTotalSql += searchSQL;
        sql += " order by " + orderColumn + " " + orderDir;
        recordsTotalSql += " order by " + orderColumn + " " + orderDir;
        sql += " limit " + startIndex + ", " + pageSize;
 
 
        rs = stmt.executeQuery(sql);
        while (rs.next()) {
            users.add(new User(rs.getString("name"),
                    rs.getString("position"),
                    rs.getString("salary"),
                    rs.getString("start_date"),
                    rs.getString("office"),
                    rs.getString("extn"),
                    rs.getInt("status"),
                    rs.getInt("role")
                    ));
        }
 
        rs = stmt.executeQuery(recordsTotalSql);
        while (rs.next()) {
            total = rs.getString("total");
        }
    }
 
 
    Map<Object, Object> info = new HashMap<Object, Object>();
    info.put("pageData", users);
    info.put("total", total);
    String json = new Gson().toJson(info);
    rs.close();
    stmt.close();
    conn.close();
    out.write(json);
%>
index.htm
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
<!DOCTYPE html>
<html>
<head>
<title>Datatable-serverSide 自行封装请求参数和返回数据例子</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="asset/lib/bootstrap-2.3.2/css/bootstrap.min.css" media="screen">
<link rel="stylesheet" href="asset/lib/bootstrap-2.3.2/css/bootstrap-responsive.min.css" media="screen">
<!-- FontAwesome -->
<link rel="stylesheet" href="asset/lib/font-awesome-4.2.0/css/font-awesome.min.css">
<!-- DataTables CSS start-->
<link rel="stylesheet" href="asset/lib/dataTables-1.10.7/plugins/integration/bootstrap/2/dataTables.bootstrap.css">
<link rel="stylesheet" href="asset/lib/dataTables-1.10.7/plugins/integration/font-awesome/dataTables.fontAwesome.css">
<!-- DataTables CSS end-->
 
<link rel="stylesheet" href="asset/css/user-manage.css">
</head>
<body>
    <div class="container-fluid">
        <div class="row-fluid">
            <div class="span12" id="content">
                <div class="row-fluid">
                    <div class="navbar" id="breadcrumb">
                        <div class="navbar-inner">
                            <ul class="breadcrumb">
                                <li>
                                    <a href="#">首页</a>
                                    <span class="divider">/</span>
                                </li>
                                <li class="active">用户管理</li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="row-fluid">
                    <div class="span12">
                        <div class="btn-toolbar">
                            <div class="pull-right">
                                <div class="input-append">
                                    <input type="text" placeholder="模糊查询" id="fuzzy-search">
                                    <div class="btn-group">
                                        <button type="button" class="btn" id="btn-simple-search"><i class="fa fa-search"></i></button>
                                        <button type="button" class="btn" title="高级查询" id="toggle-advanced-search">
                                            <i class="fa fa-angle-double-down"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>
                            <button type="button" class="btn btn-primary" id="btn-add"><i class="fa fa-plus"></i> 添加</button>
                            <button type="button" class="btn btn-danger" id="btn-del"><i class="fa fa-remove"></i> 批量删除</button>
                        </div>
                    </div>
                </div>
                <div class="row-fluid" style="display:none;" id="div-advanced-search">
                    <form class="form-inline well">
                        <span>姓名:</span>
                        <input type="text" class="input-medium" placeholder="姓名" id="name-search">
                        <span>职位:</span>
                        <input type="text" class="input-medium" placeholder="职位" id="position-search">
                        <span>工作地点:</span>
                        <input type="text" class="input-medium" placeholder="工作地点" id="office-search">
                        <span>编号:</span>
                        <input type="text" class="input-medium" placeholder="编号" id="extn-search">
                        <span>在线状态:</span>
                        <select class="input-small" id="status-search">
                            <option value="">全部</option>
                            <option value="1">在线</option>
                            <option value="0">离线</option>
                        </select>
                        <select class="input-small" id="role-search">
                            <option value="">全部</option>
                            <option value="1">管理员</option>
                            <option value="0">操作员</option>
                        </select>
                        <button type="button" class="btn" id="btn-advanced-search"><i class="fa fa-search"></i> 查询</button>
                    </form>
                </div>
                <div class="block info-block" id="user-view">
                    <div class="navbar navbar-inner block-header">
                        <div class="block-title">用户详情</div>
                        <div class="header-buttons">
                            <button type="button" class="btn btn-primary" id="btn-view-edit">修改</button>
                        </div>
                    </div>
                    <div class="block-content info-content clearfix">
                        <div class="row-fluid">
                            <div class="span4">
                                <label class="prop-name">编号:</label>
                                <div class="prop-value" id="extn-view"></div>
                            </div>
                            <div class="span4">
                                <label class="prop-name">姓名:</label>
                                <div class="prop-value" id="name-view"></div>
                            </div>
                            <div class="span4">
                                <label class="prop-name">角色:</label>
                                <div class="prop-value" id="role-view"></div>
                            </div>
                        </div>
                        <div class="row-fluid">
                            <div class="span4">
                                <label class="prop-name">职位:</label>
                                <div class="prop-value" id="position-view"></div>
                            </div>
                            <div class="span4">
                                <label class="prop-name">薪水:</label>
                                <div class="prop-value" id="salary-view"></div>
                            </div>
                            <div class="span4">
                                <label class="prop-name">状态:</label>
                                <div class="prop-value" id="status-view"></div>
                            </div>
                        </div>
                        <div class="row-fluid">
                            <div class="span4">
                                <label class="prop-name">入职时间:</label>
                                <div class="prop-value" id="start-date-view"></div>
                            </div>
                            <div class="span8">
                                <label class="prop-name">办公地点:</label>
                                <div class="prop-value" id="office-view"></div>
                            </div>
                        </div>
                        <div class="row-fluid">
                            <div class="span12">
                                <label class="prop-name">备注:</label>
                                <div class="prop-value"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="block info-block" id="user-add" style="display:none;">
                    <div class="navbar navbar-inner block-header">
                        <div class="block-title">添加账户</div>
                        <div class="header-buttons">
                            <button type="button" class="btn btn-primary" id="btn-save-add">确定添加</button>
                            <button type="button" class="btn btn-cancel">取消</button>
                        </div>
                    </div>
                    <div class="block-content info-content clearfix">
                        <form id="form-add">
                            <div class="control-group">
                                <label class="control-label" for="extn-add"><span
                                    class="red-asterisk">*</span>编号:</label>
                                <div class="controls">
                                    <input type="text" id="extn-add" name="extn-add">
                                </div>
                            </div>
                            <div class="control-group">
                                <label class="control-label" for="name-add"><span
                                    class="red-asterisk">*</span>姓名:</label>
                                <div class="controls">
                                    <input type="text" id="name-add" name="name-add">
                                </div>
                            </div>
                            <div class="control-group">
                                <label class="control-label" for="role-add">角色:</label>
                                <div class="controls">
                                    <select id="role-add" name="role-add">
                                        <option value="1" selected>管理员</option>
                                        <option value="0">操作员</option>
                                    </select>
                                </div>
                            </div>
                            <div class="control-group">
                                <label class="control-label" for="position-add">职位:</label>
                                <div class="controls">
                                    <input type="text" id="position-add" name="position-add">
                                </div>
                            </div>
                            <div class="control-group">
                                <label class="control-label" for="salary-add">薪水:</label>
                                <div class="controls">
                                    <input type="text" id="salary-add" name="salary-add">
                                </div>
                            </div>
                            <div class="control-group">
                                <label class="control-label" for="start-date-add">入职时间:</label>
                                <div class="controls">
                                    <input type="text" id="start-date-add" name="start-date-add">
                                </div>
                            </div>
                            <div class="control-group">
                                <label class="control-label" for="office-add">办公地点:</label>
                                <div class="controls">
                                    <input type="text" class="xlarge" id="office-add" name="office-add">
                                </div>
                            </div>
                            <div class="control-group">
                                <label class="control-label" for="remark-add">备注:</label>
                                <div class="controls">
                                    <input type="text" class="xxxlarge" id="remark-add" name="remark-add">
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
                <div class="block info-block" id="user-edit" style="display:none;">
                    <div class="navbar navbar-inner block-header">
                        <div class="block-title">修改账户:<span id="title-edit"></span></div>
                        <div class="header-buttons">
                            <button type="button" class="btn btn-primary" id="btn-save-edit">保存更改</button>
                            <button type="button" class="btn btn-cancel">取消</button>
                        </div>
                    </div>
                    <div class="block-content info-content clearfix">
                        <form id="form-edit">
                            <div class="control-group">
                                <label class="control-label" for="extn-edit"><span
                                    class="red-asterisk">*</span>编号:</label>
                                <div class="controls">
                                    <input type="text" id="extn-edit" name="extn-edit">
                                </div>
                            </div>
                            <div class="control-group">
                                <label class="control-label" for="name-edit"><span
                                    class="red-asterisk">*</span>姓名:</label>
                                <div class="controls">
                                    <input type="text" id="name-edit" name="name-edit">
                                </div>
                            </div>
                            <div class="control-group">
                                <label class="control-label" for="role-edit">角色:</label>
                                <div class="controls">
                                    <select id="role-edit" name="role-edit">
                                        <option value="1" selected>管理员</option>
                                        <option value="0">操作员</option>
                                    </select>
                                </div>
                            </div>
                            <div class="control-group">
                                <label class="control-label" for="position-edit">职位:</label>
                                <div class="controls">
                                    <input type="text" id="position-edit" name="position-edit">
                                </div>
                            </div>
                            <div class="control-group">
                                <label class="control-label" for="salary-edit">薪水:</label>
                                <div class="controls">
                                    <input type="text" id="salary-edit" name="salary-edit">
                                </div>
                            </div>
                            <div class="control-group">
                                <label class="control-label" for="start-date-edit">入职时间:</label>
                                <div class="controls">
                                    <input type="text" id="start-date-edit" name="start-date-edit">
                                </div>
                            </div>
                            <div class="control-group">
                                <label class="control-label" for="office-edit">办公地点:</label>
                                <div class="controls">
                                    <input type="text" class="xlarge" id="office-edit" name="office-edit">
                                </div>
                            </div>
                            <div class="control-group">
                                <label class="control-label" for="remark-edit">备注:</label>
                                <div class="controls">
                                    <input type="text" class="xxxlarge" id="remark-edit" name="remark-edit">
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
                <div class="row-fluid">
                    <div class="span12" id="div-table-container">
                        <table class="table table-striped table-bordered table-hover table-condensed" id="table-user" cellspacing="0" width="100%">
                            <thead>
                                <tr>
                                    <th>
                                        <input type="checkbox" name="cb-check-all">
                                    </th>
                                    <th>姓名</th>
                                    <th>职位</th>
                                    <th>状态</th>
                                    <th>入职时间</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody>
                            </tbody>
                            <tfoot>
                                <tr>
                                    <th>
                                        <input type="checkbox" name="cb-check-all">
                                    </th>
                                    <th>姓名</th>
                                    <th>职位</th>
                                    <th>状态</th>
                                    <th>入职时间</th>
                                    <th>操作</th>
                                </tr>
                            </tfoot>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="asset/lib/json2.js"></script>
    <!-- JQuery -->
    <script src="asset/lib/jquery-1.11.3.min.js"></script>
    <!-- Bootstrap -->
    <script src="asset/lib/bootstrap-2.3.2/js/bootstrap.min.js"></script>
    <!-- SpinJS-->
    <script src="asset/lib/spin-2.1.0/jquery.spin.merge.js"></script>
    <!-- lhgdialog -->
    <script src="asset/lib/lhgdialog-4.2.0/lhgdialog.js?skin=bootstrap2"></script>
    <!-- DataTables JS-->
    <script src="asset/lib/dataTables-1.10.7/media/js/jquery.dataTables.js"></script>
    <script src="asset/lib/dataTables-1.10.7/plugins/integration/bootstrap/2/dataTables.bootstrap.js"></script>
    <!-- DataTables JS end-->
    <script src="asset/js/constant.js"></script>
    <script src="asset/js/user-manage.js"></script>
</body>
</html>
constant.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
/*常量*/
var CONSTANT = {
        DATA_TABLES : {
            DEFAULT_OPTION : { //DataTables初始化选项
                language: {
                    "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":     "末页",
                        "sJump":     "跳转"
                    },
                    "oAria": {
                        "sSortAscending"": 以升序排列此列",
                        "sSortDescending": ": 以降序排列此列"
                    }
                },
                autoWidth: false,   //禁用自动调整列宽
                stripeClasses: ["odd", "even"],//为奇偶行加上样式,兼容不支持CSS伪类的场合
                order: [],          //取消默认排序查询,否则复选框一列会出现小箭头
                processing: false//隐藏加载提示,自行处理
                serverSide: true,   //启用服务器端分页
                searching: false    //禁用原生搜索
            },
            COLUMN: {
                CHECKBOX: { //复选框单元格
                    className: "td-checkbox",
                    orderable: false,
                    width: "30px",
                    data: null,
                    render: function (data, type, row, meta) {
                        return '<input type="checkbox" class="iCheck">';
                    }
                }
            },
            RENDER: {   //常用render可以抽取出来,如日期时间、头像等
                ELLIPSIS: function (data, type, row, meta) {
                    data = data||"";
                    return '<span title="' + data + '">' + data + '</span>';
                }
            }
        }
};
user-manage.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
$(function (){
    var $wrapper = $('#div-table-container');
    var $table = $('#table-user');
 
    var _table = $table.dataTable($.extend(true,{},CONSTANT.DATA_TABLES.DEFAULT_OPTION, {
        ajax : function(data, callback, settings) {//ajax配置为function,手动调用异步查询
            //手动控制遮罩
            $wrapper.spinModal();
            //封装请求参数
            var param = userManage.getQueryCondition(data);
            $.ajax({
                    type: "GET",
                    url: "datasource.jsp",
                    cache : false//禁用缓存
                    data: param,    //传入已封装的参数
                    dataType: "json",
                    success: function(result) {
                        //setTimeout仅为测试延迟效果
                        setTimeout(function(){
                            //异常判断与处理
                            if (result.errorCode) {
                                $.dialog.alert("查询失败。错误码:"+result.errorCode);
                                return;
                            }
 
                            //封装返回数据,这里仅演示了修改属性名
                            var returnData = {};
                            returnData.draw = data.draw;//这里直接自行返回了draw计数器,应该由后台返回
                            returnData.recordsTotal = result.total;
                            returnData.recordsFiltered = result.total;//后台不实现过滤功能,每次查询均视作全部结果
                            returnData.data = result.pageData;
                            //关闭遮罩
                            $wrapper.spinModal(false);
                            //调用DataTables提供的callback方法,代表数据已封装完成并传回DataTables进行渲染
                            //此时的数据需确保正确无误,异常判断应在执行此回调前自行处理完毕
                            callback(returnData);
                        },200);
                    },
                    error: function(XMLHttpRequest, textStatus, errorThrown) {
                        $.dialog.alert("查询失败");
                        $wrapper.spinModal(false);
                    }
                });
        },
        columns: [
            CONSTANT.DATA_TABLES.COLUMN.CHECKBOX,
            {
                className : "ellipsis", //文字过长时用省略号显示,CSS实现
                data: "name",
                render : CONSTANT.DATA_TABLES.RENDER.ELLIPSIS,//会显示省略号的列,需要用title属性实现划过时显示全部文本的效果
            },
            {
                className : "ellipsis",
                data: "position",
                render : CONSTANT.DATA_TABLES.RENDER.ELLIPSIS,
                //固定列宽,但至少留下一个活动列不要固定宽度,让表格自行调整。不要将所有列都指定列宽,否则页面伸缩时所有列都会随之按比例伸缩。
                //切记设置table样式为table-layout:fixed; 否则列宽不会强制为指定宽度,也不会出现省略号。
                width : "80px"
            },
            {
                data : "status",
                width : "80px",
                render : function(data,type, row, meta) {
                    return '<i class="fa fa-male"></i> '+(data?"在线":"离线");
                }
            },
            {
                data : "start_date",
                width : "80px"
            },
             {
                className : "td-operation",
                data: null,
                defaultContent:"",
                orderable : false,
                width : "120px"
            }
        ],
        "createdRow": function ( row, data, index ) {
            //行渲染回调,在这里可以对该行dom元素进行任何操作
            //给当前行加样式
            if (data.role) {
                $(row).addClass("info");
            }
            //给当前行某列加样式
            $('td', row).eq(3).addClass(data.status?"text-success":"text-error");
            //不使用render,改用jquery文档操作呈现单元格
            var $btnEdit = $('<button type="button" class="btn btn-small btn-primary btn-edit">修改</button>');
            var $btnDel = $('<button type="button" class="btn btn-small btn-danger btn-del">删除</button>');
            $('td', row).eq(5).append($btnEdit).append($btnDel);
 
        },
        "drawCallback": function( settings ) {
            //渲染完毕后的回调
            //清空全选状态
            $(":checkbox[name='cb-check-all']",$wrapper).prop('checked', false);
            //默认选中第一行
            $("tbody tr",$table).eq(0).click();
        }
    })).api();//此处需调用api()方法,否则返回的是JQuery对象而不是DataTables的API对象
 
    $("#btn-add").click(function(){
        userManage.addItemInit();
    });
 
    $("#btn-del").click(function(){
        var arrItemId = [];
        $("tbody :checkbox:checked",$table).each(function(i) {
            var item = _table.row($(this).closest('tr')).data();
            arrItemId.push(item);
        });
        userManage.deleteItem(arrItemId);
    });
 
    $("#btn-simple-search").click(function(){
        userManage.fuzzySearch = true;
 
        //reload效果与draw(true)或者draw()类似,draw(false)则可在获取新数据的同时停留在当前页码,可自行试验
//      _table.ajax.reload();
//      _table.draw(false);
        _table.draw();
    });
 
    $("#btn-advanced-search").click(function(){
        userManage.fuzzySearch = false;
        _table.draw();
    });
 
    $("#btn-save-add").click(function(){
        userManage.addItemSubmit();
    });
 
    $("#btn-save-edit").click(function(){
        userManage.editItemSubmit();
    });
 
    //行点击事件
    $("tbody",$table).on("click","tr",function(event) {
        $(this).addClass("active").siblings().removeClass("active");
        //获取该行对应的数据
        var item = _table.row($(this).closest('tr')).data();
        userManage.currentItem = item;
        userManage.showItemDetail(item);
    });
 
    $table.on("change",":checkbox",function() {
        if ($(this).is("[name='cb-check-all']")) {
            //全选
            $(":checkbox",$table).prop("checked",$(this).prop("checked"));
        }else{
            //一般复选
            var checkbox = $("tbody :checkbox",$table);
            $(":checkbox[name='cb-check-all']",$table).prop('checked', checkbox.length == checkbox.filter(':checked').length);
        }
    }).on("click",".td-checkbox",function(event) {
        //点击单元格即点击复选框
        !$(event.target).is(":checkbox") && $(":checkbox",this).trigger("click");
    }).on("click",".btn-edit",function() {
        //点击编辑按钮
        var item = _table.row($(this).closest('tr')).data();
        $(this).closest('tr').addClass("active").siblings().removeClass("active");
        userManage.currentItem = item;
        userManage.editItemInit(item);
    }).on("click",".btn-del",function() {
        //点击删除按钮
        var item = _table.row($(this).closest('tr')).data();
        $(this).closest('tr').addClass("active").siblings().removeClass("active");
        userManage.deleteItem([item]);
    });
 
    $("#toggle-advanced-search").click(function(){
        $("i",this).toggleClass("fa-angle-double-down fa-angle-double-up");
        $("#div-advanced-search").slideToggle("fast");
    });
 
    $("#btn-info-content-collapse").click(function(){
        $("i",this).toggleClass("fa-minus fa-plus");
        $("span",this).toggle();
        $("#user-view .info-content").slideToggle("fast");
    });
 
    $("#btn-view-edit").click(function(){
        userManage.editItemInit(userManage.currentItem);
    });
 
    $(".btn-cancel").click(function(){
        userManage.showItemDetail(userManage.currentItem);
    });
});
 
var userManage = {
    currentItem : null,
    fuzzySearch : true,
    getQueryCondition : function(data) {
        var param = {};
        //组装排序参数
        if (data.order&&data.order.length&&data.order[0]) {
            switch (data.order[0].column) {
            case 1:
                param.orderColumn = "name";
                break;
            case 2:
                param.orderColumn = "position";
                break;
            case 3:
                param.orderColumn = "status";
                break;
            case 4:
                param.orderColumn = "start_date";
                break;
            default:
                param.orderColumn = "name";
                break;
            }
            param.orderDir = data.order[0].dir;
        }
        //组装查询参数
        param.fuzzySearch = userManage.fuzzySearch;
        if (userManage.fuzzySearch) {
            param.fuzzy = $("#fuzzy-search").val();
        }else{
            param.name = $("#name-search").val();
            param.position = $("#position-search").val();
            param.office = $("#office-search").val();
            param.extn = $("#extn-search").val();
            param.status = $("#status-search").val();
            param.role = $("#role-search").val();
        }
        //组装分页参数
        param.startIndex = data.start;
        param.pageSize = data.length;
 
        return param;
    },
    showItemDetail : function(item) {
        $("#user-view").show().siblings(".info-block").hide();
        if (!item) {
            $("#user-view .prop-value").text("");
            return;
        }
        $("#name-view").text(item.name);
        $("#position-view").text(item.position);
        $("#salary-view").text(item.salary);
        $("#start-date-view").text(item.start_date);
        $("#office-view").text(item.office);
        $("#extn-view").text(item.extn);
        $("#role-view").text(item.role?"管理员":"操作员");
        $("#status-view").text(item.status?"在线":"离线");
    },
    addItemInit : function() {
        $("#form-add")[0].reset();
 
        $("#user-add").show().siblings(".info-block").hide();
    },
    editItemInit : function(item) {
        if (!item) {
            return;
        }
        $("#form-edit")[0].reset();
        $("#title-edit").text(item.name);
        $("#name-edit").val(item.name);
        $("#position-edit").val(item.position);
        $("#salary-edit").val(item.salary);
        $("#start-date-edit").val(item.start_date);
        $("#office-edit").val(item.office);
        $("#extn-edit").val(item.extn);
        $("#role-edit").val(item.role);
        $("#user-edit").show().siblings(".info-block").hide();
    },
    addItemSubmit : function() {
        $.dialog.tips('保存当前添加用户');
    },
    editItemSubmit : function() {
        $.dialog.tips('保存当前编辑用户');
    },
    deleteItem : function(selectedItems) {
        var message;
        if (selectedItems&&selectedItems.length) {
            if (selectedItems.length == 1) {
                message = "确定要删除 '"+selectedItems[0].name+"' 吗?";
 
            }else{
                message = "确定要删除选中的"+selectedItems.length+"项记录吗?";
            }
            $.dialog.confirmDanger(message, function(){
                $.dialog.tips('执行删除操作');
            });
        }else{
            $.dialog.tips('请先选中要操作的行');
        }
    }
};