sort after changing a cell's content

Jo-Ker · November 2017

I have a simple table like this:

If I change the NAME (using javascript function) of row #2 from "Burt" to "Ryan", when I try to order the table by NAME, the table dont change the order.

Jo-Ker · November 2017

<html>
<head>
<title>DataTable-Order</title>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" />
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
</head>
<body>

<script type="text/javascript">

function configTableTopic() {
    $('#tableTopic').DataTable();
}

function changeName(element) {
    var jch = $(element);
    var col2 = jch.parent().parent().find('[name="col2"]');
    col2.html('Xantos');
}

$(document).ready(function(){
    configTableTopic();
});

</script>

        <table id="tableTopic">
            <thead>
                <tr>
                    <th>id</th>
                    <th>name</th>
                    <th>surname</th>
                    <th>click</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td name="col1">1</td>
                    <td name="col2">Alfred</td>
                    <td name="col3">Hitchcock</td>
                    <td name="col4">
                        <button onclick="changeName(this);">Click me</button>
                    </td>
                </tr>
                <tr>
                    <td name="col1">2</td>
                    <td name="col2">Burd</td>
                    <td name="col3">Hitchcock</td>
                    <td name="col4">
                        <button onclick="changeName(this);">Click me</button>
                    </td>
                </tr>
                <tr>
                    <td name="col1">3</td>
                    <td name="col2">Cassio</td>
                    <td name="col3">Hitchcock</td>
                    <td name="col4">
                        <button onclick="changeName(this);">Click me</button>
                    </td>
                </tr>
                <tr>
                    <td name="col1">4</td>
                    <td name="col2">Dan</td>
                    <td name="col3">Aykroyd</td>
                    <td name="col4">
                        <button onclick="changeName(this);">Click me</button>
                    </td>
                </tr>
                <tr>
                    <td name="col1">5</td>
                    <td name="col2">Peter</td>
                    <td name="col3">Parker</td>
                    <td name="col4">
                        <button onclick="changeName(this);">Click me</button>
                    </td>
                </tr>
            </tbody>
        </table>

</body>
</html>

kthorngren · November 2017

Since you aren't using Datatables API's to change the data I think you will need to use rows().invalidate() to have Datatables re-read the table information. You might get better performance to use row().data() or cell().data() to update the data through Datatables and remove the need to invalidate the data.

Kevin

Jo-Ker · November 2017

Ok, so how should I correct the function "changeName"?

allan · November 2017

As Kevin says, you have two options - use cell().invalidate() or cell().data(). The former is used to tell DataTables that you have updated the cell externally, the latter will tell DataTables to change it.

See the API manual page if you aren't sure how to use the API.

Allan

Jo-Ker · November 2017

Ok this is the cottection:

function changeName(element) {
    var jch = $(element);
    var col2 = jch.parent().parent().find('[name="col2"]');
    col2.html('Xantos');
    
    var tbx = $('#tableTopic').DataTable();
    var rwx = tbx.row(jch.parent().parent());
    rwx.invalidate();
}

Thanks

sort after changing a cell's content

sort after changing a cell's content

Replies

Howdy, Stranger!

Categories

DataTables

sort after changing a cell's content

sort after changing a cell's content

Replies

Howdy, Stranger!

Quick Links

Categories

DataTables