iou3344 2023-02-04 23:43 采纳率: 85.2%
浏览 27
已结题

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是实心按钮

  • 写回答

2条回答 默认 最新

  • 社区专家-Monster-XH 2023-02-05 22:18
    关注

    在表格构建的代码里面可以根据数据库中的 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。

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题?

问题事件

  • 系统已结题 2月14日
  • 已采纳回答 2月6日
  • 创建了问题 2月4日

悬赏问题

  • ¥15 霍尔传感器接放大器的应用
  • ¥20 针对计算后数据做一致性检验可以用Bland Altman法吗
  • ¥15 win32如何自绘编辑框的背景图片(语言-c++|操作系统-windows)
  • ¥15 微信夜间被转走了1w对,当天手机剪切板里就出现了这个乱码,有铁子可以看看是啥吗可以
  • ¥50 跑通github上的代码 深度学习 pytorch
  • ¥50 求写,批处理调用分区助手分区脚本
  • ¥15 求购HI3519AV100开发板
  • ¥15 请问1553 RT怎么测试,没有BC有方法吗
  • ¥100 业务编程如何选择学习方向和内容?
  • ¥15 wamp3.3.5安装完成后图标正常显示绿色,鼠标左右键点击图标均无反应。求解决方法。