Arhn - архитектура программирования

Показать jQuery DataTable после полной загрузки

Мне нужно отобразить dataTable только после того, как он будет полностью загружен (иначе содержимое «мигает» до завершения работы скрипта).

Вот пример того, как выглядит моя таблица:

HTML:

 <table id="dataTable" class="table table-striped table-bordered" style="width:100%">
      <thead>
        <tr>
          <th>First name</th>
          <th>Last name</th>
          <th>Position</th>
          <th>Office</th>
          <th>Age</th>
          <th>Start date</th>
          <th>Salary</th>
          <th>Extn.</th>
          <th>E-mail</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Tiger</td>
          <td>Nixon</td>
          <td>System Architect</td>
          <td>Edinburgh</td>
          <td>61</td>
          <td>2011/04/25</td>
          <td>$320,800</td>
          <td>5421</td>
          <td>[email protected]</td>
        </tr>
        <tr>
          <td>Garrett</td>
          <td>Winters</td>
          <td>Accountant</td>
          <td>Tokyo</td>
          <td>63</td>
          <td>2011/07/25</td>
          <td>$170,750</td>
          <td>8422</td>
          <td>[email protected]</td>
        </tr>
        <tr>
          <td>Ashton</td>
          <td>Cox</td>
          <td>Junior Technical Author</td>
          <td>San Francisco</td>
          <td>66</td>
          <td>2009/01/12</td>
          <td>$86,000</td>
          <td>1562</td>
          <td>[email protected]</td>
        </tr>
        <tr>
          <td>Cedric</td>
          <td>Kelly</td>
          <td>Senior Javascript Developer</td>
          <td>Edinburgh</td>
          <td>22</td>
          <td>2012/03/29</td>
          <td>$433,060</td>
          <td>6224</td>
          <td>[email protected]</td>
        </tr>
        <tr>
          <td>Airi</td>
          <td>Satou</td>
          <td>Accountant</td>
          <td>Tokyo</td>
          <td>33</td>
          <td>2008/11/28</td>
          <td>$162,700</td>
          <td>5407</td>
          <td>[email protected]</td>
        </tr>
        <tr>
          <td>Brielle</td>
          <td>Williamson</td>
          <td>Integration Specialist</td>
          <td>New York</td>
          <td>61</td>
          <td>2012/12/02</td>
          <td>$372,000</td>
          <td>4804</td>
          <td>[email protected]</td>
        </tr>
        <tr>
          <td>Herrod</td>
          <td>Chandler</td>
          <td>Sales Assistant</td>
          <td>San Francisco</td>
          <td>59</td>
          <td>2012/08/06</td>
          <td>$137,500</td>
          <td>9608</td>
          <td>[email protected]</td>
        </tr>
        <tr>
          <td>Rhona</td>
          <td>Davidson</td>
          <td>Integration Specialist</td>
          <td>Tokyo</td>
          <td>55</td>
          <td>2010/10/14</td>
          <td>$327,900</td>
          <td>6200</td>
          <td>[email protected]</td>
        </tr>
        <tr>
          <td>Colleen</td>
          <td>Hurst</td>
          <td>Javascript Developer</td>
          <td>San Francisco</td>
          <td>39</td>
          <td>2009/09/15</td>
          <td>$205,500</td>
          <td>2360</td>
          <td>[email protected]</td>
        </tr>
        <tr>
          <td>Sonya</td>
          <td>Frost</td>
          <td>Software Engineer</td>
          <td>Edinburgh</td>
          <td>23</td>
          <td>2008/12/13</td>
          <td>$103,600</td>
          <td>1667</td>
          <td>[email protected]</td>
        </tr>
        <tr>
          <td>Jena</td>
          <td>Gaines</td>
          <td>Office Manager</td>
          <td>London</td>
          <td>30</td>
          <td>2008/12/19</td>
          <td>$90,560</td>
          <td>3814</td>
          <td>[email protected]</td>
        </tr>
        <tr>
          <td>Quinn</td>
          <td>Flynn</td>
          <td>Support Lead</td>
          <td>Edinburgh</td>
          <td>22</td>
          <td>2013/03/03</td>
          <td>$342,000</td>
          <td>9497</td>
          <td>[email protected]</td>
        </tr>
        <tr>
          <td>Charde</td>
          <td>Marshall</td>
          <td>Regional Director</td>
          <td>San Francisco</td>
          <td>36</td>
          <td>2008/10/16</td>
          <td>$470,600</td>
          <td>6741</td>
          <td>[email protected]</td>
        </tr>
        <tr>
          <td>Haley</td>
          <td>Kennedy</td>
          <td>Senior Marketing Designer</td>
          <td>London</td>
          <td>43</td>
          <td>2012/12/18</td>
          <td>$313,500</td>
          <td>3597</td>
          <td>[email protected]</td>
        </tr>
        <tr>
          <td>Tatyana</td>
          <td>Fitzpatrick</td>
          <td>Regional Director</td>
          <td>London</td>
          <td>19</td>
          <td>2010/03/17</td>
          <td>$385,750</td>
          <td>1965</td>
          <td>[email protected]</td>
        </tr>
        <tr>
          <td>Michael</td>
          <td>Silva</td>
          <td>Marketing Designer</td>
          <td>London</td>
          <td>66</td>
          <td>2012/11/27</td>
          <td>$198,500</td>
          <td>1581</td>
          <td>[email protected]</td>
        </tr>
        <tr>
          <td>Paul</td>
          <td>Byrd</td>
          <td>Chief Financial Officer (CFO)</td>
          <td>New York</td>
          <td>64</td>
          <td>2010/06/09</td>
          <td>$725,000</td>
          <td>3059</td>
          <td>[email protected]</td>
        </tr>
        <tr>
          <td>Gloria</td>
          <td>Little</td>
          <td>Systems Administrator</td>
          <td>New York</td>
          <td>59</td>
          <td>2009/04/10</td>
          <td>$237,500</td>
          <td>1721</td>
          <td>[email protected]</td>
        </tr>
        <tr>
          <td>Bradley</td>
          <td>Greer</td>
          <td>Software Engineer</td>
          <td>London</td>
          <td>41</td>
          <td>2012/10/13</td>
          <td>$132,000</td>
          <td>2558</td>
          <td>[email protected]</td>
        </tr>
        <tr>
          <td>Dai</td>
          <td>Rios</td>
          <td>Personnel Lead</td>
          <td>Edinburgh</td>
          <td>35</td>
          <td>2012/09/26</td>
          <td>$217,500</td>
          <td>2290</td>
          <td>[email protected]</td>
        </tr>
        <tr>
          <td>Jenette</td>
          <td>Caldwell</td>
          <td>Development Lead</td>
          <td>New York</td>
          <td>30</td>
          <td>2011/09/03</td>
          <td>$345,000</td>
          <td>1937</td>
          <td>[email protected]</td>
        </tr>
        <tr>
          <td>Yuri</td>
          <td>Berry</td>
          <td>Chief Marketing Officer (CMO)</td>
          <td>New York</td>
          <td>40</td>
          <td>2009/06/25</td>
          <td>$675,000</td>
          <td>6154</td>
          <td>[email protected]</td>
        </tr>
        <tr>
          <td>Caesar</td>
          <td>Vance</td>
          <td>Pre-Sales Support</td>
          <td>New York</td>
          <td>21</td>
          <td>2011/12/12</td>
          <td>$106,450</td>
          <td>8330</td>
          <td>[email protected]</td>
        </tr>
        <tr>
          <td>Doris</td>
          <td>Wilder</td>
          <td>Sales Assistant</td>
          <td>Sidney</td>
          <td>23</td>
          <td>2010/09/20</td>
          <td>$85,600</td>
          <td>3023</td>
          <td>[email protected]</td>
        </tr>
        <tr>
          <td>Angelica</td>
          <td>Ramos</td>
          <td>Chief Executive Officer (CEO)</td>
          <td>London</td>
          <td>47</td>
          <td>2009/10/09</td>
          <td>$1,200,000</td>
          <td>5797</td>
          <td>[email protected]</td>
        </tr>
        <tr>
          <td>Gavin</td>
          <td>Joyce</td>
          <td>Developer</td>
          <td>Edinburgh</td>
          <td>42</td>
          <td>2010/12/22</td>
          <td>$92,575</td>
          <td>8822</td>
          <td>[email protected]</td>
        </tr>
        <tr>
          <td>Jennifer</td>
          <td>Chang</td>
          <td>Regional Director</td>
          <td>Singapore</td>
          <td>28</td>
          <td>2010/11/14</td>
          <td>$357,650</td>
          <td>9239</td>
          <td>[email protected]</td>
        </tr>
        <tr>
          <td>Brenden</td>
          <td>Wagner</td>
          <td>Software Engineer</td>
          <td>San Francisco</td>
          <td>28</td>
          <td>2011/06/07</td>
          <td>$206,850</td>
          <td>1314</td>
          <td>[email protected]</td>
        </tr>
        <tr>
          <td>Fiona</td>
          <td>Green</td>
          <td>Chief Operating Officer (COO)</td>
          <td>San Francisco</td>
          <td>48</td>
          <td>2010/03/11</td>
          <td>$850,000</td>
          <td>2947</td>
          <td>[email protected]</td>
        </tr>
        <tr>
          <td>Shou</td>
          <td>Itou</td>
          <td>Regional Marketing</td>
          <td>Tokyo</td>
          <td>20</td>
          <td>2011/08/14</td>
          <td>$163,000</td>
          <td>8899</td>
          <td>[email protected]</td>
        </tr>
        <tr>
          <td>Michelle</td>
          <td>House</td>
          <td>Integration Specialist</td>
          <td>Sidney</td>
          <td>37</td>
          <td>2011/06/02</td>
          <td>$95,400</td>
          <td>2769</td>
          <td>[email protected]</td>
        </tr>
        <tr>
          <td>Suki</td>
          <td>Burks</td>
          <td>Developer</td>
          <td>London</td>
          <td>53</td>
          <td>2009/10/22</td>
          <td>$114,500</td>
          <td>6832</td>
          <td>[email protected]</td>
        </tr>
        <tr>
          <td>Prescott</td>
          <td>Bartlett</td>
          <td>Technical Author</td>
          <td>London</td>
          <td>27</td>
          <td>2011/05/07</td>
          <td>$145,000</td>
          <td>3606</td>
          <td>[email protected]</td>
        </tr>
        <tr>
          <td>Gavin</td>
          <td>Cortez</td>
          <td>Team Leader</td>
          <td>San Francisco</td>
          <td>22</td>
          <td>2008/10/26</td>
          <td>$235,500</td>
          <td>2860</td>
          <td>[email protected]</td>
        </tr>
        <tr>
          <td>Martena</td>
          <td>Mccray</td>
          <td>Post-Sales support</td>
          <td>Edinburgh</td>
          <td>46</td>
          <td>2011/03/09</td>
          <td>$324,050</td>
          <td>8240</td>
          <td>[email protected]</td>
        </tr>
        <tr>
          <td>Unity</td>
          <td>Butler</td>
          <td>Marketing Designer</td>
          <td>San Francisco</td>
          <td>47</td>
          <td>2009/12/09</td>
          <td>$85,675</td>
          <td>5384</td>
          <td>[email protected]</td>
        </tr>
        <tr>
          <td>Howard</td>
          <td>Hatfield</td>
          <td>Office Manager</td>
          <td>San Francisco</td>
          <td>51</td>
          <td>2008/12/16</td>
          <td>$164,500</td>
          <td>7031</td>
          <td>[email protected]</td>
        </tr>
        <tr>
          <td>Hope</td>
          <td>Fuentes</td>
          <td>Secretary</td>
          <td>San Francisco</td>
          <td>41</td>
          <td>2010/02/12</td>
          <td>$109,850</td>
          <td>6318</td>
          <td>[email protected]</td>
        </tr>
        <tr>
          <td>Vivian</td>
          <td>Harrell</td>
          <td>Financial Controller</td>
          <td>San Francisco</td>
          <td>62</td>
          <td>2009/02/14</td>
          <td>$452,500</td>
          <td>9422</td>
          <td>[email protected]</td>
        </tr>
        <tr>
          <td>Timothy</td>
          <td>Mooney</td>
          <td>Office Manager</td>
          <td>London</td>
          <td>37</td>
          <td>2008/12/11</td>
          <td>$136,200</td>
          <td>7580</td>
          <td>[email protected]</td>
        </tr>
        <tr>
          <td>Jackson</td>
          <td>Bradshaw</td>
          <td>Director</td>
          <td>New York</td>
          <td>65</td>
          <td>2008/09/26</td>
          <td>$645,750</td>
          <td>1042</td>
          <td>[email protected]</td>
        </tr>
        <tr>
          <td>Olivia</td>
          <td>Liang</td>
          <td>Support Engineer</td>
          <td>Singapore</td>
          <td>64</td>
          <td>2011/02/03</td>
          <td>$234,500</td>
          <td>2120</td>
          <td>[email protected]</td>
        </tr>
        <tr>
          <td>Bruno</td>
          <td>Nash</td>
          <td>Software Engineer</td>
          <td>London</td>
          <td>38</td>
          <td>2011/05/03</td>
          <td>$163,500</td>
          <td>6222</td>
          <td>[email protected]</td>
        </tr>
        <tr>
          <td>Sakura</td>
          <td>Yamamoto</td>
          <td>Support Engineer</td>
          <td>Tokyo</td>
          <td>37</td>
          <td>2009/08/19</td>
          <td>$139,575</td>
          <td>9383</td>
          <td>[email protected]</td>
        </tr>
        <tr>
          <td>Thor</td>
          <td>Walton</td>
          <td>Developer</td>
          <td>New York</td>
          <td>61</td>
          <td>2013/08/11</td>
          <td>$98,540</td>
          <td>8327</td>
          <td>[email protected]</td>
        </tr>
        <tr>
          <td>Finn</td>
          <td>Camacho</td>
          <td>Support Engineer</td>
          <td>San Francisco</td>
          <td>47</td>
          <td>2009/07/07</td>
          <td>$87,500</td>
          <td>2927</td>
          <td>[email protected]</td>
        </tr>
        <tr>
          <td>Serge</td>
          <td>Baldwin</td>
          <td>Data Coordinator</td>
          <td>Singapore</td>
          <td>64</td>
          <td>2012/04/09</td>
          <td>$138,575</td>
          <td>8352</td>
          <td>[email protected]</td>
        </tr>
        <tr>
          <td>Zenaida</td>
          <td>Frank</td>
          <td>Software Engineer</td>
          <td>New York</td>
          <td>63</td>
          <td>2010/01/04</td>
          <td>$125,250</td>
          <td>7439</td>
          <td>[email protected]</td>
        </tr>
        <tr>
          <td>Zorita</td>
          <td>Serrano</td>
          <td>Software Engineer</td>
          <td>San Francisco</td>
          <td>56</td>
          <td>2012/06/01</td>
          <td>$115,000</td>
          <td>4389</td>
          <td>[email protected]</td>
        </tr>
        <tr>
          <td>Jennifer</td>
          <td>Acosta</td>
          <td>Junior Javascript Developer</td>
          <td>Edinburgh</td>
          <td>43</td>
          <td>2013/02/01</td>
          <td>$75,650</td>
          <td>3431</td>
          <td>[email protected]</td>
        </tr>
        <tr>
          <td>Cara</td>
          <td>Stevens</td>
          <td>Sales Assistant</td>
          <td>New York</td>
          <td>46</td>
          <td>2011/12/06</td>
          <td>$145,600</td>
          <td>3990</td>
          <td>[email protected]</td>
        </tr>
        <tr>
          <td>Hermione</td>
          <td>Butler</td>
          <td>Regional Director</td>
          <td>London</td>
          <td>47</td>
          <td>2011/03/21</td>
          <td>$356,250</td>
          <td>1016</td>
          <td>[email protected]</td>
        </tr>
        <tr>
          <td>Lael</td>
          <td>Greer</td>
          <td>Systems Administrator</td>
          <td>London</td>
          <td>21</td>
          <td>2009/02/27</td>
          <td>$103,500</td>
          <td>6733</td>
          <td>[email protected]</td>
        </tr>
        <tr>
          <td>Jonas</td>
          <td>Alexander</td>
          <td>Developer</td>
          <td>San Francisco</td>
          <td>30</td>
          <td>2010/07/14</td>
          <td>$86,500</td>
          <td>8196</td>
          <td>[email protected]</td>
        </tr>
        <tr>
          <td>Shad</td>
          <td>Decker</td>
          <td>Regional Director</td>
          <td>Edinburgh</td>
          <td>51</td>
          <td>2008/11/13</td>
          <td>$183,000</td>
          <td>6373</td>
          <td>[email protected]</td>
        </tr>
        <tr>
          <td>Michael</td>
          <td>Bruce</td>
          <td>Javascript Developer</td>
          <td>Singapore</td>
          <td>29</td>
          <td>2011/06/27</td>
          <td>$183,000</td>
          <td>5384</td>
          <td>[email protected]</td>
        </tr>
        <tr>
          <td>Donna</td>
          <td>Snider</td>
          <td>Customer Support</td>
          <td>New York</td>
          <td>27</td>
          <td>2011/01/25</td>
          <td>$112,000</td>
          <td>4226</td>
          <td>[email protected]</td>
        </tr>
      </tbody>
    </table>

