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

时间:2016-01-07 13:00:03

标签: jquery twitter-bootstrap datatables

我使用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;
&#13;
&#13;

Thx @ Nouphal.M的说明: fnUpdate 。有了这些信息,我建了一个新的: https://jsfiddle.net/rule_34/2L38yb98/1/

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

所以即使我更改了排序列,我将如何获得更新行

2 个答案:

答案 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)

现在我找到了一个有效的解决方案。我还必须在 tr 之前插入 tbody

另请参阅:https://jsfiddle.net/rule_34/o52r1pcy/1/

with