jQuery Datatables responsive example
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="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>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>Tigeż Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>Żarrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>$170,750</td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>Junior Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td>2009/01/12</td>
<td>$86,000</td>
</tr>
<tr>
<td>Cedric Kelly</td>
...
CSS
table th:nth-child(3), td:nth-child(3) {
display: none;
}
JavaScript
/**
* When searching a table with accented characters, it can be frustrating to have
* an input such as _Zurich_ not match _Zürich_ in the table (`u !== ü`). This
* type based search plug-in replaces the built-in string formatter in
* DataTables with a function that will replace the accented characters
* with their unaccented counterparts for fast and easy filtering.
*
* Note that this plug-in uses the Javascript I18n API that was introduced in
* ES6. For older browser's this plug-in will have no effect.
*
* @summary Replace accented characters with unaccented counterparts
* @name Accent neutralise
* @author Allan Jardine
*
* @example
* $(document).ready(function() {
* $('#example').dataTable();
* } );
*/
(function(){
function removeAccents ( data ) {
if ( data.normalize ) {
// Use I18n API if avaiable to split characters and accents, then remove
// the accents wholesale. Note that we use the original data as well as
// the new to allow for searching of either form.
return data +' '+ data
.normalize('NFD')
.replace(/[\u0300-\u036f]/g, '');
}
return data;
}
var searchType = jQuery.fn.DataTable.ext.type.search;
searchType.string = function ( data ) {
return ! data ?
'' :
typeof data === 'string' ?
removeAccents( data ) :
data;
};
searchType.html = function ( data ) {
return ! data ?
'' :
typeof data === 'string' ?
removeAccents( data.replace( /<.*?>/g, '' ) ) :
data;
};
}());
$(document).ready(function() {
var table=$('#example').DataTable( {
responsive: true
} );
} );