动态数据表Jquery

Question

我想知道如何使用动态数据创建数据表行。我有这张桌子：

但是我想根据我的用户角色动态显示红色数据。

例如，如果我的角色等同于主管，则向他显示一个按钮，或者如果我的角色与该角色不同，则向用户显示其他按钮

这是我的html表：

    <div class="table-responsive-lg table-responsive-md">
        <table id="table" class="table table-hover">
            <thead>
                <tr>
                    <th></th>  
                    <th>Solicitante</th>
                    <th>Dia de solicitud</th>
                    <th>Estatus</th>
                    <th>Acciones</th>
                </tr>
            </thead>
        </table>
    </div>  

并且我在文档准备功能中调用此方法

             table = $('#table').DataTable({
                  'data': data
                , 'columns': [
                    {
                        'className': 'details-control',
                        'orderable': false,
                        'data': null,
                        'defaultContent': ''
                    },
                    { 'data': 'name' },
                    { 'data': 'request.dateRquest' },
                    { 'data': 'request.status' },
                    {
                    "className": '',
                    "orderable": false,
                    "data": null,
                    "defaultContent": '<button class= "btn btn-success btn-circle asignar" title="Asignar"> <i class="material-icons">assignment_ind</i></button>'+
                        "&nbsp;"+
                        '<button class= "btn btn-danger btn-circle rechazar" title="Rechazar"> <i class="material-icons">close</i></button>'
                    }
                ],
                'order': [[1, 'asc']]
             })

我可以迭代要放在桌子上的数据吗？在图片中，如果estatus与待处理状态不同，我将在列中调用estatus，我想使用该按钮进行其他操作。

因此，我需要检查登录人员的角色并检查每行的状态

我想做些类似的东西：

If（role == xRole && data.status！='Pending'）{更改按钮样式放置其他类，例如change .Assign为.CloseRequest}

如果我知道如何与将要在创建表之前放入行中的数据进行交互，这将更加容易

可能吗？

Answer 1

更改

                "defaultContent": '<button class= "btn btn-success btn-circle asignar" title="Asignar"> <i class="material-icons">assignment_ind</i></button>'+
                    "&nbsp;"+
                    '<button class= "btn btn-danger btn-circle rechazar" title="Rechazar"> <i class="material-icons">close</i></button>'

to

                "defaultContent": getButtons()

并定义此功能：

function getButtons() {
    switch (role) {
        case "admin": return "sometemplate1";
        default: return "sometemplate2";
    }
}

只需确保正确定义了role。

Answer 2

您可以根据用户角色轻松地执行此操作，该角色可以说出存储在roleId变量中的id，方法是替换：

{
  "className": '',
  "orderable": false,
  "data": null,
  "defaultContent": '<button class= "btn btn-success btn-circle asignar" title="Asignar"> <i class="material-icons">assignment_ind</i></button>' +
    "&nbsp;" +
    '<button class= "btn btn-danger btn-circle rechazar" title="Rechazar"> <i class="material-icons">close</i></button>'
}

具有render功能的按钮列的一部分，例如：

{
  "className": '',
  "orderable": false,
  "data": null,
  render: function(data, type, row) {
    var html = ''
    if (roleId === 1) { // Lets say this is Asignar
      html = '<button class= "btn btn-success btn-circle asignar" title="Asignar"> <i class="material-icons">assignment_ind</i></button>';
    } else {
      html = '<button class= "btn btn-danger btn-circle rechazar" title="Rechazar"> <i class="material-icons">close</i></button>'
    }
    return html;
  },
  "defaultContent": ''
}