【问题标题】:Hide elements in a Datatables.net table, based on data in another column根据另一列中的数据隐藏 Datatables.net 表中的元素
【发布时间】:2021-05-08 00:01:51
【问题描述】:

我有一个数据表,我最近更改为使用 AJAX 数据源方法。 这是一种享受。 我在第一列中添加了三个按钮(有效,没问题),现在我想根据另一列中的数据有条件地显示/隐藏第三个按钮。如果有数据,我不想显示第三个按钮:PublishStatus = "No shifts created"

我看过:https://datatables.net/examples/basic_init/data_rendering.html

但我无法理解将其扭曲到我的情况所需的内容,因为该条件基于我正在使用的列之外的列。如果我将按钮放在 PublishStatus 列中,我可以看到该怎么做

"ajax": "dt-data_list_wo.asp?mf=d",
        "columns": [
        {"data": "GUID" , render : function ( data, type, row, meta ) {
          return type === 'display'  ?
          '<span style="display: inline-block;"><form method="POST" action="requestwo.asp"><input type="hidden" name="itemGUID" value="'+ data +'"/><input type="hidden" name="action" value="wodetails"  /><button type="submit" class="btn btn-fill btn-info" style="margin-right: 5px">Details</button></form></span><span style="display: inline-block;"><form method="POST" action="prepub.asp"><input type="hidden" name = "itemguid" value = "' + data + '"><input type="hidden" name="action" value="view"  /><input type="hidden" name="backlink" value="listwo.asp"/><button type="submit" class="btn btn-fill btn-warning" style="margin-right: 5px">View RS</button></form></span><span style="display: inline-block;"><form method="POST" action="prepub.asp"><input type="hidden" name = "itemguid" value = "' + data + '"><input type="hidden" name="action" value="publish_shifts"  /><button type="submit" class="btn btn-fill btn-danger">Publish</button></form></span>': data;
        }},
        { "data": "PublishStatus" },
        { "data": "orgname" },
        { "data": "woref" },
        { "data": "weeknum" },
        { "data": "startdate" },
        { "data": "client_po" },
        { "data": "work_desc" }
    ],

【问题讨论】:

  • 查看render 函数中row 变量的内容。它包含当前行中的所有数据项(在您的情况下可能是一个对象数组)。因此,在您的render 函数中,您可以扩展您的条件逻辑以引用row.PublishStatus。使用console.log( row ); 仔细检查行数据的结构。
  • 谢谢,这正是我需要的提示。修改后的代码发布在下面

标签: datatables


【解决方案1】:

因此,感谢 andrewjames,该解决方案涉及对我的原始代码的一些更改 - 我已经注释掉了阻止它工作的部分,并且带有 row.PublishStatus 的 if 子句确实起到了作用。度过了我的周末!

"ajax": "dt-data_list_wo.asp?mf=d",
        "columns": [
        {"data": "GUID" , render : function ( data, type, row, meta ) {
          //return type === 'display' ?
          if (row.PublishStatus == "All shifts published" || row.PublishStatus == "No shifts created yet") {
          return '<span style="display: inline-block;"><form method="POST" action="requestwo.asp"><input type="hidden" name="itemGUID" value="'+ data +'"/><input type="hidden" name="action" value="wodetails"  /><button type="submit" class="btn btn-fill btn-info" style="margin-right: 5px">Details</button></form></span><span style="display: inline-block;"><form method="POST" action="prepub.asp"><input type="hidden" name = "itemguid" value = "' + data + '"><input type="hidden" name="action" value="view"  /><input type="hidden" name="backlink" value="listwo.asp"/><button type="submit" class="btn btn-fill btn-warning" style="margin-right: 5px">View RS</button></form></span>'//: data;
          } else {
          return '<span style="display: inline-block;"><form method="POST" action="requestwo.asp"><input type="hidden" name="itemGUID" value="'+ data +'"/><input type="hidden" name="action" value="wodetails"  /><button type="submit" class="btn btn-fill btn-info" style="margin-right: 5px">Details</button></form></span><span style="display: inline-block;"><form method="POST" action="prepub.asp"><input type="hidden" name = "itemguid" value = "' + data + '"><input type="hidden" name="action" value="view"  /><input type="hidden" name="backlink" value="listwo.asp"/><button type="submit" class="btn btn-fill btn-warning" style="margin-right: 5px">View RS</button></form></span><span style="display: inline-block;"><form method="POST" action="prepub.asp"><input type="hidden" name = "itemguid" value = "' + data + '"><input type="hidden" name="action" value="publish_shifts"  /><button type="submit" class="btn btn-fill btn-danger">Publish</button></form></span>'//: data;
            }
        }},
        { "data": "PublishStatus" },
        { "data": "orgname" },
        { "data": "woref" },
        { "data": "weeknum" },
        { "data": "startdate" },
        { "data": "client_po" },
        { "data": "work_desc" }
    ],

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2022-07-15
    • 2020-07-06
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多