Обновить (ajax) только часть таблицы, не затрагивая всю таблицу - PullRequest
Новая
       10

Обновить (ajax) только часть таблицы, не затрагивая всю таблицу

0 голосов
/ 02 июня 2010 
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="list">
              <tr>
                <th><a href="#" class="sortby">Full Name</a></th>
                <th><a href="#" class="sortby">City</a></th>
                <th><a href="#" class="sortby">Country</a></th>
                <th><a href="#" class="sortby">Status</a></th>
                <th><a href="#" class="sortby">Education</a></th>
                <th><a href="#" class="sortby">Tasks</a></th>
              </tr>
    <div class="dynamicData">
              <tr>
                <td>Firstname Lastname</a></td>
                <td>Los Angeles</td>
                <td>USA</td>
                <td>Married</td>
                <td>High School</td>
                <td>4</td>
              </tr>
              </tr>
              <tr>
                <td>Firstname Lastname</a></td>
                <td>Los Angeles</td>
                <td>USA</td>
                <td>Married</td>
                <td>High School</td>
                <td>4</td>
           </tr>
    </div> 
</table>

Идея состоит в том, чтобы обновлять строки таблицы при нажатии на ссылку с помощью clasl "sortby", который является частью тега th table.

Я пытался вставить div, но это не работает,Разделение этого на две таблицы не является хорошим решением, потому что ширина в ячейке обеих таблиц не следуют друг за другом.Любое другое решение?

Ответы [ 4 ]

2 голосов
/ 02 июня 2010

Поместите trs, которые нужно обновить, в тег tbody и поместите свой заголовок в тег thead.

Вы можете добавить / удалить trs к tbody, используя стандартный jQuery.

Я предлагаю вам ознакомиться с кучами существующих плагинов jQuery, которые делают это (правка: для таких вещей - сортировка динамических данных). К сожалению, сейчас он не в сети, поэтому я не могу предоставить ссылку!

EDIT :

trs = строки данных, т. Е .:

        <tr>
            <td>Firstname Lastname</td>
            <td>Los Angeles</td>
            <td>USA</td>
            <td>Married</td>
            <td>High School</td>
            <td>4</td>
       </tr>

Я предположил, что это тип того, что будет возвращать ваш AJAX-запрос.

2 голосов
/ 02 июня 2010

Действительно, вы не можете иметь div s внутри таблицы. Идея заключается в том, что вы делаете запрос AJAX, который возвращает несколько строк таблицы, и вы хотите вставить эти строки в вашу таблицу? Если так, как насчет этого: 

$.get('...', function(data) {
    $('.list tr:not(:has(.sortby))').remove().after(data);
});

Другими словами, найдите и удалите ненужные строки, а затем вставьте нужный материал.

1 голос
/ 02 июня 2010

Для сортировки вы можете попробовать перетасовать строки напрямую:

Переместить строку 0 ниже строки 1: 

$("table.list tr").eq(0).insertAfter($("table.list tr").eq(1))

Вставка новой строки в конце будет выглядеть так: 

$("<tr>Content</tr>").insertAfter($("table.list tr:last"))

Удаление строки: 

$("table.list tr").eq(1).remove()

Если вы делаете несколько изменений одновременно, вам следует рассмотреть возможность создания новой таблицы вне DOM с использованием jQuery. Затем замените старый стол одним движением. Чем меньше модификаций в DOM, тем лучше.

0 голосов
/ 04 ноября 2010

Вы можете добавлять новые строки данных и удалять ненужные строки с помощью обычного jQuery.

В зависимости от того, как работает ваша сортировка, этот плагин может быть альтернативой, поскольку он позволяет фильтровать таблицу по столбцам.
http://tomcoote.co.uk/code-bank/jquery-column-filters/

...