1、在页面中引入datatables需要的js及css文件，定义一个表格
<link rel="stylesheet" href="/script/libs/DataTables/datatables.min.css" type="text/css" />
<link rel="stylesheet" href="/script/c_hr_employee.css">
<script type="text/javascript" src="/script/libs/jquery-1.8.3.js" ></script>
<script type="text/javascript" src="/script/libs/DataTables/datatables.min.js"></script>
<script type="text/javascript" src="/script/libs/DataTables/constant.js" ></script>
<script type="text/javascript" src="/script/l_hr_employee.js" ></script>
<div id="dv_eeFind" style="left: 15px;">
<form id="eeFind_form">
账号 <input type="text" name="username" class="myinput" />
姓名 <input type="text" name="employee.name" class="myinput" />
工号 <input type="text" name="employee.num" class="myinput" />
部门 <select id="dept" name="employee.deptId" class="myselectt">
<option selected="selected" disabled="disabled" style="display: none;" value="">选择部门</option>
<c:forEach items="${depts }" var="dept">
<option value="${dept.id }">${dept.name }</option>
</c:forEach>
</select>
状态 <select id="status" name="employee.status" class="myselectt">
<option selected="selected" disabled="disabled" style="display: none;" value="">选择状态</option>
<c:forEach items="${jobStatus }" var="status">
<option value="${status.kid }">${status.item }</option>
</c:forEach>
</select><br/>
工作性质 <select id="jtype" name="employee.jtype" class="myselectt">
<option selected="selected" disabled="disabled" style="display: none;" value="">选择类别</option>
<c:forEach items="${jobCategory }" var="jtype">
<option value="${jtype.kid }">${jtype.item }</option>
</c:forEach>
</select>
入职日期 <input type="text" name="edate" class="myinput Wdate"
onclick="WdatePicker({dateFmt:'yyyy-MM',readOnly:true})" style="width: 120px;" />
转正日期 <input type="text" name="jdate" class="myinput Wdate"
onclick="WdatePicker({dateFmt:'yyyy-MM',readOnly:true})" style="width: 120px;margin-top: 10px;" />
<!-- onpicked:pageQueryEmployee表示当我们选择了时间后，就会触发事件，执行pageQueryEmployee()js函数中的功能 -->
离职日期 <input type="text" name="ddate" class="myinput Wdate"
onclick="WdatePicker({dateFmt:'yyyy-MM',readOnly:true})" style="width: 120px;" />
生日月份 <input type="text" name="bmonth" class="myinput Wdate"
onclick="WdatePicker({dateFmt:'MM',readOnly:true})" style="width: 120px;" />
<a id="eeQueryBtn" type="button" class="bg_btn" >查询</a>
</form>
</div>
<div id="dv_eeTable" class="table-responsive">
<!-- 显示入职员工基本信息表格-start -->
<div id="einfo_table">
<table id="eeInfoTable" class="table table-striped table-bordered table-condensed order_table">
<thead>
<tr>
<th class='text-center' id="e_num">工号</th>
<th class='text-center' id="e_name">姓名 </th>
<th class='text-center' id="e_uname">账号 </th>
<th class='text-center' id="e_dept_name">部门 </th>
<th class='text-center' id="e_job_name">职位 </th>
<th class='text-center' id="e_sex">性别 </th>
<th class='text-center' id="e_tel">联系电话</th>
<th class='text-center' id="e_bd">出生年月</th>
<th class='text-center' id="e_edate">入职日期</th>
<th class='text-center' id="e_status">在职状态</th>
<th class='text-center' id="e_jtype">工作性质</th>
<th class='text-center' >操作</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>2、页面分页+排序+条件查询js代码
$(function(){
var $table = $("#entryInfoTable");
var _table = $table.dataTable($.extend(true,{},CONSTANT.DATA_TABLES.DEFAULT_OPTION, {
ajax : function(data, callback, settings) {
//封装请求参数
var param = userManage.getQueryCondition(data);//调用方法获取页面查询条件，已经分页所需要的数据
$.ajax({
type: "GET",
url: "/entry/getEmployeeEntryInfos",
cache : false, //禁用缓存
data: param, //传入已封装的参数
dataType: "json",
success: function(result) {//从后台获取查询出的数据后做的处理
//异常判断与处理
if (result.errorCode) {
alert("查询失败");
return;
}
//封装返回数据
var returnData = {};
returnData.draw = data.draw;//这里直接自行返回了draw计数器,应该由后台返回（前端发送请到后台查询数据时会发送该数据，后端查询完数据后要将改数据返回到前端）
returnData.recordsTotal = result.total;//总记录数
returnData.recordsFiltered = result.total;//后台不实现过滤功能，每次查询均视作全部结果
returnData.data = result.pageData;//后端查询展示在页面中的数据
//调用DataTables提供的callback方法，代表数据已封装完成并传回DataTables进行渲染
//此时的数据需确保正确无误，异常判断应在执行此回调前自行处理完毕
callback(returnData);
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
alert("查询失败");
}
});
},
//绑定数据
columns: [
{
data: "name",//字段名
orderable : false,
render : function(data,type, row, meta) {
if(data.state==1){
return data.value;
}else if(data.state==0){
return "";
}
}
},
{
data: "dept_name",//字段名
render : function(data,type, row, meta) {
if(data.state==1){
return data.value;
}else if(data.state==0){
return "";
}
}
},
{
data : "job_name",//字段名
render : function(data,type, row, meta) {
if(data.state==1){
return data.value;
}else if(data.state==0){
return "";
}
}
},
{
data : "num",//字段名
orderable : false,
render : function(data,type, row, meta) {
if(data.state==1){
return data.value;
}else if(data.state==0){
return "";
}
}
},
{
data : "uname",//字段名
orderable : false,//禁用排序
render : function(data,type, row, meta) {
if(data.state==1){
return data.value;
}else if(data.state==0){
return "";
}
}
},
{
data: "status",//字段名
defaultContent:"",//无默认值
render : function(data,type, row, meta) {
if(data.state==1){
return (data.value == 1? "入职":data.value == 2?"转正":data.value == 3?"离职":" ");
}else if(data.state==0){
return "";
}
}
},
{
data : "pdate",//字段名
render : function(data,type, row, meta) {
if(data.state==1){
return data.value;
}else if(data.state==0){
return "";
}
}
},
{
data: null,//字段名
defaultContent:"",//无默认值
orderable : false,//禁用排序
}
],
"createdRow": function ( row, data, index ) {
//不使用render，改用jquery文档操作呈现单元格
var $opBtn = $('<a class="bg_btn" data_code="2" data_eid="'+data.eid.value+'">完善入职资料</a>');
$('td', row).eq(7).append($opBtn);
},
"drawCallback": function( settings ) {
//渲染完毕后的回调
//默认选中第一行
//$("tbody tr",$table).eq(0).click();
}
})).api();//此处需调用api()方法,否则返回的是JQuery对象而不是DataTables的API对象
//查询
$("#queryBtn").click(function(){
_table.draw();
});
//查询表单中的select框值发生变化时执行的事件
$("#deptId").change(function(){
_table.draw();
});
//按钮点击事件
$table.on("click","a[data_code='2']",function() {
//点击完善入职质料按钮所执行的事件
var eid = this.getAttribute("data_eid")
$("#entryFormModal").find('.modal-title').text("完善员工入职资料");
$("#entryFormModal .modal-body").load("/script/v_hr_inleaving_form.jsp?code="+2+"&eid="+eid);
$("#entryFormModal").modal();
});
});
var userManage = {
getQueryCondition : function(data) {
var param = {};
//组装排序参数
if (data.order&&data.order.length&&data.order[0]) {
switch (data.order[0].column) {
case 1:
param.orderColumn = "dept";//数据库列名称
break;
case 2:
param.orderColumn = "job";//数据库列名称
break;
case 5:
param.orderColumn = "iostatus";//数据库列名称
break;
case 6:
param.orderColumn = "pdate";//数据库列名称
break;
default:
param.orderColumn = "pdate";//数据库列名称
break;
}
//排序方式asc或者desc
param.orderDir = data.order[0].dir;
}
param.username = $("#username").val();//查询条件
param["employee.name"]= $("#ename").val();//查询条件
param["employee.num"] = $("#num").val();//查询条件
param["employee.deptId"] = $("#deptId").val();
param["employee.jobId"] = $("#jobId").val();
param.iostatus = $("#iostatus").val();
param.minPdate = $("#minPdate").val();
param.maxPdate = $("#maxPdate").val();
//组装分页参数
param.startIndex = data.start;
param.pageSize = data.length;
param.draw = data.draw;
return param;
}
};3、constant.js初始化表格的一些属性，参数值
/*常量*/
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, //禁用原生搜索
lengthChange: false,//关闭选择每页显示的数据条数
paging: true,//允许分页
info:true,//左下角信息 showing 1 to 7 of 7entries
},
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>';
}
}
}
};4、后台实现排序+分页+条件查询的代码
Controller层的代码
@RequestMapping(value = "/getEmployeeEntryInfos")
public Map<String, Object> getEmployeeEntryInfos(EmployeeEntryInfoExample example,HttpServletRequest request) throws Exception{
//直接返回前台
String draw = request.getParameter("draw");
//获取排序字段
String orderColumn = request.getParameter("orderColumn");
if(orderColumn == null){
orderColumn = "pdate";
}
example.setSortField(orderColumn);
//获取排序方式
String orderDir = request.getParameter("orderDir");
if(orderDir == null){
orderDir = "asc";
}
example.setSortWay(orderDir);
PageList<List<AuthData>> pageList = employeeEntryInfoService.pageQueryByExample(example, request);
Map<String, Object> info = new HashMap<String, Object>();
info.put("pageData", pageList.getAuthData());
info.put("total", pageList.getTotalCount());
info.put("draw", draw);
return info;
}service层的代码
public PageList<List<AuthData>> pageQueryByExample(EmployeeEntryInfoExample example, HttpServletRequest request){
//数据起始位置
String startIndex = request.getParameter("startIndex");
//每页显示的条数
String pageSize = request.getParameter("pageSize");
int totalCount = employeeEntryInfoMapper.selectCountByExample(example);
//判断总人数是否为0，如果为0就返回一个空的PageList对象，不需要在到数据库查询具体的入职员工信息
if(totalCount == 0){
return new PageList<>();
}else{
//查询分页展示的数据
PageHelper.offsetPage((Integer.parseInt(startIndex) / Integer.parseInt(pageSize)) + 1, Integer.parseInt(pageSize));
List<EmployeeEntryInfo> rows = employeeEntryInfoMapper.pageQueryByExample(example);
List<Map<String,AuthData>> dataList = new ArrayList<Map<String,AuthData>>();
for (EmployeeEntryInfo employeeEntryInfo : rows) {
Map<String,AuthData> list = new HashMap<String,AuthData>();
list.put("id",new AuthData("id", employeeEntryInfo.getId(), 0));
list.put("num",new AuthData("num", employeeEntryInfo.getEmployee().getNum(), 1));
list.put("name",new AuthData("name", employeeEntryInfo.getEmployee().getName(), 1));
list.put("dept_name",new AuthData("dept_name", employeeEntryInfo.getEmployee().getDept().getName(), 1));
list.put("job_name",new AuthData("job_name", employeeEntryInfo.getEmployee().getJob().getName(), 1));
list.put("uname",new AuthData("uname", employeeEntryInfo.getEmployee().getAccount().getName(), 1));
list.put("status",new AuthData("status", employeeEntryInfo.getIostatus(), 1));
list.put("pdate",new AuthData("pdate",new SimpleDateFormat("yyyy-MM-dd").format(employeeEntryInfo.getPdate()) , 1));
list.put("eid",new AuthData("eid", employeeEntryInfo.getEid(), 1));
Integer eId = (Integer) request.getSession().getAttribute(DataKey.ACCOUNT_ID.$());
list = AuthData.dataSelect(eId, list);
dataList.add(list);
}
PageList<List<AuthData>> pageList = new PageList<>(totalCount);
pageList.setAuthData(dataList);
return pageList;
}
}效果图：
206
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
