datatables构建的表格怎么实时刷新一个按钮的状态呢?

datatables在服务器端构建数据结构的getData.php核心代码

$columns = array(
array( 'db' => 'ID', 'dt' => 0 ),
array( 'db' => '标题', 'dt' => 1, 'formatter' => function( $d, $row ) {
  return $d . ' 'ID'] . '">';
} ),
array( 'db' => '浏览数', 'dt' => 2 )
);

ajax代码

$(document).on("click", ".fa-heart-o, .fa-heart", function() {
  var id = $(this).data('id');
  $.ajax({
    url: 'update_favorites.php',
    type: 'post',
    data: { id: id },
    beforeSend: function (xhr) {
    },
    success: function(res) {
      if (res.is_favorited) {
        $(".fa-heart-o[data-id='" + id + "']").removeClass("fa-heart-o").addClass("fa-heart");
      } else {
        $(".fa-heart[data-id='" + id + "']").removeClass("fa-heart").addClass("fa-heart-o");
      }
    },
  });
});

php代码略了吧~核心就这几句

  $is_favorited = $row['is_favorited'];
  if ($is_favorited == 1) {
    $sql = "UPDATE data_content SET is_favorited=0 WHERE id=$id";
  } else {
    $sql = "UPDATE data_content SET is_favorited=1 WHERE id=$id";
  }

这样在php端构建了表格,前端接收就可以看到数据了,标题后面是数据构建是增加的.fa-heart-o按钮,通过ajax实现了点击该按钮就可以对该标题进行关注的开关(点一下是关注,再点一下是取关),但由于这个.fa-heart-o按钮是动态添加进表格里面的,点击之后再想找到它并给他修改class为.fa-heart就异常艰难。唉,最近被这个动态添加的事情搞得头大死了。
所以就想能不能在构建表格的时候就给他加上一个什么标志,但是怎么加都是动态数据,还是很难找到。

所以:我明明已经查到数据库这个标题已经被收藏了,就是不能实时刷新class为.fa-heart,这个问题咋办呢?
注:
.fa-heart-o是空心按钮
.fa-heart是实心按钮

在表格构建的代码里面可以根据数据库中的 is_favorited 字段来确定关注按钮的 class 应该是 fa-heart 还是 fa-heart-o,比如:

array( 'db' => '标题', 'dt' => 1, 'formatter' => function( $d, $row ) {
$favorited = $row['is_favorited'] == 1 ? 'fa-heart' : 'fa-heart-o';
return $d . '<i class="fa ' . $favorited . '" data-id="' . $row['ID'] . '"></i>';
} ),

这样表格构建完成后,前端页面就可以显示关注按钮的初始状态,后续的点击操作就可以正常修改 class 为 fa-heart 或 fa-heart-o。

不知道你这个问题是否已经解决, 如果还没有解决的话:

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^