DataTables перемещает строки между таблицами

Я создаю простой интерфейс для результата запроса sql.

Я решил использовать DataTables и с его помощью создал что-то вроде этого:

http://live.datatables.net/izavon/18/edit#javascript,html,live

У меня проблема с перемещением строк из одной таблицы в другую, сейчас у меня есть 2 функции, которые выполняют свою работу, но я хотел бы иметь одну функцию, потому что мое решение работает только в одном направлении - я могу просто перейти из одной таблицы в другую те.

$(".deleteMe1").on("click", function (event) {
    var row = $(this).closest("tr").get(0);
    var addElement = oTable1.fnGetData(row);
    oTable2.fnAddData(addElement);
    // Remove Element from the source table
    var removeElement = oTable1.fnGetPosition(row);
    oTable1.fnDeleteRow(removeElement, null, true);
});

$(".deleteMe2").on("click", function (event) {
    var row = $(this).closest("tr").get(0);
    var addElement = oTable2.fnGetData(row);
    oTable1.fnAddData(addElement);
    // Remove Element from the source table
    var removeElement = oTable2.fnGetPosition(row);
    oTable2.fnDeleteRow(removeElement, null, true);
});

Итак, мои вопросы: Как объединить вышеуказанные функции в одну.


javascript jquery jquery-datatables
person Misiu    schedule 12.09.2012    source источник

Ответы (1)


arrow_upward
2
arrow_downward

По мере изменения строк привяжите кнопку удаления к нижнему неизменному элементу с помощью .on, в приведенном ниже случае событие клика привязывается к $(document) и затем фокусируется вторым параметром.

$(document).on("click", '.deleteMe', function (event) 
{
    // Get the id of the clicked table for comparison
    var id = $(this).closest('table').attr('id');

    // Assign the tables to the table object
    var table = {
        primary : (id === 'example1') ? oTable1 : oTable2,
        secondary : (id !== 'example1') ? oTable1 : oTable2
    };

    // Instead of calling the tables in seperate functions just use the  dynamically
    // assigned table.primary.x() and table.secondary.x()
    var row = $(this).closest("tr").get(0);

    var addElement = table.primary.fnGetData(row);

    table.secondary.fnAddData(addElement);

    var removeElement = table.secondary.fnGetPosition(row);

    table.primary.fnDeleteRow(removeElement, null, true);

});

Пример обновленных таблиц данных с использованием приведенного выше

Это будет работать в обоих направлениях, в зависимости от того, в какой таблице была нажата кнопка удаления. Вы можете изменить это, чтобы легко работать в одном или обоих направлениях, жестко запрограммировав первичные/вторичные табличные переменные или сделав второй параметр .on функции для класса, который только используется в одной таблице.

Чтобы запустить обновления таблицы, добавьте эту строку в конец вышеуказанной функции:

oTable1.fnDraw();

Это заставит таблицу перерисовываться каждый раз, когда добавляется или удаляется новая строка, это полезно для вас, так как вы можете использовать:

"fnDrawCallback": function() {
    console.log('draw callback executed');
 };

внутри вашего объекта с данными, чтобы точно указать, что должно произойти. Обновление нижнего колонтитула, извлечение соответствующих данных ajax и т. д.

Надеюсь это поможет.

person David Barker    schedule 12.09.2012
comment
Спасибо за быстрый ответ :) Это ответ на мой первый вопрос, но что мне делать с ссылкой показать/скрыть? Попробуйте удалить fnFooterCallback, таким образом, столбцы 2-8 скроются, а 9 будет виден, можно ли как-то это изменить? Или я должен использовать fnDrawCallback? И как получить доступ ко второй строке в моем нижнем колонтитуле? БОЛЬШОЕ СПАСИБО :) - person Misiu; 12.09.2012
comment
хорошо fnFooterCallback вызывается, когда нижний колонтитул перерисовывается на странице. У обоих есть свое применение, просто когда их увольняют, это другое. Вы не можете получить доступ к данным строки в fnDrawCallback, поэтому в вашем случае продолжайте использовать обратный вызов нижнего колонтитула. - person David Barker; 12.09.2012
comment
да, но как исправить мой код? Когда я удаляю fnFooterCallback, мои столбцы отображаются/скрываются правильно, но когда я добавляю их внезапно, я получаю странное поведение - скрываются только третьи столбцы. Откройте свой пример, попробуйте переместить строки из одной таблицы в другую, это работает, затем нажмите hide ссылки и попробуйте переместить строки, строки не обновляются правильно. Так что я думаю, что моя функция показать/скрыть все вылетает :( - person Misiu; 12.09.2012
comment
P.S. Извините за мой английский, надеюсь, мой вопрос и комментарии понятны :) - person Misiu; 12.09.2012