Скрипт:

$(document).ready(function() {
    $('#dataTable').DataTable( {
        "scrollY": '50vh',
        "scrollX": true
    } );
} );

CSS:

div.dataTables_wrapper {
        margin: 0 auto;
        height: 400px;
}

http://jsfiddle.net/scdtbry5/2/

И прямое решение заключалось в том, чтобы вложить таблицу в скрытый контейнер. После того, как сценарий dataTable закончился, я запускаю функцию fadeIn для отображения контейнера:

http://jsfiddle.net/2d73wt5L/29/

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

html jquery datatables
25.06.2018

  • Когда вы отображаете его, вы можете использовать его функцию API columns.adjust(). , который будет регулировать ширину столбцов. 26.06.2018

Ответы:


1

В этом случае вы можете использовать его API-функцию columns.adjust(), которая настраивает ширина столбцов datatable после отображения datatable.

столбцы.настроить()

Пересчитайте ширину столбцов.

Подобно таблицам HTML, DataTables пытается разместить таблицы в оптимальном формате на основе данных в ячейках. По мере изменения данных иногда бывает полезно пересчитать этот макет. Кроме того, DataTables широко использует размеры элементов DOM в таблице, в которой включена прокрутка (для выравнивания столбцов), поэтому, если таблица скрыта при инициализации, высота / ширина элементов таблицы будут недоступны.

