How to improve page load speed when rendering dynamic tables from database in PHP + jQuery AJAX?

I am currently using this code

<script type="text/javascript">
    function LoadChallanTable() {
        var companyID = $('#cbCompanyName').val();
        if (companyID !== '' && companyID !== null) {
            $.ajax({
                type: 'POST',
                url: 'LoadChallanTable.php',
                data: {companyID: companyID},
                success: function (data)
                {
                    if (data !== '') {
                        var allProductList = jQuery.parseJSON(data);

                        var tableQuery = '<table id="tblChallanProduct" class="tableHead"><tr><td class="tableCell" style="display:none;">Product ID</td><td class="tableCell">Product Name</td><td class="tableCell">Purchase Quantity</td><td class="tableCell">Free Quantity</td><td class="tableCell">Purchase Amount</td><td class="tableCell">Register DP</td><td class="tableCell">Purchase DP</td><td class="tableCell"></td></tr>';
                        for (var i = 0; i < allProductList.length; i++) {
                            if (i % 2 === 0) {
                                tableQuery = tableQuery + '<tr class="tableRow"><td style="display:none;"><input id="prodID' + (i + 1) + '" name="prodID' + (i + 1) + '" value="' + allProductList[i]['productID'] + '"></td><td class="tableCell">' + allProductList[i]['productName'] + '</td><td class="tableCell"><input type="text" class="tableCell" id="purQty' + (i + 1) + '" name="purQty' + (i + 1) + '" value="0" style="text-align:Right;" onkeyup="KeyUpEvent(this, event)" onfocus="OnFocusFunction(this)"></td><td class="tableCell"><input type="text" class="tableCell" id="freQty' + (i + 1) + '" name="freQty' + (i + 1) + '" value="0" style="text-align:Right;" onkeyup="KeyUpEvent(this, event)" onfocus="OnFocusFunction(this)"></td><td class="tableCell"><input type="text" class="tableCell" id="purAmt' + (i + 1) + '" name="purAmt' + (i + 1) + '" value="0" style="text-align:Right;" onkeyup="KeyUpEvent(this, event)" onfocus="OnFocusFunction(this)"></td><td class="tableCell" id="pRegDP' + (i + 1) + '" name="pRegDP' + (i + 1) + '">' + parseFloat(allProductList[i]['dP']).toFixed(3) + ' Tk</td><td class="tableCell"><input type="text" readonly="true" class="inputPTable" id="pPurDP' + (i + 1) + '" name="pPurDP' + (i + 1) + '" style="text-align:Right;" size="6" value="0.000 Tk"></td><td class="tableCell" id="errMsg' + (i + 1) + '"></td></tr>';
                            } else {
                                tableQuery = tableQuery + '<tr class="tableRowOdd"><td style="display:none;"><input id="prodID' + (i + 1) + '" name="prodID' + (i + 1) + '" value="' + allProductList[i]['productID'] + '"></td><td class="tableCell">' + allProductList[i]['productName'] + '</td><td class="tableCell"><input type="text" class="tableCell" id="purQty' + (i + 1) + '" name="purQty' + (i + 1) + '" value="0" style="text-align:Right;" onkeyup="KeyUpEvent(this, event)" onfocus="OnFocusFunction(this)"></td><td class="tableCell"><input type="text" class="tableCell" id="freQty' + (i + 1) + '" name="freQty' + (i + 1) + '" value="0" style="text-align:Right;" onkeyup="KeyUpEvent(this, event)" onfocus="OnFocusFunction(this)"></td><td class="tableCell"><input type="text" class="tableCell" id="purAmt' + (i + 1) + '" name="purAmt' + (i + 1) + '" value="0" style="text-align:Right;" onkeyup="KeyUpEvent(this, event)" onfocus="OnFocusFunction(this)"></td><td class="tableCell" id="pRegDP' + (i + 1) + '" name="pRegDP' + (i + 1) + '">' + parseFloat(allProductList[i]['dP']).toFixed(3) + ' Tk</td><td class="tableCell"><input type="text" readonly="true" class="inputPTableOdd" id="pPurDP' + (i + 1) + '" name="pPurDP' + (i + 1) + '" style="text-align:Right;" size="5" value="0.000 Tk"></td><td class="tableCell" id="errMsg' + (i + 1) + '"></td></tr>';
                            }
                        }

                        $('#tblChallanProduct').html(tableQuery + '</table>');
                    } else {
                        $('#tblChallanProduct').html(data);
                        alert('No record found.');
                    }
                },
                error: function () {
                    alert('Error occurred.');
                }
            });
        }
    }
</script>

where LoadChallanTable.php is

$allProductList = $productManager->LoadProduct($companyID);

if (count($allProductList) > 0) {
    echo json_encode($allProductList);
} else {
    echo '';
}

where LoadChallanTable.php creates a list of invoices and sends it as json_encoded and I am making an ajax call to my UI, taking the data from that json, creating a table using javascript and assigning it to the html of the tblChallanProduct table. Which improved much page load speed.

