DataTables：根据查询显示操作按钮

Question

我有 jquery DataTables 通过 ajax 调用显示数据。 这一切都很好地加载，在最后一列，我添加了一个操作按钮，它将数据添加到另一个数据库。
但我似乎无法弄清楚如何解决一件事：
当按下按钮并且系统已将行数据添加到另一个数据库时，我不想在重新加载时再次显示该按钮。
我知道我当然需要我的 add-to-db 中所有行的 id，所以我做了一个 db 查询，返回所有已添加的行 id - 但是我如何检查 id 是否与中的行匹配我的表，然后不在 dataTables 中显示该行的按钮？
下面你可以看到我是如何设置我的数据表的：

var table = $('#user-table').DataTable({
    "destroy": true,
    "processing": false,
    "serverSide": false,
    "ajax": {
            "url": "myAjaxCall",
            "dataType": "json",
            "data": JSON.stringify(data()),
            "type": "GET",
            "dataSrc": "collection"
    },
    "columns": [
        {"data": "customerNumber"},
        {"data": "name"},
        {"data": "coNumber"},
        {"data": "city"},
        {"data": "email"},
        {"data": "balance"},
        {"data": null,
            "defaultContent": "<a href='#' class='myButton btn'>Add</a>",
            className: "center", "bSortable": false, "bSearchable": false}
    ]
});

我真的需要一些帮助 - 第一次使用 dataTables - 我喜欢它，但只需要让这个到达终点线 :-)

Answer 1

你可以使用rowCallback函数。

var arrayOfAlreadyAddedRows = [1,5,7];  //Here is array you made from db.

"rowCallback": function( row, data ) {
    // I assume in your data you have a rowId column.

    if ( $.inArray(data.rowId, arrayOfAlreadyAddedRows ) !== -1 ) {
        $(row).find('td:eq(6)').html( "<a href='#' class='myButton btn'>Add</a>");
    }else{
       $(row).find('td:eq(6)').html("<b>Already added</b>");
    }
}

或者您已经在表格数据中标记了添加的行。类似于名为“已添加”的列，其值为 yes/no/

"rowCallback": function( row, data ) {
    if (data.added === "yes") {
        $(row).find('td:eq(6)').html("<a href='#' class='myButton btn'>Add</a>");
    }else{
        $(row).find('td:eq(6)').html("<b>Already added</b>");
    }
}

Answer 2

您可以简单地为您的按钮使用渲染函数；只需在 DataTable 初始化中添加一个 columnDefs 定义：http://www.datatables.net/examples/advanced_init/column_render.html

这使您可以在渲染元素之前做出合乎逻辑的决定。

var table = $('#user-table').DataTable({ 
.....
         "columnDefs": [
          {
           // The `data` parameter refers to the data for the cell (defined by the
           // `data` option, which defaults to the column being worked with, in
           // this case `data: 6`.
           "render": function ( data, type, row ) {
            //in here you should check if your button was clicked - if the id matches the id of a button     that was already  clicked - if that's the case just return an empty string otherwhise return a button:
            if(buttonClicked) //you need to write that logic obviously
            {
                return "";
            }else {
                return "<a href='#' class='myButton btn'>Add</a>";
            }

             },
             "targets": 6 //adjust as needed
           }