我使用https://datatables.net/来显示一些数据。 当我更改数据时,在此示例中为年龄,则排序不再正常。
是否有可能改变此行为?
请点击,例如来自" Tiger Nixon"的桌面线而且年龄在变化。现在对列进行排序,它是不正确的。另一个 例如: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>
&#13;
Thx @ Nouphal.M的说明: fnUpdate 。有了这些信息,我建了一个新的: https://jsfiddle.net/rule_34/2L38yb98/1/
这也无法正常工作,因为我总是得到错误的表格行,但排序工作正常。
所以即使我更改了排序列,我将如何获得更新行?
答案 0 :(得分:0)
在datatable网站上,它表示您需要在更改后更新数据表
描述 如果主机DataTable中的数据发生更改,则必须更新FixedColumns以反映此新数据。此方法提供了这样的功能,只需使用DataTable中的最新数据重新绘制固定列。
将来,一旦DataTables为表更新操作添加了事件,这将自动执行,但此时必须调用此方法。
并实现使用此功能
fixedColumns().update()
示例代码:
var table = $('#myTable').DataTable();
table.cell( 0, 0 ).data( 'New data' ).draw();
table.fixedColumns().update();
答案 1 :(得分:0)