title: Show or hide DataTables column according to the screen width
body: <p>I am using the datatable to display information</p>
  
  <p><a href="https://datatables.net/" rel="nofollow">https://datatables.net/</a></p>
  
  <p>And my code to create datatable is like this:</p>
  
  <pre><code>&lt;table class="table table-striped table-hover" id="datatable_&lt;?= $key; ?&gt;" cellspacing="0" width="100%"&gt;
     &lt;thead&gt;
        &lt;tr&gt;
           &lt;th&gt;Title&lt;/th&gt;
           &lt;th&gt;Thumbnail&lt;/th&gt;
           &lt;th&gt;Teacher&lt;/th&gt;
           &lt;th&gt;Pose&lt;/th&gt;
           &lt;th&gt;Style&lt;/th&gt;
           &lt;th&gt;Level&lt;/th&gt;
           &lt;th&gt;Create Date&lt;/th&gt;
           &lt;th&gt;&lt;/th&gt;
        &lt;/tr&gt;
     &lt;/thead&gt;
     &lt;tbody&gt;
        &lt;?php
           foreach ($playlist as $item) {
               if ($item['type'] == $key) {
                   echo "&lt;tr&gt;";
                   echo "&lt;td&gt;&lt;a href='" . site_url("video/view/" . $item['id']) . "' target='_blank'&gt;" . $item[set_lang('title')] . "&lt;/a&gt;&lt;/td&gt;";
                   echo "&lt;td&gt;&lt;img src='" . (isset($item['image_url']) ? site_url("thumbnail/" . $item['image_url']) : $item['thumbnail']) . "' height='60'&gt;&lt;/td&gt;";
                   echo "&lt;td&gt;" . set_lang($item ['name']) . "&lt;/td&gt;";
                   echo "&lt;td&gt;" . print_array($item['pose']) . "&lt;/td&gt;";
                   echo "&lt;td&gt;" . print_array($item ['style']) . "&lt;/td&gt;";
                   echo "&lt;td&gt;" . $this-&gt;level_list[$item ['level']] . "&lt;/td&gt;";
                   echo "&lt;td&gt;" . date("Y-m-d", strtotime($item['create_date'])) . "&lt;/td&gt;";
                   echo "&lt;td&gt;&lt;label class='block option option-primary'&gt;&lt;input type='checkbox' name='videos[]' value='" . $item['id'] . "'&gt;&lt;span class='checkbox'&gt;&lt;/span&gt;&lt;/label&gt;&lt;/td&gt;";
                   echo "&lt;/tr&gt;";
               }
           }
           ?&gt;
     &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>Jquery:</p>
  
  <pre><code>    var myTable = $('#datatable_0, #datatable_1').dataTable({
          order: [[5, "desc"]],
          iDisplayLength: 5,
          aLengthMenu: [
              [5, 10, 25, 50, -1],
              [5, 10, 25, 50, "All"]
          ],
          sDom: '&lt;"dt-panelmenu clearfix"lfr&gt;t&lt;"dt-panelfooter clearfix"ip&gt;',
          oTableTools: {
              sSwfPath: "&lt;?= site_url("vendor/plugins/datatables/extensions/TableTools/swf/copy_csv_xls_pdf.swf"); ?&gt;"
          }
      });
  </code></pre>
  
  <p>There are 8 column in total . </p>
  
  <p>I would like to achieve: if screen width &lt; 700px , then only show the 1st and last column. </p>
  
  <p>Notices that the order column should be change to last column as well.</p>
  
  <p>Thanks a lot. </p>