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 在若依框架下实现人脸识别
  • ¥15 网络科学导论,网络控制
  • ¥100 安卓tv程序连接SQLSERVER2008问题
  • ¥15 利用Sentinel-2和Landsat8做一个水库的长时序NDVI的对比,为什么Snetinel-2计算的结果最小值特别小,而Lansat8就很平均
  • ¥15 metadata提取的PDF元数据,如何转换为一个Excel
  • ¥15 关于arduino编程toCharArray()函数的使用
  • ¥100 vc++混合CEF采用CLR方式编译报错
  • ¥15 coze 的插件输入飞书多维表格 app_token 后一直显示错误,如何解决?
  • ¥15 vite+vue3+plyr播放本地public文件夹下视频无法加载
  • ¥15 c#逐行读取txt文本,但是每一行里面数据之间空格数量不同