Datatables根据后端返回的值显示对应的值(如后端返回0,1,前端显示对应文字含义)

Datatables根据后端返回的值显示对应的值(如后端返回0,1,前端显示对应文字含义)

leo 646 2021-04-10

前言

在使用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>

后端传过来的isActiverole是数值型的:即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>&nbsp;&nbsp;&nbsp;' +
                    '<button class="btn btn-primary btn-sm" onclick="unlock(\'' + row.id + '\' ,\'' + row.isActive + '\' ,\'' + row.role + '\' )"><i class="fa fa-edit">解除</i></button>&nbsp;&nbsp;&nbsp;';
            }
        }
    ];
    dataTable = App.initDataTables("${pageContext.request.contextPath}/user/page", columns);
});

即,使用一个名为render的回调函数来处理数据。前面代码中出现的App.initDataTables方法的代码在我之前给出的连接的文章中有。