jQuery - сортировка HTML-таблицы

Question

Я видел много сообщений о сортировке, но никто не отвечает на то, что может показаться типичным сценарием.

Я пытаюсь сортировать и HTML-таблицу с помощью jQuery, где ссылки, которые я нажимаю для сортировки столбцов, не существуют в той таблице, которая сортируется. Я «подделываю» заголовок таблицы, чтобы выполнить требование прокрутки таблицы.

Что я делаю сейчас -

• нагрузки массив со значениями в столбце, которые должны быть выбранных вместе с рядом идентификаторы
• Сортировки что массив на основе этих значения
• Вставка строки в таблицу HTML на основе индекса из этого отсортированного массива.

Как и ожидалось, это займет около 10 секунд для локального запуска.

Пример кода -

var sortArr = new Array(); 

$('tr td.' + name).each(function() { 
    ResidentID = $(this).parent().attr("ResidentID"); 
    BID = $(this).parent().attr("BRecordID"); 

    if ($(this).find('select').length > 0) { //ddls 
     columnText = $(this).find('select option:selected').text(); 
     sortArr.push({ residentId: ResidentID, bID: BID, text: columnText }); 
    } 
    else if ($(this).find('input').length > 0) {//Textbox or checkboxes 
     columnText = $(this).find('input').val(); 
     sortArr.push({ residentId: ResidentID, bID: BID, text: columnText }); 
    } 
}); 

if (sortDirection == 'ascending') { 
    colHeader.attr('sortorder', 'descending') 
    sortArr = sortArr.sort(function (v, t) { 
     return v.text.localeCompare(t.text); 
    }); 
} 
else { 
    colHeader.attr('sortorder', 'ascending') 
    sortArr = sortArr.sort(function (v, t) { 
     return t.text.localeCompare(v.text); 
    }); 
} 

for (var i = 0; i < sortArr.length; i++) { 
    $("[id$=fixedDataTable] > tbody > tr").eq(i).after($("[id$=trFixedDataRow_" + sortArr[i].residentId + "]")); 

    $("[id$=residentDetailDataTable] > tbody > tr").eq(i).after($("[id$=trResScrollDataRow_" + sortArr[i].residentId + "]")); 

    $("[id$=bDetailDataTable] > tbody > tr").eq(i).after($("[id$=trBScrollDataRow_" + sortArr[i].bmrID + "]")); 
} 

Есть ли более быстрый способ для достижения этой цели?

Answer 1

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

1. Избегайте восстановления объекта jquery. Например, у вас есть $(this) во многих местах. Загрузите его в локальную переменную.

2. Вместо прямого манипулирования куполом. Рассмотрим наличие данных в 2D-массиве, который непосредственно отображает таблицу dom. Я думаю, что это будет самое большое улучшение. Вы можете отсортировать 2D-массив на основе того, что хотите, а затем просто заполнить таблицу dom.

3. Учитывая, что каждая строка таблицы содержит уникальный идентификатор, основанный на его ячейке/строке. Таким образом, 2D-массив может отображать более легко

   Возвращаясь к коду, для этой части сниппета

   for (var i = 0; i < sortArr.length; i++) { 
       $("[id$=fixedDataTable] > tbody > tr").eq(i).after($("[id$=trFixedDataRow_" +  sortArr[i].residentId + "]")); 
   
       $("[id$=residentDetailDataTable] > tbody > tr").eq(i).after($(" [id$=trResScrollDataRow_" + sortArr[i].residentId + "]")); 
   
       $("[id$=bDetailDataTable] > tbody > tr").eq(i).after($("[id$=trBScrollDataRow_" + sortArr[i].bmrID + "]")); 
   } 
   

вы можете просто сохранить результат $("[id$=...tr") в переменную перед для так что jQuery не должен искать его на каждой итерации? И вы, вероятно, можете просто индексировать кэшированные данные самостоятельно?

Answer 2

Придерживаясь этого способа сортировки, кажется, единственный подход.