Блог

Используемый скрипт плагина:

   <script src="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css"></script>
  <script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
  <script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>
  

У меня есть datatable с максимальной строкой записей 19K. Я не использую обработку на стороне сервера или AJAX, это просто DOM. Я попытался перейти на обработку на стороне сервера, но повторная реализация всех функций занимает очень много времени. все дело в ресурсах изображения, которые были использованы для каждой записи, согласно моему предположению, что делает обработку данных самой медленной. Хотя на локальном он работает идеально. Различия между локальным и серверным представлены ниже.

ЛОКАЛЬНЫЙ ХОСТИНГ

РАБОТАЕТ НА СЕРВЕРЕ

Способ реализации таблицы, блок кода приведен ниже.

           var tableone= $('#tableX').DataTable({
          "scroller": true,
          "deferRender": true,
          "responsive": true,
          "order": [[1, 'asc']],  
          "paging": true, 
          "pageLength": 150,          
          "bFilter": false,
          "searching": true,
          "rowCallback": function( row, data, index ) {
            if ( data[9] == "MATCH COLUMN" )
            {
              $('td', row).css('background-color', '#b5b5de');
            }
            else if ( data[9] != "MATCH COLUMN" )
            {
              $('td', row).css('background-color', 'white');
            }
          },
          "drawCallback": function ( settings ) {
            var api = this.api();
            var rows = api.rows( {page:'current'} ).nodes();
            var last=null; 
            api.column(1, {page:'current'} ).data().each( function ( group, i ) {
                if ( last !== group ) {
                    $(rows).eq( i ).before(
                      '<tr class="group"><td class="delBack"colspan="14">' '<strong> THIS SHOULD BE GROUPIFIED : ' group '</strong></td></tr>'
                    );
                    last = group;
                }
            } );
          },
          "autoWidth": false,
          "aoColumnDefs": [{ "bSortable": false, "bSearchable": false, "aTargets": [2,4,5,6,7,8,9,10,11,12,13 ] } ],
          "aoColumns": [{ "sWidth": "5%" }, { "sWidth": "5%" },{ "sWidth": "2%" }, { "sWidth": "3%" },{ "sWidth": "2%" },{ "sWidth": "19%" },{ "sWidth": "10%" },{ "sWidth": "3%" },{ "sWidth": "3%" },{ "sWidth": "3%" },{ "sWidth": "15%" },{ "sWidth": "5%" },{ "sWidth": "15%" },{"sWidth":"15%"}]
          });
  

Я знаю о DOM, ИСТОЧНИКЕ AJAX и SSP. Но это должно быть сделано через клиентскую часть, а не сервер. Что можно сделать для повышения производительности с помощью эффективного способа извлечения изображений или ресурсов, если это является причиной чрезмерной нагрузки. Приветствуется любое предложение.

РЕДАКТИРОВАТЬ — ЗАГРУЗКА ИЗОБРАЖЕНИЯ

Изображение будет загружено в виде строки на основе базы данных, файлы будут загружены в папку. Когда изображения извлекаются в datatable, это делается следующим образом

 $upload_dir = 'uploads/';
<tbody>
      <?php
      $sql  = "SELECT * FROM `product` WHERE `status`= 'New'";
      $result = mysqli_query($conn, $sql);   
      if(mysqli_num_rows($result)){
      while($row = mysqli_fetch_assoc($result)) {

<td><img src ="<?php echo $upload_dir.$image ?>" height="30" width="30" data-toggle="modal" data-target="#imagemodal<?php echo $row['id']?>"></td>
<?php
    }
?>
  

Затем при нажатии на миниатюру изображения полное изображение будет показано в модальном виде.

РЕДАКТИРОВАТЬ — ПОСЛЕ УДАЛЕНИЯ ИЗОБРАЖЕНИЯ

Местные новости

ЖИВЫЕ КОНЦЕРТЫ

После удаления ресурсов изображения это неплохо. но для 19 тысяч записей все еще 10 секунд. не слишком ли это много?

Единственным решением, которое помогло мне, был переход на серверную часть с надлежащими реализациями, и разбивка на страницы была обязательной, чтобы сделать это еще быстрее. Я переработал все приложение, и запросы обрабатывались с помощью AJAX, что значительно уменьшило загрузку страницы. это с фактическим размером изображения. Спасибо всем, кто пытался это исправить.