【问题标题】:Dynamic datatable Jquery动态数据表 Jquery
【发布时间】:2023-03-05 19:32:01
【问题描述】:

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

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

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

这是我的 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']]
             })

我可以迭代我想放在表上的数据吗?在图片中,如果状态与待定状态不同,我有一个列调用状态,我想使用按钮进行其他操作。

所以我需要检查登录人的角色并检查每一行的状态

我想做这样的事情:

If(role == xRole && data.status != 'Pending'){ 更改按钮样式 放置一个不同的类,例如将 .Assign 更改为 .CloseRequest }

如果我知道如何在创建表格之前与要放入行中的数据进行交互,那会更容易

有可能吗?

【问题讨论】:

    标签: javascript jquery html frontend


    【解决方案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>'
    

                    "defaultContent": getButtons()
    

    并定义这个函数:

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

    只需确保正确定义了role

    【讨论】:

    • 抱歉,我已经编辑了我的问题。你能帮我解决这个问题吗?
    • @JohnatanDeLeon 欢迎您。让我看看。
    • @JohnatanDeLeon 您可以通过实现 initComplete 来完成您打算完成的迭代。在此处查看更多信息:datatables.net/reference/option/initComplete
    猜你喜欢
    • 2022-12-11
    • 1970-01-01
    • 2011-01-10
    • 2016-06-08
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2012-03-05
    相关资源
    最近更新 更多