【问题标题】:Update Jquery Datatable Cell Value更新 Jquery 数据表单元格值
【发布时间】:2015-09-04 15:00:55
【问题描述】:

我有一个 jquery 数据表,其中有很多跨度。该表使用来自数据库的 ajax 数据加载,然后在用户更改值时动态更新跨度以匹配具有相同类的所有其他跨度。

我遇到的问题是,当我更新 spans 数据表时,似乎并不知道它已更新。

例如,如果我将值更新为555,然后搜索555,它不会返回结果。

我尝试使用.draw(),但它似乎不起作用。如何在不破坏和重建表格的情况下让数据表更新所有单元格值。摧毁似乎是一种巨大的矫枉过正。

【问题讨论】:

  • 您是否正在更新客户端表和数据库?搜索是否在服务器端执行?
  • 一切都是客户端。初始加载获取所有值以启动,这是唯一的 ajax 调用。之后,DataTable 基本上就像普通的一样,不再需要 ajax 调用。其他一切都是客户端。如果您查看可能对 Michael Emerson 的评论,这个小提琴 jsfiddle.net/jebwq9yL 说明了这个问题。
  • 我对客户端数据表不太熟悉,但在我看来,您正在更新 HTML,而不是底层数据表。也许这样的事情会有所帮助:stackoverflow.com/questions/19629644/how-to-edit-a-row-in-the-datatable
  • 我也认为这是问题所在。我似乎无法找到一种方法来告诉数据表我已经更改了单元格的 html 值。我查看了您提供的链接,而我遇到的问题是它谈到按列名进行操作,而我需要按跨度类进行操作。

标签: jquery datatable


【解决方案1】:

我一直在研究这个问题,我认为这可能与数据表使用的缓存有关。我发现的是,如果您找到该单元格,然后将 data 属性设置为它工作的单元格的 html 值。所以例如你会做这样的事情。

var UpdateTD = $(".changemade").parent('td');
table.cell( UpdateTD ).data( UpdateTD.html()).draw();

这是我发现使它工作的唯一方法。这似乎不是最好的方法,但它确实有效。这是更新后的小提琴https://jsfiddle.net/jebwq9yL/1/

【讨论】:

    【解决方案2】:

    像这样将table定义为全局变量

    HTML 更新 使用<td class="changemade">Tiger Nixon</td>。从您的代码中删除跨度。要访问单元格,您必须将类名或 id 提供给 td 而不是跨度。

    var table;
    $(document).ready(function() {
      ........
      // DataTable
      table = $('#example').DataTable();
      ........
      });
    $('.changebutton').on('click', function () {
        // update cell value based on selector
        table.cell($('.changemade')).data('MEOW!').draw()
    });
    });
    //and use this code to listen the draw event.
    table.on('draw', function() {
      alert('table has been re-drawn')
    });
    

    DEMO

    在您的小提琴中,搜索有效,因为变量 tablesearch function 在同一范围内,但 table.draw 超出范围,因此无法正常工作

    【讨论】:

    • 即使您这样做了,但您仍然无法搜索新值。如果您搜索“喵!”它仍然没有返回任何结果。我点击按钮看到nixon值变为“MEOW!”,但是当我在全局搜索或名称搜索中搜索它时,它不会返回结果。
    • 有趣我想知道为什么它不适用于跨度,但没有它。万一我不得不使用跨度,因为我还有其他隐藏元素,比如加载进度条。
    • 你的回答是正确的。数据表需要一个选择器来更新值,所以我删除了 span。如果您使用parent 获得选择器,那没问题,如果您有n 个元素,您无法编写代码来查找每个跨度父级怎么办?
    • 我在生产代码中所做的是,每次更新跨度时,我都会这样做 ThisSpan.closest('table').DataTable().cell( ThisSpan.parent('td') ) .data(ThisSpan.parent('td').html()).draw();所以基本上我所做的是告诉数据表使单元格中的 html 成为该单元格的数据值
    • 喜欢什么?我没找到你
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2013-01-25
    • 1970-01-01
    • 1970-01-01
    • 2017-10-23
    • 1970-01-01
    • 2011-01-27
    • 2017-11-20
    相关资源
    最近更新 更多