Этот метод предназначен для того, чтобы DataTables пересчитывал размеры столбцов на основе данных в таблице и размера, примененного к столбцам (в DOM, CSS или с помощью параметра columns.width). Вызывайте его, когда таблица становится видимой, если она скрыта при инициализации (например, на вкладке) или когда данные значительно изменяются.

$(document).ready(function() {
    $('#dataTable').DataTable( {
        "scrollY": '50vh',
        "scrollX": true
    } );
    $('#hidden').fadeIn();
    $('#dataTable').DataTable().columns.adjust().draw();
} );

Демо

Разветвленный JsFiddle › http://jsfiddle.net/mmushtaq/f8bds4om/

26.06.2018

2

Я нашел обходной путь!

Вместо display: none; и .fadeIn(300); я использовал opacity: 0; и .fadeTo(300, 1);

JS:

$(document).ready(function() {
    $('#dataTable').DataTable( {
        "scrollY": '50vh',
        "scrollX": true
    } );
    $('#hidden').fadeTo(300,1);
} );

CSS:

div.dataTables_wrapper {
        margin: 0 auto;
        height: 400px;
}

div#hidden {
  opacity: 0;
}

http://jsfiddle.net/2d73wt5L/31/

Кажется, что DataTable не работает должным образом с элементами, которые не отображаются. Если кто-то может придумать объяснение, я с радостью приму его.

