加载时间非常慢，无法在制表符网格中呈现7k条记录

Question

我需要有关此库的一些帮助，它无法正常运行，或者我没有正确执行。我正在使用PHP foreach来调用JSON /数据并将其放在一起，然后使用JS来获取数据并进行渲染，这是我可能做错的任何线索吗？

<script>
 var tabledata = [
    <?php foreach ($_productCollection as $_product): ?>
        <?php $productImage = $block->getImage($_product, $imageDisplayArea); ?>
        <?php $postParams = $block->getAddToCartPostParams($_product); ?>
        {picture:"<?php echo $productImage->getImageUrl() ?>", material:"<a href=\"<?php echo $_product->getProductUrl() ?>\"><?php echo $_product->getName() ?></a>", description:"<?php echo htmlspecialchars(trim($_product->getProhyddescription())) ?>", productCategory:"<?php echo $_product->getProdcat() ?>", shortName:"<?php echo $_product->getShortname() ?>", orderCode:"<?php echo trim($_product->getOrdercode()) ?>", literature:"<?php echo $_product->getIncluded() ?>", notes:"<?php echo $_product->getNotes() ?>", qtyDBN:"<?php echo $_product->getQtydbn() ?>", qtyWHS:"<?php echo $_product->getQtywhs() ?>", price:"<?php echo $_product->getPrice() ?>", mda:"<?php echo $_product->getMda() ?>", order:"<form data-role=\"tocart-form\" data-product-sku=\"<?=$block->escapeHtml($_product->getSku()) ?>\" action=\"<?=/* @NoEscape */ $postParams['action'] ?>\" method=\"post\"> <input type=\"hidden\" name=\"product\" value=\"<?=/* @escapeNotVerified */ $postParams['data']['product'] ?>\"/> <input type=\"hidden\" name=\"<?=/* @escapeNotVerified */ Action::PARAM_NAME_URL_ENCODED ?>\" value=\"<?=/* @escapeNotVerified */ $postParams['data'][Action::PARAM_NAME_URL_ENCODED] ?>\"/> <?= addslashes($block->getBlockHtml('formkey')) ?> <button type=\"submit\" title=\"<?=$block->escapeHtml(__('Add to Cart')) ?>\" class=\"action tocart primary\"> <span> <?=/* @escapeNotVerified */ __('Add to Cart') ?> </span></button> </form>", stdTime:"<?php echo $_product->getStdleadtime() ?>" },
    <?php endforeach; ?>
 ];

 document.addEventListener("DOMContentLoaded", function(event) {
     var table = new Tabulator("#products", {
        height:600, // set height of table (in CSS or here), this enables the Virtual DOM and improves render speed dramatically (can be any valid css height value)
        data: tabledata, //assign data to table
        layout:"fitColumns", //fit columns to width of table (optional)
        pagination:"local",
        paginationSize:300,
        headerSort:true,
        virtualDomBuffer: 500,
        cellHozAlign:"center",
        columnCalcs:"both",
        paginationSizeSelector:[300, 500, 600, 700, 800, 1000],
            columns:[ //Define Table Columns
            {title:"Picture", field:"picture", width:100, responsive: 0, formatter:"image"},
            {title:"Material", field:"material", formatter:"html", headerFilter:true},
            {title:"Description", field:"description", headerFilter:true},
            {title:"Product Category", field:"productCategory", headerFilter:true},
            //{title:"Short Name", field:"shortName", headerFilter:true},
            {title:"Order Code", field:"orderCode", headerFilter:true},
            {title:"Literature", field:"literature", headerFilter:true, headerTooltip:"Included in Latest Catalog Literature? (Promote On New Applications)"},
            {title:"Notes", field:"notes", headerFilter:true},
            {title:"Qty DBN", field:"qtyDBN", sorter:"number", headerFilter:true},
            {title:"Qty WHS", field:"qtyWHS", sorter:"number", headerFilter:true},
            {title:"Price", field:"price", formatter:"money", formatterParams:{
                symbol:"R",
            }},
            {title:"MDA", field:"mda"},
            {title:"Order", field:"order", formatter:"html"},
            {title:"STD L/Time", field:"stdTime", headerFilter:true},
        ]
     });


 });
 </script>

Answer 1

您不应该将页面大小设置得太大，如果要对数据进行分页，则表中不应该具有滚动条，您要么要设置表的高度，然后让制表符用数字填充空间合适的行数，或设置页面大小并让制表符确定高度

页面每页有300行的分页而不是分页的目的，这使事情变慢了