Очень медленное время загрузки для рендеринга 7k записей в сетке табулятора - PullRequest
0 голосов
/ 01 апреля 2020

Мне нужна помощь с этой библиотекой, она работает некорректно или неправильно. Я использую 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>

1 Ответ

0 голосов
/ 10 апреля 2020

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

Разбивка на страницы с 300 строками на странице, скорее, побеждает точку разбивки на страницы, что и замедляет работу

...