AJAX добавил складываемые строки к таблице jQuery / javascript Tablesorter, в которой отсутствуют необходимые атрибуты - PullRequest
Новая
       36

AJAX добавил складываемые строки к таблице jQuery / javascript Tablesorter, в которой отсутствуют необходимые атрибуты

1 голос
/ 11 февраля 2012

Я пытаюсь добавить строки при прокрутке таблицы, используя модифицированную версию Tablesorter.js: http://www.pengoworks.com/workshop/jquery/tablesorter/tablesorter.htm. Она модифицируется в том смысле, что допускает складывающиеся строки.

Проблема, с которой я столкнулся, заключается в том, что при прокрутке и вызове AJAX для загрузки новых строк этим новым строкам не хватает атрибутов других строк, которые позволяют их свернуть / развернуть.

Вот некоторые проблемы с HTML для этих добавленных строк:

  1. кликабельное <a> имя класса тега не переключается с «расширенного» на «складной»
  2. атрибуты стиля переключаемых столбцов <td> не имеют значения по умолчанию "display:none" и не переключаются на "display: table-cell".

Вот JS для запуска AJAX-запроса при прокрутке и для Tablesorter. Я сохранил HTML точно так же, как в демонстрационной версии на ссылке pengoworks.com, которую я упомянул выше. 

    $(function(){   
        $(document).endlessScroll({ 
            callback: function(i) { 
            loaded += 10;
                $.post("/more/" + loaded, function(data){
                    $("#table"+ " tbody").append(data);
                    $("#table").trigger("update");
                }); 
            } 
        }); 

        $("#table").collapsible("td.collapsible", {
                collapse: true
            }).tablesorter({
            sortList: [[1,0]],      
            headers: {0: {sorter: false}}
            , widgets: ['zebra']
                , onRenderHeader: function (){
                    this.wrapInner("<span></span>");
                }
            });
  });

ОБНОВЛЕНИЕ Пожалуйста, ознакомьтесь со следующим jsfiddle, целью которого является AJAXификация таблицы складных таблиц: http://jsfiddle.net/Lcztc/8. Это не правда AJAX, но вы поняли идею. Кроме того, вот ссылка на код collapsible.js: http://www.pengoworks.com/workshop/jquery/tablesorter/jquery.tablesorter.collapsible.js. Согласно Амару (см. Ниже), довольно ясно, что мне нужно исправить части этого плагина, которые относятся к привязкам элементов таблицы, чтобы они распознавали добавленные элементы.

К сожалению, у вышеуказанного jsfiddle по-прежнему есть две основные проблемы: 1) потеря исходных строк теряется каждый раз, когда вы нажимаете кнопку «clickAJAX»; 2) добавленные строки никогда не складываются и не расширяются. Все еще некоторый прогресс ...

Ответы [ 2 ]

1 голос
/ 11 февраля 2012

Вы можете проверить это, не уверен, но это может быть вероятной причиной.

Когда вы извлекаете данные и добавляете их в таблицу, привязка тегов a в новом html не происходит.Другими словами, если у вас есть 10 тегов привязки в начале (которые можно переключать), после прокрутки вы получаете новые 5 тегов, эти теги не привязываются к обработчику, и поэтому они не переключаются.Возможно, это проблема с td.

. Вы можете изучить .on() функцию jQuery.

В случае OP он использует более старую версию jQuery (1.6.4), поэтому ему нужно будет использовать .live()

Надеюсь, эта информация вам поможетЕсли бы вы могли предоставить больше информации, я мог бы помочь более точным ответом.

0 голосов
/ 11 февраля 2012

Нельзя просто добавить HTML в Tablesorter после его инициализации. Это не «поймет» это.

Посмотрите на этот пост: проблема с jquery tableorter с динамически добавленными строками

После добавления HTML-кода необходимо обновить сортировщик таблиц; $("table").trigger("update");

Смотри также: http://tablesorter.com/docs/example-ajax.html

...