Javascript DataTables:根据查询显示操作按钮

Javascript DataTables:根据查询显示操作按钮,javascript,jquery,mysql,datatable,Javascript,Jquery,Mysql,Datatable,我有jquerydatatables通过ajax调用显示数据。 在最后一列中,我添加了一个操作按钮,可以将数据添加到另一个数据库中。 但我似乎不知道如何解决一件事: 当按下按钮且系统已将行数据添加到其他数据库时,我不想在重新加载时再次显示按钮。 我想我当然需要添加到db中的所有行的id,所以我做了一个db查询,返回所有已添加的行id-但是我如何检查id是否与表中的行匹配,然后不显示dataTables中该行的按钮? 下面您可以看到我是如何设置数据表的: var table = $('#user-

我有jquerydatatables通过ajax调用显示数据。 在最后一列中,我添加了一个操作按钮,可以将数据添加到另一个数据库中。
但我似乎不知道如何解决一件事:
当按下按钮且系统已将行数据添加到其他数据库时,我不想在重新加载时再次显示按钮。
我想我当然需要添加到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}
    ]
});
var table=$('#用户表').DataTable({
“毁灭”:真的,
“处理”:假,
“服务器端”:false,
“ajax”:{
“url”:“myAjaxCall”,
“数据类型”:“json”,
“data”:JSON.stringify(data()),
“类型”:“获取”,
“dataSrc”:“集合”
},
“栏目”:[
{“数据”:“customerNumber”},
{“数据”:“名称”},
{“数据”:“编号”},
{“数据”:“城市”},
{“数据”:“电子邮件”},
{“数据”:“余额”},
{“数据”:空,
“defaultContent”:“,
类名:“中心”,“可移植”:false,“可移植”:false}
]
});

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

您只需在按钮上使用renderfunction;只需在DataTable初始化中添加columnDefs定义:

这允许您在呈现元素之前做出逻辑决策

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
           }
var table=$('#用户表')。数据表({
.....
“columnDefs”:[
{
//`data`参数指的是单元格的数据(由
//`data`选项,默认为正在使用的列,在
//本例为“数据:6”。
“渲染”:函数(数据、类型、行){
//在这里,您应该检查您的按钮是否被单击-如果id与已单击的按钮的id匹配-如果是这种情况,请返回空字符串,否则返回按钮:
if(buttonClicked)//显然,您需要编写该逻辑
{
返回“”;
}否则{
返回“”;
}
},
“目标”:6//根据需要进行调整
}

您可以使用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>");
    }
}
var arrayOfAlreadyAddedRows=[1,5,7];//这是您用db制作的数组。
“rowCallback”:函数(行、数据){
//我假设您的数据中有一个rowId列。
if($.inArray(data.rowId,arrayOfAlreadyAddedRows)!=-1){
$(行).find('td:eq(6)').html(“”);
}否则{
$(行).find('td:eq(6)').html(“已添加”);
}
}
或者您已经在表数据中标记了添加的行。类似于一个名为“added”的列,其值为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>");
    }
}
“行回调”:函数(行,数据){
如果(data.added==“是”){
$(行).find('td:eq(6)').html(“”);
}否则{
$(行).find('td:eq(6)').html(“已添加”);
}
}

好的,你能提供呈现HTML的示例吗?数据确实是以JSON格式响应的吗?是的,它们是以JSON格式响应的。我会用secah更新HTML好的-我现在就试试这个解决方案。我想运行函数并基于动态返回值呈现输出没有问题吗?不-这是它的一个用例。你甚至可以返回一个标志作为JSON的一部分(单击:false,然后根据该标志的值进行渲染。因此,您不需要对单击的ID发出另一个请求……但这取决于您;)我明白了-聪明:)但是我从另一台服务器获取数据/ajax,所以我想这不是我的解决方案。你仍然可以从另一台服务器使用ajax-首先从另一台服务器获取带有单击id的ajax,然后在你的renderfunction列中,你可以将当前id与返回的id列表进行比较。这正是我现在要做的。谢谢你的帮助使用回调输入,我可以将其放置在初始化中的任何位置吗?第二个解决方案将在每次我进行ajax调用时更改?inarray函数如何工作?是的,您可以将其放入初始化中。当您从服务器获取表的数据时,将调用rowCallback,然后在数据中您将指示添加了哪一行以及添加了哪一行ch not.在表is init之前的第一个选项中。创建一个已添加行的数组。my arrayOfAlreadyAddedRows作为json数组返回-我可以这样使用它吗?