Строки исчезают на Datatables?

0

Поэтому позвольте мне сначала объяснить, что я пытаюсь подражать. На главной странице есть основная таблица с последними записями в таблице. Пользователю предоставляется набор "любимых" папок, в которых они могут перетаскивать строки таблицы из основной таблицы. Вместо того, чтобы перетаскивать всю видимую строку (мои строки довольно широкие, и трудно определить, в какую папку она попадет). У меня есть значок "информация", который в этом случае является стрелкой вверх. Пользователь может перетащить значок и отбросить его в папку, когда на этом этапе его следует удалить из основной таблицы и добавить в таблицу в этой избранной папке. Пока что большая часть этого происходит в следующем скрипке (кроме строки не удаляется из основной таблицы). Проблема начинает становиться очевидной с использованием Datatables. После добавления строки в любимую папку, она явно там, пока вы не нажмете следующий и предыдущий на разбиении на страницы. Он исчезает. Кроме того, он никогда не кажется действительно частью таблицы, потому что информация в левом нижнем углу Datatables не обновляется. Отображение от 1 до 2 из 3 записей, когда может быть 4 всего (из строк, которые пользователь перетаскивал). Я понимаю, что добавить строки в Datatables, вам нужно fnAddData, но я не уверен, как использовать его в этом случае, какие-либо идеи? Заранее спасибо. Сценарий: http://jsfiddle.net/YK5fg/4/

$( ".drag" ).draggable({ revert: "invalid" });

              $( ".dropTarget" ).droppable({
                drop: function( event, ui ) {
                  // fade out dropped icon      
                  ui.draggable.hide();
                  var dropped = parseInt($(this).attr('title')) + 1;
                  $( this )
                  .attr('title',dropped+' entries'); 

                  var delay =  $(this);
                      delay.prop('disabled', true).addClass('ui-state-highlight')
                      setTimeout(function() {
                          delay.prop('disabled', false).removeClass('ui-state-highlight');
                      }, 2000)

                      var rowId = ui.draggable.prop("id");
                      var cloned = $(".basic").find("tr#"+rowId).clone();
                      $(".fav1table").append(cloned);
                }
              });
Теги:
datatables
droppable

1 ответ

1
Лучший ответ

вы можете использовать плагин fnAddTr http://datatables.net/plug-ins/api, чтобы добавить клонированный tr

$( ".dropTarget" ).droppable({
drop: function( event, ui ) {
    //ui.draggable.hide();
    var dropped = parseInt($(this).attr('title')) + 1;
    $( this ).attr('title',dropped+' entries'); 
    var delay =  $(this);
    delay.prop('disabled', true).addClass('ui-state-highlight')
    setTimeout(function() {
    delay.prop('disabled', false).removeClass('ui-state-highlight');
    }, 2000);

        //return the position of the ui.draggable to appear inside the parent row
        ui.draggable.css({"top":"0px","left":"0px"});
        //get the tr dragged
        var rowId = ui.draggable.parents("tr");
        //clone rowId 
        var cloned = rowId.clone();
        //make the cloned icon draggable
        cloned.find(".drag").draggable({ revert: "invalid"});
        //add coned tr with fnAddTr
        $(".fav1table").dataTable().fnAddTr(cloned[0]);
        //delete rowId with fnDeleteRow  add [0] to fix the redraw error 
        $(".basic").dataTable().fnDeleteRow(rowId[0]);
    }
});    

http://jsfiddle.net/YK5fg/7/
ОБНОВИТЬ
теперь подсчет на $ (". basic"). dataTable() изменяется, когда вы используете.fnDeleteRow(), и значок (перетаскиваемый) возвращается к строке

  • 0
    Большой прогресс, но начальная нумерация основной таблицы не обновляется при удалении строк. Кроме того, я могу сохранить значки со строками? В случае, если пользователь хочет продолжить перемещение их в разные папки.
  • 1
    http://jsfiddle.net/YK5fg/7/ обновленная скрипка
Показать ещё 5 комментариев

Ещё вопросы

Сообщество Overcoder
Наверх
Меню