How to hide columns of a datatable in case it shows for mobile with boostrap?

To hide the last 3 columns of 5, you must place it like this:

$( "#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
                    }
                ]
            } );
        } );

First, you destroy the Datatable assigned at the beginning, if you added it to the table at the moment of loading the page, then you assign it again the Datatable with the columns you want to hide.

You can handle it with buttons, or with events that happen on your page, I have two buttons, one to hide and one to show. To show it again, all you have to do is change false to true , both in the visible attribute, and in searchable strong>.

You can try this function, where if the screen resolution is less than the data value that column 4.5.6 hides

$(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(); };

});

I found the solution, in the same datatable I define in the document ready, I have to put something like this:

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

You can take a look at the bootstrap Responsives utilities.

Bootstrap responsive utilities

I would like to know a bit of your code to see if we can help you more.

EDITO

Having all the data we can do a function that helps us do what you ask. using your table as an example. Use jQuery function, find and use the eq filter and the number of columns you want to hide.

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