25.06.2018
Новые материалы
Коллекции публикаций по глубокому обучению
Последние пару месяцев я создавал коллекции последних академических публикаций по различным подполям глубокого обучения в моем блоге https://amundtveit.com - эта публикация дает обзор 25..
Представляем: Pepita
Фреймворк JavaScript с открытым исходным кодом Я знаю, что недостатка в фреймворках JavaScript нет. Но я просто не мог остановиться. Я хотел написать что-то сам, со своими собственными..
Советы по коду Laravel #2
1-) Найти // You can specify the columns you need // in when you use the find method on a model User::find(‘id’, [‘email’,’name’]); // You can increment or decrement // a field in..
Работа с временными рядами спутниковых изображений, часть 3 (аналитика данных)
Анализ временных рядов спутниковых изображений для данных наблюдений за большой Землей (arXiv) Автор: Рольф Симоэс , Жильберто Камара , Жильберто Кейрос , Фелипе Соуза , Педро Р. Андраде ,..
3 способа решить квадратное уравнение (3-й мой любимый) -
1. Методом факторизации — 2. Используя квадратичную формулу — 3. Заполнив квадрат — Давайте поймем это, решив это простое уравнение: Мы пытаемся сделать LHS,..
Создание VR-миров с A-Frame
Виртуальная реальность (и дополненная реальность) стали главными модными терминами в образовательных технологиях. С недорогими VR-гарнитурами, такими как Google Cardboard , и использованием..
Демистификация рекурсии
КОДЕКС Демистификация рекурсии Упрощенная концепция ошеломляющей О чем весь этот шум? Рекурсия, кажется, единственная тема, от которой у каждого начинающего студента-информатика..