Question

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

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]; //这是你从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

您可以简单地为按钮使用渲染功能;只需将columnDefs定义添加到DataTable初始化：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
           }

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

2 个答案: