更新 Jquery 数据表单元格值

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/32401157/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-26 16:53:09  来源:igfitidea点击:

Update Jquery Datatable Cell Value

jquerydatatable

提问by Mav2287

I have a jquery datatable with a many spans in it. The table is loaded in with ajax data from a DB then the spans are dynamically updated to match all the other spans with the same class when a user changed a value.

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

The issue I am having though is that when I update the spans datatable doesn't seem to know it was updated.

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

For example if I make update the value to 555and then search for 555it doesn't return a result.

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

I tried to use .draw()but it doesn't seem to work. How do I have datatable update all the cell values without destroying and rebuilding the table. Destroy just seems like massive overkill.

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

回答by Mav2287

I have been beating on this for a while now and I think it may have to do with cache that datatable uses. What I found though was that if you find the cell then set the data attribute to the html value of the cell it works. So far example you would do something like this.

我一直在讨论这个问题,我认为这可能与数据表使用的缓存有关。我发现的是,如果您找到单元格,则将 data 属性设置为它工作的单元格的 html 值。到目前为止,你会做这样的事情。

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

That is really the only way I have found to make to make it work. It doesn't really seem like the best way to do this, but it does seem to work. Here is the updated fiddle showing it in action https://jsfiddle.net/jebwq9yL/1/

这真的是我找到的唯一方法来使它工作。这似乎并不是最好的方法,但它似乎确实有效。这是更新的小提琴显示它在行动https://jsfiddle.net/jebwq9yL/1/

回答by J Santosh

Define the tableas global variable like this

table像这样定义as 全局变量

HTML Update Used <td class="changemade">Tiger Nixon</td>. removed span from your code. to access a cell you have to give class name or id to the td not span.

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

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

演示

In your fiddle the search works because variable tableand search functionare in same scope but table.drawis out of the scope so it is not working

在您的提琴搜索工作,因为变量tablesearch function在同一范围内,但table.draw为范围的出来,因此不能正常工作