数据表操作列无法正常工作

如何解决数据表操作列无法正常工作

每次单击下一行时，我单击的最后一行的功能都会再次执行。例如，如果我在类型的第一行上单击“好”，然后在类型的第二行上单击“坏”，它将再次提交“好”，除非我再单击一次“坏”（它需要双击）。不知道它是否与onclick表格行功能有关，因为它不是特定于元素的。我是否可以使其单击具有特定ID的元素？

这是我的代码：

var table = $(‘#foobar’).DataTable( {
        data: dataSet,columns: [
            { title: “Type” },{ title: "Status" },{ title: “Good”,defaultContent: '<a id=“good” onclick="good()"><i class="fa fa-check“></i></a> },{ title: “Bad”,defaultContent: '<a id=“bad” onclick="bad()"><i class="fa fa-times”></i></a> },]
        } );

           
function good(){

 $(‘#foobar tr').click( function () {
              let row = table.row( this ).data();
              let rowid = row[0];
              let row = table.row(this);
//here I would update some spreadsheet with "good" and it sometimes works depending on the clicks
              table.cell(row,2).data("good").draw();

        } );

}


function bad(){

 $(‘#foobar tr').click( function () {
              let row = table.row( this ).data();
              let rowid = row[0];
              let row = table.row(this);
              //here I would update some spreadsheet with "bad" and it sometimes works depending on the clicks
              table.cell(row,2).data("bad").draw();

        } );

}

解决方法

我认为您想要做的事情是这样的：

“状态”列中的值由您单击哪个链接控制，即“好”链接或“坏”链接。

这是一个工作示例：

<script type="text/javascript">

var dataSet = [ 
  [ "Foo Type","not set" ],[ "Bar Type",[ "Baz Type","not set" ]
];

var table;

$(document).ready(function() {

table = $('#foobar').DataTable( {
  data: dataSet,columns: [
    { title: "Type" },{ title: "Status" },{ title: "Good","render": function(data,type,row,meta) {
        console.log( 'in render function' );
        return '<a onclick="good(' + 
          meta.row + 
          ')"><i class="fa fa-check">click me</i></a>';
      }
    },{ title: "Bad",meta) {
        return '<a onclick="bad(' + 
          meta.row + 
          ')"><i class="fa fa-check">click me</i></a>';
      }
    }    
  ]
} );

} );

function good( row_idx ){
  table.cell(row_idx,1).data("good").draw();
}


function bad( row_idx ){
  table.cell(row_idx,1).data("bad").draw();
}


</script>

我用default函数替换了您的columns.render()列值。这些功能使您可以使用meta.row访问行索引号，这是我们传递给修订后的good()和bad()函数的作用。

然后，函数使用“好”或“坏”更新该行的第二列。

请注意，行索引基于最初向DataTable提供数据的顺序，而不是查看表时看到的行顺序（由于排序可能会有所不同）。

如果这不是您真正需要的，它至少应该为您指明正确的方向（我认为）。