jQuery Datatables更新行以使搜索工作

Question

i'm first time working on DataTables and have a table where one column contains links (which acts like a toggle Add player / Remove Player ). When clicked, the link changes it's data attribute and innerHTML value. Also on link click there's a server side change, posted with AJAX so i wouldn't have to load the table over and over again all the time. After clicking continue button the user is shown only players who're currently added to the tournament.

It appears that if i reload the page everything is fine, but once a value in row gets changed with JS the Datatables.search function will not pick the update up. I suspect that i have to change the row value not by editing the innerHTML but change it with Datatables own row editing functions, however i'm having trouble figuring out how can i change the link text (so an element which is inside a <td></td> element.

Some pseudocode how my table looks like:

<table id="test">
    <trow>
        <td id='1'>Something again</td>
        <td id='2'>Something</td>
        <td id='3'><a href='#' id='link'>Add Player</a></td>
    </trow>
</table>
<button id='continue' type='button'>Continue</button>

Currently i'm updating element <a> in <td id=3> with code:

//link.click function
var currentId = e.target.id;
$("#"+currentId).text("Remove Player");
//button.click function
table.column(4).search("Remove").draw();

After the update with JS ( .text function) Datatables.search does not pick up the change in table. Upon refresh the change is picked up by the search function (So table gets redrawn with refresh). Any ideas?

Answer 1

So i was correct with my guess that table did not get updated and i used the DataTables method to change the value in cell:

var currentId = e.target.id;
var parentCell = table.cell(document.getElementById(currentId).parentElement);
parentCell.data("<a href='#' class='modifyplayer' id='removeModify"+pid+"' data-actiontype='remove' data-playerid='"+pid+"'>Remove player</a>").draw();

And works like a charm :)