如何禁用/启用数据表中的按钮

时间:2021-03-17 18:18:48

标签: javascript jquery ajax datatables

我想检查文章的状态,如果 true Edit 按钮将被禁用,否则用户可以点击并切换到 Edit 页面。如何使用?

                    return '<a href="Student/EditArticle/' + data + '" class="btn btn-success mr-1"> Edit </a>';
                }}
        ],
        order: [1, 'asc']
    });

1 个答案:

答案 0 :(得分:0)

您使用的列渲染函数:

render: function (data) { ... }

能够访问当前行中的所有数据。它的完整签名是:

render: function ( data, type, row, meta ) { ... }

因此,您可以使用 row 参数访问该行中的其他列,例如 row.status

{
  data: 'id',
  className: "center",
  title: 'Actions',
  render: function (data, type, row, meta) {
    if (row.status === true) {
      return '<a href="Student/EditArticle/' + data + '" class="btn btn-success mr-1"> Edit </a>';
    } else {
      return '<a href="Student/EditArticle/' + data + '" class="btn btn-success mr-1" disabled> Edit </a>';
    }
  }
}

您可以查看更多详细信息和示例 here


值得研究一下为什么提供 type 参数以及它是如何使用的。它基本上可以帮助您提供一个值的多个版本——一个用于表格显示的值(HTML 链接);不同的排序值;另一个过滤值,依此类推。

因此,例如,对于您的可点击链接,您可能希望排序和过滤器值只是 data 值(没有任何无关的 HTML)。

但这完全是可选的——您不必使用它。有关详细信息,请参阅 orthogonal data


更新:

我忘记了不能像按钮一样禁用超链接(所以你不能使用“禁用”)。相反,您可以查看 these approaches,或者按照 TimRoberts 在问题评论中的建议进行操作。话虽如此,带有row参数的render函数应该就是你所需要的。

else {
  return 'Edit'; // or, alternatively: return ''
}