jQuery Datatables responsive example

by zaibtabs

HTML

<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<link rel="stylesheet" href="//cdn.datatables.net/1.10.1/css/jquery.dataTables.css">
<script src="//cdn.datatables.net/1.10.1/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="//cdn.datatables.net/responsive/1.0.0/css/dataTables.responsive.css">
<script src="//cdn.datatables.net/responsive/1.0.0/js/dataTables.responsive.js"></script>
<table id="master" class="display" cellspacing="0" width="100%">
        <thead>
            <tr>
            <th>ID</th>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </thead>
 
        <tfoot>
            <tr>
            <th>ID</th>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </tfoot>
 
        <tbody>
            <tr>
            <td>1</td>
                <td>Tiger Nixon</td>
                <td>System Architect</td>
                <td>Edinburgh</td>
                <td>61</td>
                <td>2011/04/25</td>
                <td>$320,800</td>
            </tr>
            <tr>
            <td>2</td>
                <td>Garrett Winters</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>63</td>
                <td>2011/07/25</td>
                <td>$170,750</td>
            </tr>
            <tr>
            <td>3</td>
                <td>Ashton Cox</td>
                <td>Junior Technical Author</td>
                <td>San Francisco</td>
                <td>66</td>
                <td>2009/01/12</td>
          ...

JavaScript

$(document).ready(function() {
    $('#master').DataTable( {
       /* Responsive is to minimize the width of the table and display a +sign to expand the remaining columns from the same row.
       -- responsive: true  -- */
    } );
    
  
  $.ajax({
    url: "https://www.ajaxbrowser.com/User39b739b/test.txt", // path to file
    dataType: 'text', // type of file (text, json, xml, etc)
    success: function(data) { // callback for successful completion
      $("#detail").html(data);
     var searchTerms =data;
     var allRows = data.split(/\r?\n|\r/);
var array = searchTerms.split(",");

for (var i in allRows){
//console.log(i + " : " + array[i]);
console.log(i + " : " + allRows[i]);
    //alert(i + " : " + array[i]);
}
      
    },
    error: function() { // callback if there's an error
      alert("error");
    }
  });     
   

} );