DataTables загрузки страницы выпуска

Я использую datatables v1.10.11 и Jquery V 2.2.0DataTables загрузки страницы выпуска

Одна из особенностей DataTables позволяет «сокрытие» столбцов с помощью следующей опции columns.visible API.

<script type = "text/javascript"> 
    $(document).ready(function() { 
    //Hide the first column with columnDefs: 
    $('#example').dataTable({ 
     "columnDefs": [{ 
     "visible": false, 
     "targets": 0 
     }] 
    }); 
    }); 
    </script>

Снова это действительно работает, однако при загрузке страницы я могу видеть скрытые столбцы на долю секунды (очень кратко).

Это похоже на случай использования Google Chrome (версия 48.0.2564.103 m). И IE (11), и FFox (41.0.1) являются точными, таблица загружается, как ожидалось, без «отставания».

Зачем это произошло? Я думал, что это может быть связано с заказом моей JS или CSS, единственной зависимостью, требуемой для данных datatables, является JQuery, и я поставил ее первым.

См. Порядок моих JS и CSS ниже;

<!DOCTYPE html> 
<html lang="en"> 

    <head> 

     <meta charset="utf-8"> 
     <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
     <meta name="description" content=""> 
     <meta name="author" content=""> 

     <title>My Title</title> 

     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css"> 
     <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.10/css/dataTables.bootstrap.min.css"> 
     <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.1.0/css/buttons.bootstrap.min.css"/> 
     <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/responsive/2.0.0/css/responsive.bootstrap.min.css"/> 
     <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/select/1.1.0/css/select.bootstrap.min.css"/> 
     <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.css"/> 
     <link rel="stylesheet" type="text/css" href="http://cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.css"/> 
     <!-- Custom CSS --> 
     <link rel="stylesheet" type="text/css" href="css/custom.css"/> 

     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> 
     <script src="//cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js"></script> 
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script> 
     <script src="http://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script> 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script> 
     <script src="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/pdfmake.min.js"></script> 
     <script src="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/vfs_fonts.js"></script> 
     <script src="https://cdn.datatables.net/1.10.10/js/dataTables.bootstrap.min.js"></script> 
     <script src="https://cdn.datatables.net/buttons/1.1.0/js/dataTables.buttons.min.js"></script> 
     <script src="https://cdn.datatables.net/buttons/1.1.0/js/buttons.bootstrap.min.js"></script> 
     <script src="https://cdn.datatables.net/buttons/1.1.0/js/buttons.html5.min.js"></script> 
     <script src="https://cdn.datatables.net/buttons/1.1.0/js/buttons.print.min.js"></script> 
     <script src="https://cdn.datatables.net/responsive/2.0.0/js/dataTables.responsive.min.js"></script> 
     <script src="https://cdn.datatables.net/responsive/2.0.0/js/responsive.bootstrap.min.js"></script> 
     <script src="https://cdn.datatables.net/select/1.1.0/js/dataTables.select.min.js"></script> 
     <script src="https://jquery-datatables-column-filter.googlecode.com/svn/trunk/media/js/jquery.dataTables.columnFilter.js"></script> 
     <script src="http://cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.js"></script> 

     <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> 
     <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> 
     <!--[if lt IE 9]> 
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> 
      <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script> 
     <![endif]--> 
    </head>

Я не уверен, как устранить эту проблему. Я уже пытался переупорядочить и удалить определенные файлы JS и CSS, но, похоже, это не имеет никакого значения. Есть ли какая-то проблема с загрузкой Chrome?

Любая помощь приветствуется.

источник

2016-02-15 johnny_s

Является ли ваш Javascript код внутри $ (документ) .ready() или другое событие загрузки страницы? – RPichioli

Хорошо, похоже на некоторую проблему синхронизации между загрузкой страницы и загрузкой функций компонента. Вы можете учесть, что для столбцов используется CSS по умолчанию. – RPichioli

Это происходит потому, что dataTables запускается после загрузки документа, если вы находитесь в $ (документе) .ready ({}); блок. Таким образом, в основном столбцы не скрываются, пока javascript не добавит необходимый CSS, чтобы скрыть их. Вы можете применить свой собственный CSS к этим ячейкам, если вам не нужна задержка в их скрытии.

Просто добавьте к ним класс и примените отображение: none к классу.

Или вы можете установить таблицу для отображения: none, а затем показать ее, когда инициализация dataTables выполняется с помощью события initComplete. Таким образом, когда это будет показано, столбец уже будет скрыт.

<script type = "text/javascript"> 
    $(document).ready(function() { 
     //Hide the first column with columnDefs: 
     $('#example').dataTable({ 
      "columnDefs": [{ 
       "visible": false, 
       "targets": 0 
      }], 
      "initComplete": function() { 
       $(this).show(); 
      } 
     }); 
    }); 
</script>

UPDATE

При условии полного jsFiddle, работающий пример здесь ...

https://jsfiddle.net/rsmcyz4q/

Полный пример ниже ...

HTML

<table id="example"> 
<thead> 
    <tr> 
    <th>COLUMN 1</th> 
    <th>COLUMN 2</th> 
    <th>COLUMN 3</th> 
    </tr> 
</thead> 
<tbody> 
    <tr> 
    <td>ROW 1</td> 
    <td>ROW 1</td> 
    <td>ROW 1</td> 
    </tr> 
    <tr> 
    <td>ROW 2</td> 
    <td>ROW 2</td> 
    <td>ROW 2</td> 
    </tr> 
    <tr> 
    <td>ROW 3</td> 
    <td>ROW 3</td> 
    <td>ROW 3</td> 
    </tr> 
</tbody> 
</table>

CSS

#example { display: none; }

JAVASCRIPT

$(document).ready(function() { 
    //Hide the first column with columnDefs: 
    $('#example').dataTable({ 
     "columnDefs": [{ 
     "visible": false, 
     "targets": 0 
     }], 
     "initComplete": function() { 
     $(this).show(); 
     } 
    }); 
    });

источник

2016-02-15 16:26:08 Phil

@johnny_s, не знаю, почему это происходит только в хроме. Вы можете установить таблицу для отображения: none, а затем показать ее, когда dataTAbles инициализируется с помощью события initComplete. Таким образом, когда это будет показано, столбец уже будет скрыт. – Phil

@johnny_s Я обновил пример, чтобы показать initComplete. Если использование $ (this) .show() не работает, попробуйте использовать $ ('# example'). Show(); – Phil

Спасибо за это @Phil однако он не работает. Ничего не произошло. Всякий раз, когда я заменяю '$ (this) .show();' с 'alert ('DataTables завершил свою инициализацию.');' Я вижу предупреждение. Есть идеи? Я также попробовал '$ ('# example'). Show()'. –

DataTables загрузки страницы выпуска

ответ

Смежные вопросы