从 JSON 获取数据时在 Datatables 中使用自定义按钮

Question

所以，我想在我的数据中创建一个自定义按钮table table，但我做不到。我会试着解释一下。

Objective

我正在使用 DataTables 来显示一个有很多客户的 table，一个只有一些基本信息的基本 table。在这个 table 中，在客户端的同一行上，我想显示 3 个按钮。 1 个用于编辑，1 个用于查看，1 个用于排除。

我有什么

目前我在 JSON 文件中有客户的数据，我称之为 JSON 在 DataTable Jquery 插件中（代码如下）。我的客户端 JSON 数据中有 2 个 ID，一个是数据库 ID（称为 ID），另一个是系统客户端 ID（称为 CD）。我使用 2 个 ID 来防止数据库中出现任何错误，因此我可以手动将它们全部排序，而不是使用 2、3、6、7、8...好的。由于ID不是那么重要，所以我没有用它来显示在table上。我正在使用 CD。

问题

要 edit/view 或从数据库中删除客户端，我需要他的 ID，要创建按钮，我需要 HTML 代码。

所以我的疑问是，我怎样才能将这个按钮写给每个客户并在按钮中有他自己的 ID？这是我用来查看客户数据的非常简单的代码：

这是我在 photoshop http://i.imgur.com/DV91rSU.png 中制作的演示图像，用于展示我的最终 objective。

代码

现在，让我向你们展示一些我的代码。

HTML（非常非常简单）：

<table id="cfisico2" class="responsive" width="100%">
    <thead>
        <tr>
            <th>ID</th>
            <th>Nome</th>
            <th>CPF</th>
            <th>Cidade</th>
            <th>Opções</th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>

Jquery（调用 JSOn 数据和数据表）

$('#cfisico2').dataTable({
    responsive: true,
    "bProcessing": true,
    "bServerSide": false,
    "aoColumns" : [
        { "mData": "id" },
        { "mData": "nm_cliente" },
        { "mData": "cpf" },
        { "mData": "cidade" },
        { "mData": "option" }
    ],
    "ajax": {
        "url": "data/c_fisico.json",
    },
    "dataType": "json"
});

还有我的JSON（几乎所有我的客户数据）：

{
    "aaData": [
        {
            "cd":0,
            "id":"C-0001",
            "nm_cliente":"Nome do Cliente",
            "cpf":"000.111.222-33",
            "nm_pai":"Nome COmpleto Pai",
            "nm_mae":"Nome Completo Mae",
            "tel":"00-9966-6699",
            "cidade":"cidade",
            "estado":"estado"
        },
        {
            "cd":1,
            "id":"C-0002",
            "nm_cliente":"Nome do Cliente",
            "cpf":"000.111.222-33",
            "nm_pai":"Nome COmpleto Pai",
            "nm_mae":"Nome Completo Mae",
            "tel":"00-9966-6699",
            "cidade":"cidade",
            "estado":"estado"
        }
        ---etc---
    ]
}

我试图找到一个解决方案，但我没有..我找到的关闭是这个：https://www.datatables.net/examples/ajax/null_data_source.html

但由于数据库中的唯一 ID 未显示在 table 上，我无法使用它来删除数据。

我希望我能找到这个问题的另一个解决方案，我花了一整天的时间试图找到它。

Ps.: 抱歉我的英语不好，我来自巴西。

编辑： 我试图解决我的问题，我遇到了这个 'solution' 但仍然没有成功。

所以我试图做的是写一个新的 var 和 jquery 以及一个数据字符串，然后我将其称为 var 在数据 table 中，而不是调用 json 文件。这样我就可以通过操纵 var（或多个 var）来调用我想要的数据。

所以我在这里做了这个小代码：

var url = "data/c_fisico.json";
dataSet = '['
$.getJSON(url, function (response){
    $.each (response, function (index, table) {
        dataSet += '{"' + table.id + '","' + table.nm_cliente + '","' + table.cpf + '"';
        if ( table.cd <= 3 ) { //if used to avoid comma in the last string
            dataSet += '},'
        } else {
            dataSet += '}'; 
        }
    }); //end each
    dataSet += ']';
}); //end getJSON

使用这段代码我可以正确地写入字符串，但是我无法让 datable 加载它。

有人知道怎么做吗？我已经尝试过这样的事情：

$('#mytable').dataTable({
    data: dataSet,
});

Answer 1

如果我没理解错的话，您是想显示客户端数据，每一行都有 edit/delete 按钮。这些按钮必须分配有客户端 ID。是吗？

如果是：

$('#cfisico2').dataTable({
    responsive: true,
    "bProcessing": true,
    "bServerSide": false,
    "aoColumns" : [
        { "mData": "id" },
        { "mData": "nm_cliente" },
        { "mData": "cpf" },
        { "mData": "cidade" },
        { 
           'mRender': function (data, type, full) {
                return '<a href=\'javascript:;\' data-clientid=\'' + full[1] + '\' >Edit</a>';  
            }
        }
    ],
    "ajax": {
        "url": "data/c_fisico.json",
    },
    "dataType": "json"
});

所以我使用 mRender 来指定 table 单元格中显示的内容。此示例将生成一个 HTML 编辑 link，其中包含您可以与 jquery 一起使用的“clientid”数据属性。要添加更多按钮，您只需 return 来自 mRender 的更多代码。

从 JSON 获取数据时在 Datatables 中使用自定义按钮

Use custom button in Datatables when getting data from JSON

datatable

jquery

json

Objective

我有什么

问题

代码