将动作添加到DataTables JSON特定单元格中 - Adding Action into the DataTables JSON Specific Cell

Adding Action into the DataTables JSON Specific Cell

本文关键字：单元格 JSON DataTables 添加 | 更新日期: 2023-09-27

我成功地将JSON数据加载到数据表中。但是我想在特定的行中添加一些处理。我怎样才能做到这一点呢?

我想添加一个按钮
使用按钮将从JSON对象检索到的行ID发送到另一个页面进行数据库处理

这是我的JS:

<script>
    $.getJSON('../vendor/process/process_vendor.php', function(response) {
        var vendButton = '<button>EDIT</button>';
        $('#vendorlist').DataTable({
          processing: true,
          data: response,
          columns: [
            {data: "CLIENT_ID"},
            {data: "CLIENT_NAME"},
            {data: "CLIENT_ADDR"},
            {data: "CLIENT_LOC"},
            {data: "CLIENT_PROV"},
            {data: "CLIENT_CONT_PERS"},
            {data: "CLIENT_CONT_PH1"},
            {data: "CLIENT_CONT_PH2"},
            {data: "CLIENT_CONT_FAX"},
            vendButton
          ]
        });
        window.someGlobalOrWhatever = response.balance;
    });
</script>

到目前为止，问题是我不能初始化vendButton，我不能检索特定的行ID使用CLIENT_ID:

这是JSON响应的数据:

[
    {
        "CLIENT_ID" : "CL0000001",
        "CLIENT_NAME" : "ABHIRAMA KRESNA",
        "CLIENT_ENT_DATE" : "12-NOV-14",
        "CLIENT_ENT_SIGN" : "chrishutagalung",
        "CLIENT_CONT_PERS" : null,
        "CLIENT_CONT_PH1" : null,
        "CLIENT_CONT_PH2" : null,
        "CLIENT_CONT_FAX" : null,
        "CLIENT_ADDR" : "JL AMARTA BLOK G NO 10 GROGOL",
        "CLIENT_LOC" : "SOLO",
        "CLIENT_PROV" : null,
        "CLIENT_INIT" : "ABK",
        "CLIENT_NPWP" : null
    }
]

columns是描述列模型的对象。您尝试简单地向它添加一个字符串。

可能，您需要遍历所有对象，并将此按钮添加到每个对象。

<script>
    $.getJSON('../vendor/process/process_vendor.php', function(response) {
        $.each(response, function() {
            this.vendButton = "<button data-id='" + this.CLIENT_ID + "'>EDIT</button>";
        });         
        $('#vendorlist').DataTable({
          processing: true,
          data: response,
          columns: [
            {data: "CLIENT_ID"},
            {data: "CLIENT_NAME"},
            {data: "CLIENT_ADDR"},
            {data: "CLIENT_LOC"},
            {data: "CLIENT_PROV"},
            {data: "CLIENT_CONT_PERS"},
            {data: "CLIENT_CONT_PH1"},
            {data: "CLIENT_CONT_PH2"},
            {data: "CLIENT_CONT_FAX"},
            {data: "vendButton"}
          ]
        });
        window.someGlobalOrWhatever = response.balance;
    });
</script>

这将生成另一个列，代码如下:

<button data-id='123'>EDIT</button>

其中123为CLIENT_ID。

然后，单击，您可以简单地访问它，如

.click(function() 
{
    var id = $(this).data('id');
});

您也可以使用DataTables API以编程方式绘制此列。
参考官方数据表示例