jQuery DataTables Responsive Example

jQuery DataTables Responsive Example

Today, We want to share with you jQuery DataTables Responsive Example.
In this post we will show you DataTables Responsive Example using jquery Example, hear for Responsive Datatables with Automatic Column Hiding we will give you demo and example for implement.
In this post, we will learn about jQuery Datatables responsive example with an example.

This example shows all the DataTables and Responsive using jquery being used with jQuery UI all the list of providing the base new styling information.DataTables Responsive Example using jquery Example

jQuery Datatables responsive example with dynamic table

<html>
   <head>
      <meta http-equiv="content-type" content="text/html; charset=utf-8" />
      <title>DataTables : responsive bootstrap datatable Example</title>
      <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/r/bs-3.3.5/jq-2.1.4,dt-1.10.8/datatables.min.css"/>
      <script type="text/javascript" src="https://cdn.datatables.net/r/bs-3.3.5/jqc-1.11.3,dt-1.10.8/datatables.min.js"></script>
      <script type="text/javascript" charset="utf-8">
         $(document).ready(function() {
         	$('#page_example').DataTable();//call and init datatables
         } );
      </script>
   </head>
   <body>
      <div class="container">
         <table id="page_example" class="display" cellspacing="0" width="100%">
            <thead>
               <tr>
                  <th>Name</th>
                  <th>Segment</th>
                  <th>Portfolio</th>
                  <th>KPI</th>
               </tr>
            </thead>
            <tbody>
               <tr>
                  <td>anubhav Nixon</td>
                  <td>System Architect</td>
                  <td>Ednali</td>
                  <td>$240,800</td>
               </tr>
               <tr>
                  <td>Sammer Winters</td>
                  <td>Accountant</td>
                  <td>Falha</td>
                  <td>$856,750</td>
               </tr>
               <tr>
                  <td>ashok Cox</td>
                  <td>Junior Technical Devloper</td>
                  <td>Swati park</td>
                  <td>$586,000</td>
               </tr>
               <tr>
                  <td>chaya Kelly</td>
                  <td>Senior Javascript Developer</td>
                  <td>Ednali</td>
                  <td>$78,060</td>
               </tr>
               <tr>
                  <td>Arohi Satou</td>
                  <td>Accountant</td>
                  <td>Falha</td>
                  <td>$78,700</td>
               </tr>
               <tr>
                  <td>Daya Williamson</td>
                  <td>Integration Specialist</td>
                  <td>Neharu Nagar</td>
                  <td>$45,000</td>
               </tr>
               <tr>
                  <td>hiren Chandler</td>
                  <td>Sales Assistant</td>
                  <td>Swati park</td>
                  <td>$78,500</td>
               </tr>
               <tr>
                  <td>mital Davidson</td>
                  <td>Integration Specialist</td>
                  <td>Falha</td>
                  <td>$34527,900</td>
               </tr>
               <tr>
                  <td>mansi Hurst</td>
                  <td>Javascript Developer</td>
                  <td>Swati park</td>
                  <td>$78,500</td>
               </tr>
               <tr>
                  <td>bhumika Frost</td>
                  <td>Software Engineer</td>
                  <td>Ednali</td>
                  <td>$45,600</td>
               </tr>
               <tr>
                  <td>Rupal Gaines</td>
                  <td>Office Manager</td>
                  <td>Shakti park</td>
                  <td>$544,560</td>
               </tr>
               <tr>
                  <td>jalpa Flynn</td>
                  <td>Support Lead</td>
                  <td>Ednali</td>
                  <td>$785,000</td>
               </tr>
               <tr>
                  <td>chandni Marshall</td>
                  <td>Regional Manager</td>
                  <td>Swati park</td>
                  <td>$452,600</td>
               </tr>
               <tr>
                  <td>Vishal Kennedy</td>
                  <td>Senior Marketing Designer</td>
                  <td>Shakti park</td>
                  <td>$782,500</td>
               </tr>
               <tr>
                  <td>Monika Fitzpatrick</td>
                  <td>Regional Manager</td>
                  <td>Shakti park</td>
                  <td>$785,750</td>
               </tr>
               <tr>
                  <td>Poonam Silva</td>
                  <td>Marketing Designer</td>
                  <td>Shakti park</td>
                  <td>$452,500</td>
               </tr>
               <tr>
                  <td>parul Byrd</td>
                  <td>Chief Financial Officer (CFO)</td>
                  <td>Neharu Nagar</td>
                  <td>$785,000</td>
               </tr>
               <tr>
                  <td>Daxha Little</td>
                  <td>Systems Administrator</td>
                  <td>Neharu Nagar</td>
                  <td>$7825,500</td>
               </tr>
               <tr>
                  <td>bhavana Greer</td>
                  <td>Software Engineer</td>
                  <td>Shakti park</td>
                  <td>$7878,000</td>
               </tr>
               <tr>
                  <td>Dai Rios</td>
                  <td>Personnel Lead</td>
                  <td>Ednali</td>
                  <td>$78,500</td>
               </tr>
               <tr>
                  <td>Shital Caldwell</td>
                  <td>Development Lead</td>
                  <td>Neharu Nagar</td>
                  <td>$78,000</td>
               </tr>
               <tr>
                  <td>puri Berry</td>
                  <td>Chief Marketing Officer (CMO)</td>
                  <td>Neharu Nagar</td>
                  <td>$78,000</td>
               </tr>
               <tr>
                  <td>aradhya Vance</td>
                  <td>Pre-Sales Support</td>
                  <td>Neharu Nagar</td>
                  <td>$45,450</td>
               </tr>
               <tr>
                  <td>kavya Wilder</td>
                  <td>Sales Assistant</td>
                  <td>Manager</td>
                  <td>$787,600</td>
               </tr>
               <tr>
                  <td>pari Ramos</td>
                  <td>Chief ExplorerOfficer (CEO)</td>
                  <td>Shakti park</td>
                  <td>$1,78,000</td>
               </tr>
               <tr>
                  <td>sejal Joyce</td>
                  <td>Developer</td>
                  <td>Ednali</td>
                  <td>$78,575</td>
               </tr>
               <tr>
                  <td>janvi Chang</td>
                  <td>Regional Manager</td>
                  <td>Ahemdabad</td>
                  <td>$785,650</td>
               </tr>
               <tr>
                  <td>Dharmesh Wagner</td>
                  <td>Software Engineer</td>
                  <td>google Francisco</td>
                  <td>$855,850</td>
               </tr>
               <tr>
                  <td>pragnesh Green</td>
                  <td>Chief Operating Officer (COO)</td>
                  <td>Swati park</td>
                  <td>$675,000</td>
               </tr>
               <tr>
                  <td>yash Itou</td>
                  <td>kalavad Marketing</td>
                  <td>kalavad</td>
                  <td>$978,000</td>
               </tr>
               <tr>
                  <td>Michelle House</td>
                  <td>Integration Specialist</td>
                  <td>Manager</td>
                  <td>$98,400</td>
               </tr>
               <tr>
                  <td>Kajal Burks</td>
                  <td>Developer</td>
                  <td>Rajkot</td>
                  <td>$898,500</td>
               </tr>
               <tr>
                  <td>dev Bartlett</td>
                  <td>Technical Devloper</td>
                  <td>Rajkot</td>
                  <td>$898,000</td>
               </tr>
               <tr>
                  <td>Gaurang Cortez</td>
                  <td>Team Leader</td>
                  <td>Swati park</td>
                  <td>$987,500</td>
               </tr>
               <tr>
                  <td>Megha Mccray</td>
                  <td>Post-Sales</td>
                  <td>Ednali</td>
                  <td>$675,050</td>
               </tr>
               <tr>
                  <td>king Butler</td>
                  <td>Marketing Designer</td>
                  <td>Swati park</td>
                  <td>$785,675</td>
               </tr>
               <tr>
                  <td>dev Hatfield</td>
                  <td>Office Manager</td>
                  <td>Swati park</td>
                  <td>$785,500</td>
               </tr>
               <tr>
                  <td>Rakesh Fuentes</td>
                  <td>Secretary</td>
                  <td>Google Francisco</td>
                  <td>$968,850</td>
               </tr>
               <tr>
                  <td>Vivek Harrell</td>
                  <td>Financial Controller</td>
                  <td>Swati park</td>
                  <td>$985,500</td>
               </tr>
               <tr>
                  <td>Modi Mooney</td>
                  <td>Office Manager</td>
                  <td>Rajkot</td>
                  <td>$136,200</td>
               </tr>
               <tr>
                  <td>K.k Bradshaw</td>
                  <td>Manager</td>
                  <td>Surat</td>
                  <td>$875,750</td>
               </tr>
               <tr>
                  <td>keval Liang</td>
                  <td>Support Engineer</td>
                  <td>Delhi</td>
                  <td>$298,500</td>
               </tr>
               <tr>
                  <td>Dinesh bhanderi</td>
                  <td>Software Engineer</td>
                  <td>Div</td>
                  <td>$287,500</td>
               </tr>
               <tr>
                  <td>Rakesh Bhanderi</td>
                  <td>Support Engineer</td>
                  <td>King</td>
                  <td>$875,575</td>
               </tr>
               <tr>
                  <td>Deven Patel</td>
                  <td>Developer</td>
                  <td>Neharu Nagar</td>
                  <td>$485,540</td>
               </tr>
               <tr>
                  <td>Parag Shukla</td>
                  <td>Dr.Support Engineer</td>
                  <td>San Google</td>
                  <td>$260,500</td>
               </tr>
               <tr>
                  <td>Krunal sisodariya</td>
                  <td>Data Coordinator</td>
                  <td>Rajkot</td>
                  <td>$254,575</td>
               </tr>
               <tr>
                  <td>Nilesh Chovatiya</td>
                  <td>Software Engineer</td>
                  <td>Devpara</td>
                  <td>$6025,250</td>
               </tr>
               <tr>
                  <td>Hardik Vagadiya</td>
                  <td>Software Engineer</td>
                  <td>San Google</td>
                  <td>$569,000</td>
               </tr>
               <tr>
                  <td>Bhoomi Savaliya</td>
                  <td>Junior PHP Developer</td>
                  <td>Gondal</td>
                  <td>$75,650</td>
               </tr>
               <tr>
                  <td>Vidhi Shah</td>
                  <td>Sales Assistant</td>
                  <td>Raj York</td>
                  <td>$9875,600</td>
               </tr>
               <tr>
                  <td>Pratik Shah</td>
                  <td>Regional Manager</td>
                  <td>Shakti park</td>
                  <td>$4856,250</td>
               </tr>
               <tr>
                  <td>Jigar Shah</td>
                  <td>Systems Administrator</td>
                  <td>Div</td>
                  <td>$405,500</td>
               </tr>
               <tr>
                  <td>Dharvik Shah</td>
                  <td>Developer</td>
                  <td>San Google</td>
                  <td>$500,500</td>
               </tr>
               <tr>
                  <td>Hiren Mungra</td>
                  <td>Regional Manager</td>
                  <td>delhi</td>
                  <td>$200,000</td>
               </tr>
               <tr>
                  <td>Hitesh Dhameliya</td>
                  <td>Javascript Developer</td>
                  <td>Rajkot</td>
                  <td>$586,000</td>
               </tr>
               <tr>
                  <td>Mayur Donga</td>
                  <td>Customer Support</td>
                  <td>Jammnagar</td>
                  <td>$9856,000</td>
               </tr>
            </tbody>
         </table>
      </div>
      <script type="text/javascript">
         // id to applay datatables using jQuery
         $('#page_example')
         	.removeClass( 'display' )
         	.addClass('table table-striped table-bordered');//table jQuery add class css
      </script>
   </body>
</html>

Demo Example

Read Also:  How to Get Current Date & Time in Python

About Pakainfo

I am Jaydeep Gondaliya, a software engineer, the founder and the person running Pakainfo. I'm a full-stack developer, entrepreneur and owner of Pakainfo.com. I live in India and I love to write tutorials and tips that can help to other artisan, a Passionate Blogger, who love to share the informative content on PHP, Javascript, JQuery, Laravel, Codeigniter, VueJS, AngularJS and Bootstrap from the early stage.

View all posts by Pakainfo →

Leave a Reply

Your email address will not be published. Required fields are marked *