Home / Questions / 53652
Accepted
Danilo
Asked: 2020-03-08 06:24:42 +0800 CST 2020-03-08 06:24:42 +0800 CST

Как скрыть столбцы таблицы данных, если она отображается для сотовых телефонов с помощью boostrap?

  • 772

Например, у меня есть таблица данных с 5 столбцами, все из которых видны с определением col-lg, но когда я хочу проверить или увидеть его в сотовой связи (col-xs), я хотел бы иметь возможность скрыть последние три столбца.

Как это может быть достигнуто?Может кто-нибудь показать пример?

Например, у меня есть следующий код:

$(document).ready(function() {
  var table = $('#example').DataTable( {
    "scrollY": "200px"
  } );


} );

<table id="example" class="display" cellspacing="0" width="100%">
<thead>
    <tr>
        <th>Name</th>
        <th>Position</th>
        <th>Office</th>
        <th class="hidden-xs">Age</th>
        <th class="hidden-xs">Start date</th>
        <th class="hidden-xs">Salary</th>
    </tr>
</thead>

<tfoot>
    <tr>
        <th>Name</th>
        <th>Position</th>
        <th>Office</th>
        <th>Age</th>
        <th>Start date</th>
        <th>Salary</th>
    </tr>
</tfoot>

<tbody> 
    <tr>
        <td>Vivian Harrell</td>
        <td>Financial Controller</td>
        <td>San Francisco</td>
        <td>62</td>
        <td>2009/02/14</td>
        <td>$452,500</td>
    </tr>
    <tr>
        <td>Timothy Mooney</td>
        <td>Office Manager</td>
        <td>London</td>
        <td>37</td>
        <td>2008/12/11</td>
        <td>$136,200</td>
    </tr>
    <tr>
        <td>Jackson Bradshaw</td>
        <td>Director</td>
        <td>New York</td>
        <td>65</td>
        <td>2008/09/26</td>
        <td>$645,750</td>
    </tr>
    <tr>
        <td>Olivia Liang</td>
        <td>Support Engineer</td>
        <td>Singapore</td>
        <td>64</td>
        <td>2011/02/03</td>
        <td>$234,500</td>
    </tr>
    <tr>
        <td>Bruno Nash</td>
        <td>Software Engineer</td>
        <td>London</td>
        <td>38</td>
        <td>2011/05/03</td>
        <td>$163,500</td>
    </tr>
    <tr>
        <td>Sakura Yamamoto</td>
        <td>Support Engineer</td>
        <td>Tokyo</td>
        <td>37</td>
        <td>2009/08/19</td>
        <td>$139,575</td>
    </tr>
    <tr>
        <td>Thor Walton</td>
        <td>Developer</td>
        <td>New York</td>
        <td>61</td>
        <td>2013/08/11</td>
        <td>$98,540</td>
    </tr>
    <tr>
        <td>Finn Camacho</td>
        <td>Support Engineer</td>
        <td>San Francisco</td>
        <td>47</td>
        <td>2009/07/07</td>
        <td>$87,500</td>
    </tr>
    <tr>
        <td>Serge Baldwin</td>
        <td>Data Coordinator</td>
        <td>Singapore</td>
        <td>64</td>
        <td>2012/04/09</td>
        <td>$138,575</td>
    </tr>
    <tr>
        <td>Zenaida Frank</td>
        <td>Software Engineer</td>
        <td>New York</td>
        <td>63</td>
        <td>2010/01/04</td>
        <td>$125,250</td>
    </tr>
    <tr>
        <td>Zorita Serrano</td>
        <td>Software Engineer</td>
        <td>San Francisco</td>
        <td>56</td>
        <td>2012/06/01</td>
        <td>$115,000</td>
    </tr>
    <tr>
        <td>Jennifer Acosta</td>
        <td>Junior Javascript Developer</td>
        <td>Edinburgh</td>
        <td>43</td>
        <td>2013/02/01</td>
        <td>$75,650</td>
    </tr>
    <tr>
        <td>Cara Stevens</td>
        <td>Sales Assistant</td>
        <td>New York</td>
        <td>46</td>
        <td>2011/12/06</td>
        <td>$145,600</td>
    </tr>
    <tr>
        <td>Hermione Butler</td>
        <td>Regional Director</td>
        <td>London</td>
        <td>47</td>
        <td>2011/03/21</td>
        <td>$356,250</td>
    </tr>
    <tr>
        <td>Lael Greer</td>
        <td>Systems Administrator</td>
        <td>London</td>
        <td>21</td>
        <td>2009/02/27</td>
        <td>$103,500</td>
    </tr>
    <tr>
        <td>Jonas Alexander</td>
        <td>Developer</td>
        <td>San Francisco</td>
        <td>30</td>
        <td>2010/07/14</td>
        <td>$86,500</td>
    </tr>
    <tr>
        <td>Shad Decker</td>
        <td>Regional Director</td>
        <td>Edinburgh</td>
        <td>51</td>
        <td>2008/11/13</td>
        <td>$183,000</td>
    </tr>
    <tr>
        <td>Michael Bruce</td>
        <td>Javascript Developer</td>
        <td>Singapore</td>
        <td>29</td>
        <td>2011/06/27</td>
        <td>$183,000</td>
    </tr>
    <tr>
        <td>Donna Snider</td>
        <td>Customer Support</td>
        <td>New York</td>
        <td>27</td>
        <td>2011/01/25</td>
        <td>$112,000</td>
    </tr>
