Datatables根据后端返回的值显示对应的值（如后端返回0，1，前端显示对应文字含义）

最新推荐文章于 2023-07-20 23:54:22 发布

January丶

最新推荐文章于 2023-07-20 23:54:22 发布

阅读量3.7k

点赞数 2

分类专栏： JavaScript 文章标签： JavaScript Datatables 前端插件

本文链接：https://blog.csdn.net/qq_39340792/article/details/99958587

版权

JavaScript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

前言

在使用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" οnclick="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" οnclick="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);
});