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日

悬赏问题

  • ¥20 搭建pt1000三线制高精度测温电路
  • ¥15 使用Jdk8自带的算法,和Jdk11自带的加密结果会一样吗,不一样的话有什么解决方案,Jdk不能升级的情况
  • ¥15 画两个图 python或R
  • ¥15 在线请求openmv与pixhawk 实现实时目标跟踪的具体通讯方法
  • ¥15 八路抢答器设计出现故障
  • ¥15 opencv 无法读取视频
  • ¥15 用matlab 实现通信仿真
  • ¥15 按键修改电子时钟,C51单片机
  • ¥60 Java中实现如何实现张量类,并用于图像处理(不运用其他科学计算库和图像处理库))
  • ¥20 5037端口被adb自己占了