Сортировка Datatables неверна после изменения записи

Question

Я использую https://datatables.net/, чтобы показать некоторые данные. Когда я изменяю данные, в этом примере возраст, то сортировка перестает работать правильно.

Возможно ли изменить это поведение?

Нажмите, например. на линии стола от «Тигр Никсон» и изменения возраста. Теперь отсортируйте столбец, это неверно. Другой пример на: https://jsfiddle.net/rule_34/huv547j0/1/

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

 
\t $("tr[id="+ line +"] td[data-element=age]").html(age); 
 
\t });  
 
\t // -----------------------------------------------------------------------  
 
\t $('#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>

Thx @ Nouphal.M для примечания к: fnUpdate. С этой информацией я построил новое: https://jsfiddle.net/rule_34/2L38yb98/1/

Это также не работает правильно, я всегда получаю неправильную строку таблицы, но сортировка будет работать нормально.

So Как я могу получить строку для обновления, даже если я изменяю колонку сортировки?

Answer 1

В DataTable сайта он говорит, что вы должны обновить DataTable после изменения его

Описания Если данные в принимающем DataTable изменений, FixedColumns должны быть обновлены с учетом новых данных. Этот метод предоставляет возможность просто перерисовывать фиксированные столбцы с последними данными в DataTable.

В будущем это будет автоматизировано после добавления событий DataTables для действий обновления таблицы, но в данный момент этот метод должен быть вызван.

и добиться того, чтобы использовать эту функцию

fixedColumns().update() 

пример кода здесь:

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

Answer 2

я нашел рабочий раствор. Я также должен вставить tbody до tr к событию.

Смотрите также: https://jsfiddle.net/rule_34/o52r1pcy/1/

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

     $('#example').dataTable().fnUpdate(age, line, 4); // 4=column Age 
    });  
    // -----------------------------------------------------------------------  
    $('#example').DataTable(); // initialize 
});