jquery - 更改条目后数据表排序错误

Question

我正在使用https://datatables.net/显示一些数据。 当我更改数据(在本例中为年龄)时，排序不再正确。

有可能改变这种行为吗？

请点击例如表上的行来自“老虎尼克松”和年龄的变化。现在对列进行排序，它不正确。其他 示例位于:https://jsfiddle.net/rule_34/huv547j0/1/

$(document).ready(function() {
	// -----------------------------------------------------------------------
	$("#example").on('click','tr',function () {	
	   var line = $(this).attr('id');
	   var age = Math.floor(Math.random() * 99) + 1;

	   $("tr[id="+ line +"] td[data-element=age]").html(age); 
	});    
	// -----------------------------------------------------------------------      
	$('#example').DataTable(); // initialize
} );

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.10/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.0.0/js/responsive.bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.0.0/js/dataTables.responsive.min.js"></script>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdn.datatables.net/1.10.10/css/dataTables.bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdn.datatables.net/responsive/2.0.0/css/responsive.bootstrap.min.css" rel="stylesheet"/>

<table id="example" class="table table-striped table-bordered " cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>First name</th>
                <th>Last name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
                <th>Extn.</th>
                <th>E-mail</th>
            </tr>
        </thead>
        <tbody>
            <tr id="0815">
                <td>Tiger</td>
                <td>Nixon</td>
                <td>System Architect</td>
                <td>Edinburgh</td>
                <td data-element="age">61</td>
                <td>2011/04/25</td>
                <td>$320,800</td>
                <td>5421</td>
                <td>t.nixon@datatables.net</td>
            </tr>
            <tr id="1234">
                <td>Garrett</td>
                <td>Winters</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td data-element="age">63</td>
                <td>2011/07/25</td>
                <td>$170,750</td>
                <td>8422</td>
                <td>g.winters@datatables.net</td>
            </tr>
            <tr id="2587">
                <td>Ashton</td>
                <td>Cox</td>
                <td>Junior Technical Author</td>
                <td>San Francisco</td>
                <td data-element="age">66</td>
                <td>2009/01/12</td>
                <td>$86,000</td>
                <td>1562</td>
                <td>a.cox@datatables.net</td>
            </tr>
            <tr id="3698">
                <td>Cedric</td>
                <td>Kelly</td>
                <td>Senior Javascript Developer</td>
                <td>Edinburgh</td>
                <td data-element="age">22</td>
                <td>2012/03/29</td>
                <td>$433,060</td>
                <td>6224</td>
                <td>c.kelly@datatables.net</td>
            </tr>
            <tr id="8547">
                <td>Airi</td>
                <td>Satou</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td data-element="age">33</td>
                <td>2008/11/28</td>
                <td>$162,700</td>
                <td>5407</td>
                <td>a.satou@datatables.net</td>
            </tr>
            <tr id="5254">
                <td>Brielle</td>
                <td>Williamson</td>
                <td>Integration Specialist</td>
                <td>New York</td>
                <td data-element="age">61</td>
                <td>2012/12/02</td>
                <td>$372,000</td>
                <td>4804</td>
                <td>b.williamson@datatables.net</td>
            </tr>
            <tr id="4785">
                <td>Herrod</td>
                <td>Chandler</td>
                <td>Sales Assistant</td>
                <td>San Francisco</td>
                <td data-element="age">59</td>
                <td>2012/08/06</td>
                <td>$137,500</td>
                <td>9608</td>
                <td>h.chandler@datatables.net</td>
            </tr>
            <tr id="2312">
                <td>Rhona</td>
                <td>Davidson</td>
                <td>Integration Specialist</td>
                <td>Tokyo</td>
                <td data-element="age">55</td>
                <td>2010/10/14</td>
                <td>$327,900</td>
                <td>6200</td>
                <td>r.davidson@datatables.net</td>
            </tr>
        </tbody>
    </table>

感谢@Nouphal.M 的注释:fnUpdate。有了这些信息，我建立了一个新的: https://jsfiddle.net/rule_34/2L38yb98/1/

这也无法正常工作，因为我总是得到错误的表格行，但排序可以正常工作。

那么，即使我更改排序列，如何获取更新行？

Answer 1

在数据表网站中，它说您更改数据表后需要更新

Description If the data in the host DataTable changes, the FixedColumns must be updated to reflect this new data. This method provides the ability, simply redrawing the fixed columns with the latest data in the DataTable.

将来，一旦 DataTables 添加了表更新操作的事件，此操作就会自动化，但目前必须调用此方法。

并使用此函数来实现

fixedColumns().update()

示例代码如下:

var table = $('#myTable').DataTable();     
table.cell( 0, 0 ).data( 'New data' ).draw();
table.fixedColumns().update();