cell updates correctly using javascript, but sorts as if the update had not occurred

drDave

Hello everyone,

I have a problem that I am hoping will be pretty simple to fix for someone out there. I have a table in which I update the value of one of the cells by clicking a button that changes the innerHTML from 9.1 to 1.1. Before I click the button, sorting on either column works as expected. But after I click the button, if I sort on the "score" column, the table sorts as if the 9.1 had not been changed.

See it here:
openbazaar.ontheblockchain.com/testingDataTables.php

I have a feeling I am missing something simple. Any suggestions?

<button onClick="changeScore()">change score</button>

<table id="simpleTable" class="display" cellspacing="0" width="300px">
        <thead>
            <tr>
                <th>Name</th>
                <th>Score</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <th>Name</th>
                <th>Score</th>
            </tr>
        </tfoot>
        <tbody>
            <tr>
                <td id="row-0-name" >Tom</td>
                <td id="row-0-score">3.4</td>
            </tr>
            <tr>
                <td id="row-1-name" >Dick</td>
                <td id="row-1-score">9.1</td>
            </tr>
            <tr>
                <td id="row-2-name" >Harry</td>
                <td id="row-2-score">1.3</td>
            </tr>
        <tbody>
</table>

<script>
$(document).ready(function() {
    $('#simpleTable').DataTable( {
    } );
} );

function changeScore() {
    document.getElementById("row-1-score").innerHTML = "1.1";
}
</script>

kthorngren

Since you are directly updating the cell's html Datatables doesn't know about the update. You will need to use cell().invalidate() to have Datatables update its data cache with the new data. For example:

function changeScore() {
    document.getElementById("row-1-score").innerHTML = "1.1";
    table.cell($('#row-1-score')).invalidate().draw();
}

Or you could use Datatables API's, cell().data(), to update the data. For example:

function changeScore() {
    table.cell($('#row-1-score')).data('1.1').draw();
}

Kevin

drDave

For some reason I cannot get either of those commands to work. I've changed the source code on my web page to test the following two functions:

function changeScoreA() {
    alert("A1");
    document.getElementById("row-1-score").innerHTML = "1.1";
    alert("A2");
    table.cell($('#row-1-score')).invalidate().draw();
    alert("A3");
}

function changeScoreB() {
    alert("B1");
    table.cell($("#row-1-score")).data("1.1").draw();
    alert("B2");
}

In each case, after clicking the button, the update does not appear to function and the last alert does not execute. I have tried the same code on a local html file on my laptop and find that it does not function there either. I am using dataTables 1.10.16 -- am I forgetting to load some dependency? Here is my entire page:

    
<script src="http://code.jquery.com/jquery-1.12.4.js"></script> 
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.css">


<center>
<button onClick="changeScoreA()">change score using invalidate()</button>
<button onClick="changeScoreB()">change score using draw()</button>
</center>

<table id="simpleTable" class="display" cellspacing="0" width="300px">
        <thead>
            <tr>
                <th>Name</th>
                <th>Score</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <th>Name</th>
                <th>Score</th>
            </tr>
        </tfoot>
        <tbody>
            <tr>
                <td id="row-0-name" >Tom</td>
                <td id="row-0-score">3.4</td>
            </tr>
            <tr>
                <td id="row-1-name" >Dick</td>
                <td id="row-1-score">9.1</td>
            </tr>
            <tr>
                <td id="row-2-name" >Harry</td>
                <td id="row-2-score">1.3</td>
            </tr>
        <tbody>
</table>

<script>
$(document).ready(function() {
    $('#simpleTable').DataTable( {
    } );
} );

function changeScoreA() {
    alert("A1");
    document.getElementById("row-1-score").innerHTML = "1.1";
    alert("A2");
    table.cell($('#row-1-score')).invalidate().draw();
    alert("A3");
}

function changeScoreB() {
    alert("B1");
    table.cell($("#row-1-score")).data("1.1").draw();
    alert("B2");
}
</script>

drDave

Update: I just realized I was loading an old version of jQuery, but switching the first line to

<script src="http://code.jquery.com/jquery-3.3.1.min.js"></script> 

doesn't seem to fix it.

drDave

Oh I think I fixed it. I needed to change line 42 to:

table = $('#simpleTable').DataTable( {

Thank you!