</tbody>
</table>

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

Проблема в том, что я использую class="hidden-xs, в данном случае th внутри thead таблицы, но он скрывает только заголовки, идея в том, что он применяется ко всему столбцу, без добавления hidden-xs в каждый тд тела, которое вы хотите скрыть.

jquery

4 Answers

  1. Вы можете взглянуть на адаптивные утилиты bootstrap.

    Утилиты, реагирующие на Bootstrap

    Я все еще хотел бы немного узнать о вашем коде, чтобы увидеть, можем ли мы помочь вам больше.

    РЕДАКТИРОВАТЬ

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

      $(document).ready(function() {
  var table = $('#example').DataTable( {
    "scrollY": "200px"
  } );
     $("#table tr").find('td:eq(3)').each(function () {
       $(this).addClass("hidden-xs");
     });
     $("#table tr").find('td:eq(4)').each(function () {
       $(this).addClass("hidden-xs");
     });
     $("#table tr").find('td:eq(5)').each(function () {
       $(this).addClass("hidden-xs");
     });
} );

<table id="example" class="display" cellspacing="0" width="100%">
<thead>
    <tr>
        <th>Name</th>
        <th>Position</th>
        <th>Office</th>
        <th class="hidden-xs">Age</th>
        <th class="hidden-xs">Start date</th>
        <th class="hidden-xs">Salary</th>
    </tr>
</thead>

<tfoot>
    <tr>
        <th>Name</th>
        <th>Position</th>
        <th>Office</th>
        <th>Age</th>
        <th>Start date</th>
        <th>Salary</th>
    </tr>
</tfoot>

<tbody> 
    <tr>
        <td>Vivian Harrell</td>
        <td>Financial Controller</td>
        <td>San Francisco</td>
        <td>62</td>
        <td>2009/02/14</td>
        <td>$452,500</td>
    </tr>
    <tr>
        <td>Timothy Mooney</td>
        <td>Office Manager</td>
        <td>London</td>
        <td>37</td>
        <td>2008/12/11</td>
        <td>$136,200</td>
    </tr>
    <tr>
        <td>Jackson Bradshaw</td>
        <td>Director</td>
        <td>New York</td>
        <td>65</td>
        <td>2008/09/26</td>
        <td>$645,750</td>
    </tr>
    <tr>
        <td>Olivia Liang</td>
        <td>Support Engineer</td>
        <td>Singapore</td>
        <td>64</td>
        <td>2011/02/03</td>
        <td>$234,500</td>
    </tr>
    <tr>
        <td>Bruno Nash</td>
        <td>Software Engineer</td>
        <td>London</td>
        <td>38</td>
        <td>2011/05/03</td>
        <td>$163,500</td>
    </tr>
    <tr>
        <td>Sakura Yamamoto</td>
        <td>Support Engineer</td>
        <td>Tokyo</td>
        <td>37</td>
        <td>2009/08/19</td>
        <td>$139,575</td>
    </tr>
    <tr>
        <td>Thor Walton</td>
        <td>Developer</td>
        <td>New York</td>
        <td>61</td>
        <td>2013/08/11</td>
        <td>$98,540</td>
    </tr>
    <tr>
        <td>Finn Camacho</td>
        <td>Support Engineer</td>
        <td>San Francisco</td>
        <td>47</td>
        <td>2009/07/07</td>
        <td>$87,500</td>
    </tr>
    <tr>
        <td>Serge Baldwin</td>
        <td>Data Coordinator</td>
        <td>Singapore</td>
        <td>64</td>
        <td>2012/04/09</td>
        <td>$138,575</td>
    </tr>
    <tr>
        <td>Zenaida Frank</td>
        <td>Software Engineer</td>
        <td>New York</td>
        <td>63</td>
        <td>2010/01/04</td>
        <td>$125,250</td>
    </tr>
    <tr>
        <td>Zorita Serrano</td>
        <td>Software Engineer</td>
        <td>San Francisco</td>
        <td>56</td>
        <td>2012/06/01</td>
        <td>$115,000</td>
    </tr>
    <tr>
        <td>Jennifer Acosta</td>
        <td>Junior Javascript Developer</td>
        <td>Edinburgh</td>
        <td>43</td>
        <td>2013/02/01</td>
        <td>$75,650</td>
    </tr>
    <tr>
        <td>Cara Stevens</td>
        <td>Sales Assistant</td>
        <td>New York</td>
        <td>46</td>
        <td>2011/12/06</td>
        <td>$145,600</td>
    </tr>
    <tr>
        <td>Hermione Butler</td>
        <td>Regional Director</td>
        <td>London</td>
        <td>47</td>
        <td>2011/03/21</td>
        <td>$356,250</td>
    </tr>
    <tr>
        <td>Lael Greer</td>
        <td>Systems Administrator</td>
        <td>London</td>
        <td>21</td>
        <td>2009/02/27</td>
        <td>$103,500</td>
    </tr>
    <tr>
        <td>Jonas Alexander</td>
        <td>Developer</td>
        <td>San Francisco</td>
        <td>30</td>
        <td>2010/07/14</td>
        <td>$86,500</td>
    </tr>
    <tr>
        <td>Shad Decker</td>
        <td>Regional Director</td>
        <td>Edinburgh</td>
        <td>51</td>
        <td>2008/11/13</td>
        <td>$183,000</td>
    </tr>
    <tr>
        <td>Michael Bruce</td>
        <td>Javascript Developer</td>
        <td>Singapore</td>
        <td>29</td>
        <td>2011/06/27</td>
        <td>$183,000</td>
    </tr>
    <tr>
        <td>Donna Snider</td>
        <td>Customer Support</td>
        <td>New York</td>
        <td>27</td>
        <td>2011/01/25</td>
        <td>$112,000</td>
    </tr>