Instead of previous one was

<script type="text/javascript">
    function LoadChallanTable() {
        var companyID = $('#cbCompanyName').val();
        if (companyID !== '' && companyID !== null) {
            $.ajax({
                type: 'POST',
                url: 'LoadChallanTable.php',
                data: {companyID: companyID},
                success: function (data)
                {
                    $('#tblChallanProduct').html(data);
                    if (data === '') {
                        alert('No record found.');
                    }
                },
                error: function () {
                    alert('Error occurred.');
                }
            });
        }
    }
</script>

where LoadChallanTable.php is

$allProductList = $productManager->LoadProduct($companyID);

if (count($allProductList) > 0) {
    $tableQuery = "<table id="tblChallanProduct" class="tableHead"><tr><td class="tableCell" style="display:none;">Product ID</td><td class="tableCell">Product Name</td><td class="tableCell">Purchase Quantity</td><td class="tableCell">Free Quantity</td><td class="tableCell">Purchase Amount</td><td class="tableCell">Register DP</td><td class="tableCell">Purchase DP</td><td class="tableCell"></td></tr>";
    for ($i = 0; $i < count($allProductList); $i++) {
        if ($i % 2 == 0) {
            $tableQuery = $tableQuery . "<tr class="tableRow"><td style="display:none;"><input id="prodID" . ($i + 1) . "" name="prodID" . ($i + 1) . "" value="" . $allProductList[$i]->productID . ""></td><td class="tableCell">" . $allProductList[$i]->productName . "</td><td class="tableCell"><input type="text" class="tableCell" id="purQty" . ($i + 1) . "" name="purQty" . ($i + 1) . "" value="0" style="text-align:Right;" onkeyup="KeyUpEvent(this, event)" onfocus="OnFocusFunction(this)"></td><td class="tableCell"><input type="text" class="tableCell" id="freQty" . ($i + 1) . "" name="freQty" . ($i + 1) . "" value="0" style="text-align:Right;" onkeyup="KeyUpEvent(this, event)" onfocus="OnFocusFunction(this)"></td><td class="tableCell"><input type="text" class="tableCell" id="purAmt" . ($i + 1) . "" name="purAmt" . ($i + 1) . "" value="0" style="text-align:Right;" onkeyup="KeyUpEvent(this, event)" onfocus="OnFocusFunction(this)"></td><td class="tableCell" id="pRegDP" . ($i + 1) . "" name="pRegDP" . ($i + 1) . "">" . number_format((float) $allProductList[$i]->dP, 3, ".", "") . " Tk</td><td class="tableCell"><input type="text" readonly="true" class="inputPTable" id="pPurDP" . ($i + 1) . "" name="pPurDP" . ($i + 1) . "" style="text-align:Right;" size="5" value="0.000 Tk"></td><td class="tableCell" id="errMsg" . ($i + 1) . ""></td></tr>";
        } else {
            $tableQuery = $tableQuery . "<tr class="tableRowOdd"><td style="display:none;"><input id="prodID" . ($i + 1) . "" name="prodID" . ($i + 1) . "" value="" . $allProductList[$i]->productID . ""></td><td class="tableCell">" . $allProductList[$i]->productName . "</td><td class="tableCell"><input type="text" class="tableCell" id="purQty" . ($i + 1) . "" name="purQty" . ($i + 1) . "" value="0" style="text-align:Right;" onkeyup="KeyUpEvent(this, event)" onfocus="OnFocusFunction(this)"></td><td class="tableCell"><input type="text" class="tableCell" id="freQty" . ($i + 1) . "" name="freQty" . ($i + 1) . "" value="0" style="text-align:Right;" onkeyup="KeyUpEvent(this, event)" onfocus="OnFocusFunction(this)"></td><td class="tableCell"><input type="text" class="tableCell" id="purAmt" . ($i + 1) . "" name="purAmt" . ($i + 1) . "" value="0" style="text-align:Right;" onkeyup="KeyUpEvent(this, event)" onfocus="OnFocusFunction(this)"></td><td class="tableCell" id="pRegDP" . ($i + 1) . "" name="pRegDP" . ($i + 1) . "">" . number_format((float) $allProductList[$i]->dP, 3, ".", "") . " Tk</td><td class="tableCell"><input type="text" readonly="true" class="inputPTableOdd" id="pPurDP" . ($i + 1) . "" name="pPurDP" . ($i + 1) . "" style="text-align:Right;" size="5" value="0.000 Tk"></td><td class="tableCell" id="errMsg" . ($i + 1) . ""></td></tr>";
        }
    }
    echo $tableQuery . "</table>";
} else {
    echo '';
}

where LoadChallanTable.php creates a list of invoices and sends it as a string and I am making an ajax call to read the string and assigning it directly to the html of the tblChallanProduct table.
If you have any other methods that can improve page load speed further, please let me know. I will appreciate it.