在 Tabulator 网格中渲染 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 行对数据进行分页，而不是分页的重点，这就是减慢速度的原因