前言
在使用Datatables的时候,有些情况后端返回的可能是一些数值型(如:整型:0,1...),而在前端我们需要显示的却是其对应的意义(如:0
我们就表示管理员
,1
我们就表示普通用户
),如果我们使用的是JSP直接从request里取,用标签c:if
做判断就可以了。但如果我们使用的是Datatables插件来展示数据的话,不太一样。
解决
我之前的文章中正常使用的例子: Datatables的使用
表格:
<table id="dataTable" class="table table-hover">
<thead>
<tr>
<th>用户名</th>
<th>用户状态</th>
<th>用户类型</th>
<th>操作</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
后端传过来的isActive
和role
是数值型的:即0或者1。都代表特定含义,我们不可能在前端直接展示0,1,所以我们需要的Datatables初始化的时候就对数据进行处理,然后展示。代码如下:
var dataTable;
$(function () {
//初始化DataTables
var columns = [
{"data": "userName"},
{
"data": "isActive",
"render": function ( data, type, full, meta ) {
if (data === 0)
return "非法用户";
else
return "合法用户";
}
},
{
"data": "role",
"render": function ( data, type, full, meta ) {
// alert(data);
if (data === 0)
return "管理员";
else
return "普通用户";
}
},
{
"data": function (row, type, val, meta) {
return '<button class="btn btn-danger btn-sm" onclick="lock(\'' + row.id + '\' ,\'' + row.isActive + '\' ,\'' + row.role + '\' )"><i class="fa fa-trash-o">锁定</i></button> ' +
'<button class="btn btn-primary btn-sm" onclick="unlock(\'' + row.id + '\' ,\'' + row.isActive + '\' ,\'' + row.role + '\' )"><i class="fa fa-edit">解除</i></button> ';
}
}
];
dataTable = App.initDataTables("${pageContext.request.contextPath}/user/page", columns);
});
即,使用一个名为render
的回调函数来处理数据。前面代码中出现的App.initDataTables
方法的代码在我之前给出的连接的文章中有。