iou3344 2023-02-04 23:43 采纳率: 84.1%
浏览 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 电脑和power bi环境都是英文如何将日期层次结构转换成英文
  • ¥15 DruidDataSource一直closing
  • ¥20 气象站点数据求取中~
  • ¥15 如何获取APP内弹出的网址链接
  • ¥15 wifi 图标不见了 不知道怎么办 上不了网 变成小地球了
  • ¥50 STM32单片机传感器读取错误
  • ¥50 power BI 从Mysql服务器导入数据,但连接进去后显示表无数据
  • ¥15 (关键词-阻抗匹配,HFSS,RFID标签)
  • ¥50 sft下载大文阻塞卡死
  • ¥15 机器人轨迹规划相关问题