Datatable Responsive Jquery for latest version

DataTable Responsive JQuery for latest version

• Latest bootstrap version 4 not support responsive data table.
  so we need to set Class Logic on data-table 
  
  
• Here is Official Document link for class logic, refer it for more
  DataTable Responsive Class
  
  

  Responsive has three modes of operation for controlling the visibility of columns in a table:

  • Automatic - whereby Responsive will automatically determine if a column should be shown or not
    
    
  • Manual - where you tell Responsive what columns to show on what screen sizes.
    
    
  • Priority - Using columns.responsivePriority to tell Responsive which columns should be given visibility priority.

When you don't assign a class to a column, DataTables will automatically determine if a column should be shown or not. So if you want to force showing all columns on larger screen, you need to assign classes (desktop, min-desktop or all) to ALL columns as per your requirements.

For example, with the following markup first three columns will be shown on all devices and last three columns will be shown on desktop (>1024px) devices.

<thead>
    <tr>
        <th class="all">Name</th>
        <th class="all">Position</th>
        <th class="all">Office</th>
        <th class="desktop">Age</th>
        <th class="desktop">Start date</th>
        <th class="desktop">Salary</th>
    </tr>
</thead>