</tbody>
</table>
    • 3

  2. Вы можете попробовать эту функцию, где, если разрешение экрана меньше значения данных, которое скрывает столбец 4,5,6

    $(document).ready(function(){ var mq = window.matchMedia( "(max-width: 500px)" ); // Si la medida es de 0 a 500 hace lo siguiente if (mq.matches) { $('#example>thead>tr>th:nth-of-type(4)').HiddenTables(); $('#example>thead>tr>th:nth-of-type(5)').HiddenTables(); $('#example>thead>tr>th:nth-of-type(6)').HiddenTables(); $('#example>tfoot>tr>th:nth-of-type(4)').HiddenTables(); $('#example>tfoot>tr>th:nth-of-type(5)').HiddenTables();
    $('#example>tfoot>tr>th:nth-of-type(6)').HiddenTables(); $('#example>tbody>tr>td:nth-of-type(4)').HiddenTables(); $('#example>tbody>tr>td:nth-of-type(5)').HiddenTables(); $('#example>tbody>tr>td:nth-of-type(6)').HiddenTables(); } jQuery.fn.HiddenTables = function() //damos nombre ala funcion { $(this).hide(); };

    });

    • 3

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

     var tabla = $("#example").DataTable({
             "columns": [
                null,
                null,
                null,
                { "className": "hidden-xs" },
                { "className": "hidden-xs" },
                { "className": "hidden-xs" }
            ]
});
    • 3
  4. Best Answer

    Чтобы скрыть последние 3 столбца из 5, вы должны разместить его так:

    $( "#btnOcultar" ).on( "click", function() {
            $('#tabla').DataTable().destroy();
            $('#tabla').DataTable( {
                "pagingType": "full_numbers",
                "columnDefs": [
                    {
                        "targets": [ 2 ],
                        "visible": false,
                        "searchable": false
                    },
                    {
                        "targets": [ 3 ],
                        "visible": false,
                        "searchable": false
                    },
                    {
                        "targets": [ 4 ],
                        "visible": false,
                        "searchable": false
                    }
                ]
            } );
        } );

    Primero, destruyes el Datatable asignado al principio, si es que lo agregaste al table al momento de cargar la página, luego le asignas nuevamente el Datatable con las columnas que quieras ocultar.

    Puedes manejarlo con botones, o con eventos que suceden en tu página, yo tengo dos botones, uno para ocultar y otro para mostrar. Para mostrarlo nuevamente, lo único que debes hacer es cambiar false por true, tanto en el atributo visible, como en searchable.

    • 2