datetable列表展示
首先当然是引入JS包 （可在文章底部下载对应的JS包）
<!-- dataTables -->
<link th:href="@{/css/plugins/dataTables/datatables.min.css}" rel="stylesheet"/>
<script th:src="@{/js/plugins/dataTables/datatables.min.js}"></script>然后在function 中初始化该表格
$(function () {
//此处需调用api()方法,否则返回的是JQuery对象而不是DataTables的API对象
$('#oTable').DataTable({
bLengthChange: false,//去除每页条数
language: initDateTableLang(), //提示信息
autoWidth: false, //禁用自动调整列宽
stripeClasses: ["odd", "even"], //为奇偶行加上样式，兼容不支持CSS伪类的场合
processing: true, //隐藏加载提示,自行处理
serverSide: true, //启用服务器端分页
searching: false, //禁用原生搜索
// orderMulti: false, //启用多列排序
order: [[ 10, "desc" ]],
//ordering: false, //取消默认排序查询,否则复选框一列会出现小箭头
renderer: "bootstrap", //渲染样式：Bootstrap和jquery-ui
pagingType: "full_numbers", //分页样式：simple,simple_numbers,full,full_numbers
"ajax": {
"url": "../jobSetting/queryJobSettingPage",//填写自己项目后台获取数据的地址 ajax返回值是page
"type": "POST",
"dataSrc": "data",
"data": function (d) {
//添加额外的参数传给服务器 针对有查询条件的表格 dataFrom是查询包裹查询条件的表单ID
d.extra_search = $("#dataFrom").serialize();
}
},
"columnDefs": [{
"targets": 'nosort', //列的样式名
"orderable": false //包含上样式名‘nosort'的禁止排序
}],
"aoColumnDefs": [ { "bSortable": false, "aTargets": [ 0,1,2,3,4,5,6,7,8,12] }],//此处写的数字为禁止排序的列
"columns": [
{"data": "name","render":showTitle},
{"data": "sex"},
{"data": "dept"},
{"data": "nowPost"},
{"data": "theType"},
{"data": "nowPostDate","render":operateDate},
{"data": "jobTypeValue"},
{"data": "jobLevel"},
{"data": "postProperty"},
{"data": "createStaffName"},
{"data": "createTime","render":operateDate},
{"data": "checkStatus","render":operateCheckStatus},
{"data": "id", "render": operateStr}
]
});
});render 方法可以自己自己的需求来自定义列 例如
function operateCheckStatus(data, type, row, meta) {
if (data == '1') {
return "<span class='text-navy'>" + row.checkStatusValue + "</span>"
} else if (data == '4') {
return row.checkStatusValue;
} else if (data == '3') {
return "<span class='text-danger'>" + row.checkStatusValue + "</span>"
} else if (data == '2') {
return "<span class='text-warning'>" + row.checkStatusValue + "</span>"
}
}HTML表格代码
<!--表格具体数据--> <div class="table-responsive"> <table class="table table-bordered table-hover " id="oTable"> <thead style="background-color:#F5F5F6;"> <tr> <th>姓名</th> <th>性别</th> <th>任职部门</th> <th>现任岗位</th> <th>所属类别</th> <th>现任岗位日期</th> <th>职务类别</th> <th>职务级别</th> <th>职务属性</th> <th>创建人</th> <th>创建日期</th> <th>状态</th> <th>操作</th> </tr> </thead> </table> </div>
HTML查询条件代码
<form enctype="multipart/form-data" id="dataFrom" class="ibox-content m-b-sm border-bottom ibox animation-form"> <!--input第一行--> <div class="row"> <div class="col-sm-3"> <div class="form-group fadeInRight animated"> <label class="control-label">姓名</label> <input type="text" id="Name" name="Name" class="form-control"/> </div> </div> <div class="col-sm-3 "> <div class="form-group fadeInRight animated"> <label class="control-label">任职部门</label> <div class="input-group"> <input type="text" id="deptNameList" name="deptNameList" class="form-control"/> </div> </div> <div class="col-sm-3 "> <div class="form-group fadeInRight animated"> <label class="control-label">现任岗位</label> <input type="text" id="NowPost" name="NowPost" class="form-control"/> </div> </div> </div> <!--button--> <div class="row"> <div class=" pull-right text-right btn-first position-btn"> <div> <a type="button" class="btn btn-primary btn-sm" href="#" onclick="refreshTable()">查询</a> </div> </div> </div> </form>
查询方法就是刷新一下表格，后它会根据datatable传到后台的数据，查询并返回对应的数据
refreshTable方法
function refreshTable() {
$("#oTable").ajax.reload();
}java 后台方法
@RequestMapping("/queryJobSettingPage")
public void queryJobSettingPage()throws Exception{
int start = getParaToInt(START, 0);
int pageSize = getParaToInt(LENGTH, DEFAULT_PAGE_SIZE);
int pageNum = getPageNum(start, pageSize);
String order_type = getPara(ORDER_PARAM);
if (StringUtils.isBlank(order_type)) {
order_type = "desc";
}
Integer sort_num = getParaToInt(SORT_PARAM);
String order = "createTime";
Sort sort = null;
if (sort_num != null && sort_num != 0) {
order = getPara("columns[" + sort_num + "][data]");
if (order_type.equals(ASC)) {
sort = new Sort(Sort.Direction.ASC, order);
} else {
sort = new Sort(Sort.Direction.DESC, order);
}
}
try {
Map<String, String> paraMap = getParameterDatatables(getRequest());
//这是查出来要在列表展示的数据 返回类型是page
Page<JobSettingEntity> pages = settingService.queryJobSettingPage(pageNum, pageSize, paraMap, sort);
renderDatetables(pages);
} catch (UnsupportedEncodingException e) {
e.printStackTrace();
}
}getParameterDatatables方法
public static Map<String, String> getParameterDatatables(HttpServletRequest request) throws UnsupportedEncodingException {
String param = request.getParameter("extra_search");
Map<String, String> returnMap = new HashMap<String, String>();
if (StringUtils.isNotBlank(param)) {
String params[] = param.split("&");
if (params != null && params.length > 0) {
for (String p : params) {
String s[] = p.split("=");
String key = s[0];
String value = s.length > 1 ? s[1] : null;
if (value != null) {
returnMap.put(key, URLDecoder.decode(value, "utf-8"));
}
}
}
}
return returnMap;
}renderDatetables方法
/**
* datatable 分页返回
*
* @param page
* @throws IOException
*/
public void renderDatetables(Page page) throws IOException {
Map<String, Object> root = new HashMap<String, Object>();
root.put("draw", getPara("draw"));
root.put("recordsTotal", page.getTotalElements());
root.put("recordsFiltered", page.getTotalElements());
root.put("data", page.getContent());
rendJson(JSON.toJSONString(root, SerializerFeature.WriteMapNullValue));
}
文章来源：
不凡
版权声明：本站所发布的全部内容部分源于互联网搬运，仅供用于学习和交流，如果有侵权之处请第一时间联系我们删除。敬请谅解! E-mail：bufanYes@163.com
评论列表
32131