jQuery - Appending 10k Rows to a Table after AJAX call

90 Views Asked by At

I have a web page that will receive 10k-row CSV data on which I have to call API to get more details after a successful ajax call I have to append all these 10k rows (5 columns - 4 input fields with jQuery validation rules). After successfully appending 10K rows and its validation rules web page becomes a bit slow like each button click will take 10 - 15 sec to reflect can I do anything to avoid this or reduce the time?

Things I have done:

  • Replace all forEach, each loop with a basic for loop.
  • Reduced validation overheads with hidden input fields.
  • Used setTimeOut between 100 rows to avoid resource eating up by the browser(And tried to mimic infinity scroll by appending on 100 rows on 1-sec intervals).
let targetProducts = new Set();
let htmlToAppend = '', itemIndex = 0; 
let itemCodesToValidate = new Map(), itemTotalLength = responseData.body.length; 

let appendToTable = () => {
    for (; itemIndex < itemTotalLength; itemIndex++) {
        let item = responseData.body[itemIndex];
    
        if (!(targetProducts.has(item['item_code']))) {
            htmlToAppend += addTargetProductRow(
                item['item_code'],
                item['item_name'],
                item['price'],
                bulkUpdateValues[item['item_code']]?.a ?? '',
                bulkUpdateValues[item['item_code']]?.b ?? '',
                bulkUpdateValues[item['item_code']]?.c ?? '',
                bulkUpdateValues[item['item_code']]?.d ?? ''
            );
        }

        itemCodesToValidate.set(item['item_code'], 1);
        itemCodes.set(item['item_code'], 1);

        if (itemIndex + 1 < itemTotalLength && itemIndex % 100 == 0) {
            setTimeout(appendToTable, 1000);
            itemIndex++;
            break;
        }
    }

    if (htmlToAppend != '') {
        $('#table_to_append tbody').append(htmlToAppend);
        addTargetProductValidationRules(itemCodesToValidate);

        htmlToAppend = '';
        itemCodesToValidate.clear();
    }

    if ($('#table_to_append tbody tr').length) {
        $('#bulk_update_button').prop('disabled', false);
    }
};

appendToTable();

Nb: Can't do pagination(I know this is dumb but it's the requirement).

0

There are 0 best solutions below