Только что добавленные данные удаляются при сортировке таблицы - PullRequest
Новая
       4

Только что добавленные данные удаляются при сортировке таблицы

0 голосов
/ 02 марта 2012

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

Вот бегущий код - http://jsfiddle.net/fXAbh/ Нажмите «Добавить», а затем попробуйте отсортировать строку, нажав на заголовок столбца, добавленная строка исчезнет, ​​мне нужно, чтобы только что добавленные данные также можно было сортировать и не удалять. 

<!DOCTYPE html>
<html>
<head>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
 <script src="http://tablesorter.com/__jquery.tablesorter.js" type="text/javascript"></script>
 <script src="http://tablesorter.com/addons/pager/jquery.tablesorter.pager.js" type="text/javascript"></script>
<link rel="stylesheet" href="http://tablesorter.com/themes/blue/style.css" type="text/css" media="print, projection, screen" />

  <script type="text/javascript">
    $(document).ready(function() {
                { 
                    $("#myTable").tablesorter({widthFixed: true, widgets: ['zebra']}).tablesorterPager({container: $("#pager")}); 
                    $("#pager").css('top','auto');  
               } 
    });

    function append() {
         $('#myTable > tbody:last').prepend('<tr><td>test</td><td></td><td></td><td></td><td></td><td></td><td></td></tr>');
        };

   </script>

</head>


<body>
<input type="button" value="Append" onclick="append();" />
<table id="myTable" cellspacing="1" class="tablesorter">
    <thead>
        <tr>
            <th>Name</th>
            <th>Major</th>
            <th>Sex</th>
            <th>English</th>
            <th>Japanese</th>
            <th>Calculus</th>
            <th>Geometry</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Student01</td>
            <td>Languages</td>
            <td>male</td>
            <td>80</td>
            <td>70</td>
            <td>75</td>
            <td>80</td>
        </tr>
        <tr>
            <td>AStudent01</td>
            <td>Languages</td>
            <td>male</td>
            <td>80</td>
            <td>70</td>
            <td>75</td>
            <td>80</td>
        </tr>
</tbody>
</table>

<div id="pager" class="pager">
    <form>
        <input type="text" class="pagedisplay"/>
        <select class="pagesize">
            <option selected="selected"  value="10">10</option>
            <option value="20">20</option>
            <option value="30">30</option>
            <option  value="40">40</option>
        </select>
    </form>
</div>



</body>
</html>

Ответы [ 2 ]

2 голосов
/ 02 марта 2012

Вам нужно вызывать $("#myTable").trigger("update"); после каждого обновления, которое сообщит плагину о том, что произошло обновление.

0 голосов
/ 02 марта 2012

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

$("#myTable").trigger("update");

Рабочая демоверсия - http://jsfiddle.net/ShankarSangoli/fXAbh/2/

...