| ||||||||
后台数据使用java,可用Eclipse打开项目文件查看源码。或者将WebRoot下的文件解压到tomcat下直接运行。 简要说明:
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; } } |
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 ; } } } |
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); %> |
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 > |
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>' ; } } } }; |
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( '请先选中要操作的行' ); } } }; |