Skip to content

Instantly share code, notes, and snippets.

@tlimpanont

tlimpanont/script.js

Last active September 4, 2015 16:04
Show Gist options
  • Save tlimpanont/d327d027811ffe2f08e8 to your computer and use it in GitHub Desktop.
Save tlimpanont/d327d027811ffe2f08e8 to your computer and use it in GitHub Desktop.
Download ZIP
CustomerList Table
Raw
script.js
/* COLUMN FILTER */
var otable = $('#datatable_fixed_column').DataTable({
//"bFilter": false,
//"bInfo": false,
//"bLengthChange": false
//"bAutoWidth": false,
//"bPaginate": false,
//"bStateSave": true // saves sort state using localStorage
"sDom": "<'dt-toolbar'<'col-xs-12 col-sm-6 hidden-xs'f><'col-sm-6 col-xs-12 hidden-xs'<'toolbar'>>r>" +
"t" +
"<'dt-toolbar-footer'<'col-sm-6 col-xs-12 hidden-xs'i><'col-xs-12 col-sm-6'p>>",
"autoWidth": true,
"preDrawCallback": function() {
// Initialize the responsive datatables helper once.
if (!responsiveHelper_datatable_fixed_column) {
responsiveHelper_datatable_fixed_column = new ResponsiveDatatablesHelper($('#datatable_fixed_column'), breakpointDefinition);
}
},
"rowCallback": function(nRow) {
responsiveHelper_datatable_fixed_column.createExpandIcon(nRow);
},
"drawCallback": function(oSettings) {
responsiveHelper_datatable_fixed_column.respond();
}
});
// custom toolbar
$("div.toolbar").html('<div class="text-right"><img src="img/logo.png" alt="SmartAdmin" style="width: 111px; margin-top: 3px; margin-right: 10px;"></div>');
// Apply the filter
$("#datatable_fixed_column thead th input[type=text]").on('keyup change', function() {
otable
.column($(this).parent().index() + ':visible')
.search(this.value)
.draw();
});
/* END COLUMN FILTER */
Raw
template.html
<table id="datatable_fixed_column" class="table table-striped table-bordered" width="100%">
<thead>
<tr>
<th></th>
<th class="hasinput">
<input type="text" class="form-control" placeholder="Filter Name" />
</th>
<th class="hasinput">
<input type="text" class="form-control" placeholder="Filter Surname" />
</th>
<th class="hasinput">
<input type="text" class="form-control" placeholder="Location" />
</th>
<th class="hasinput">
<input id="dateselect_filter" type="text" placeholder="Filter Last Log In" class="form-control datepicker" data-dateformat="yy/mm/dd">
</th>
<th class="hasinput">
<input type="text" class="form-control" placeholder="Filter Social" />
</th>
</tr>
<tr>
<th></th>
<th data-class="expand">Name</th>
<th>Surname</th>
<th data-hide="phone">Location</th>
<th data-hide="phone">Last Log In</th>
<th>Associated Social Accounts</th>
</tr>
</thead>
<tbody>
<tr>
<td><img src="placehold.it/70x70"></td>
<td>Tiger</td>
<td>Nixon</td>
<td>Basel, Switzerland</td>
<td>2014/12/12</td>
<td>
<ul style="list-style:none;">
<li><i class="fa fa-twitter fa-sp"></i>Twitter</li>
</ul>
</td>
</tr>
<tr>
<td><img src="placehold.it/70x70"></td>
<td>Dorothea</td>
<td>Doe</td>
<td>Zurich, Switzerland</td>
<td>2014/07/25</td>
<td>
<ul style="list-style:none;">
<li><i class="fa fa-twitter fa-sp"></i>Twitter</li>
<li><i class="fa fa-facebook fa-sp"></i>Facebook</li>
</ul>
</td>
</tr>
<tr>
<td><img src="placehold.it/70x70"></td>
<td>Jane</td>
<td>Worthington</td>
<td>Manchester, United Kingdom</td>
<td>2014/01/12</td>
<td>
<ul style="list-style:none;">
<li><i class="fa fa-twitter fa-sp"></i>Twitter</li>
</ul>
</td>
</tr>
<tr>
<td><img src="placehold.it/70x70"></td>
<td>Heinrich</td>
<td>Mueller</td>
<td>Basel, Switzerland</td>
<td>2014/09/29</td>
<td>
<ul style="list-style:none;">
<li><i class="fa fa-twitter fa-sp"></i>Twitter</li>
<li><i class="fa fa-facebook fa-sp"></i>Facebook</li>
</ul>
</td>
</tr>
<tr>
<td><img src="placehold.it/70x70"></td>
<td>Anna</td>
<td>Staerk</td>
<td>Basel, Switzerland</td>
<td>2014/11/28</td>
<td>
<ul style="list-style:none;">
<li><i class="fa fa-twitter fa-sp"></i>Twitter</li>
</ul>
</td>
</tr>
<tr>
<td><img src="placehold.it/70x70"></td>
<td>Jean-Claude</td>
<td>Schmidt</td>
<td>Zurich, Switzerland</td>
<td>2014/12/02</td>
<td>
<ul style="list-style:none;">
<li><i class="fa fa-twitter fa-sp"></i>Twitter</li>
<li><i class="fa fa-facebook fa-sp"></i>Facebook</li>
</ul>
</td>
</tr>
<tr>
<td><img src="placehold.it/70x70"></td>
<td>Alex</td>
<td>Cooper</td>
<td>Manchester, United Kingdom</td>
<td>2012/08/06</td>
<td>
<ul style="list-style:none;">
<li><i class="fa fa-facebook fa-sp"></i>Facebook</li>
</ul>
</td>
</tr>
<tr>
<td><img src="placehold.it/70x70"></td>
<td>Paul</td>
<td>Staerk</td>
<td>Basel, Switzerland</td>
<td>2014/10/14</td>
<td>
<ul style="list-style:none;">
<li><i class="fa fa-twitter fa-sp"></i>Twitter</li>
<li><i class="fa fa-facebook fa-sp"></i>Facebook</li>
</ul>
</td>
</tr>
<tr>
<td><img src="placehold.it/70x70"></td>
<td>Jan</td>
<td>Michiels</td>
<td>Amsterdam, The Netherlands</td>
<td>2014/09/15</td>
<td>
<ul style="list-style:none;">
<li><i class="fa fa-facebook fa-sp"></i>Facebook</li>
</ul>
</td>
</tr>
<tr>
<td><img src="placehold.it/70x70"></td>
<td>Hemming</td>
<td>Vein</td>
<td>Zurich, Switzerland
<86/td>
<td>2014/12/13</td>
<td>
<ul style="list-style:none;">
<li><i class="fa fa-twitter fa-sp"></i>Twitter</li>
</ul>
</td>
</tr>
<tr>
<td><img src="placehold.it/70x70"></td>
<td>Pierre</td>
<td>Duval</td>
<td>Geneva, Switzerland</td>
<td>2014/12/19</td>
<td>
<ul style="list-style:none;">
<li><i class="fa fa-twitter fa-sp"></i>Twitter</li>
<li><i class="fa fa-facebook fa-sp"></i>Facebook</li>
</ul>
</td>
</tr>
</tbody>
</table>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment