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，但它只隐藏了标题，这个想法是它适用于整个列，而不是添加hidden-xs您要隐藏的 tbody 的每个 td。

jquery

4 Answers

  1. 您可以查看引导程序的响应式实用程序。

    引导响应实用程序

    我仍然想了解您的代码，看看我们是否可以为您提供更多帮助。

    编辑

    拥有所有数据，我们可以创建一个功能来帮助我们完成您的要求。以您的表格为例。使用 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

    要隐藏 5 的最后 3 列，您必须像这样放置它：

    $( "#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