Skip to content

Instantly share code, notes, and snippets.

@rolandsusans

rolandsusans/jsbin.quhes.css

Created June 3, 2014 13:52
Show Gist options
  • Save rolandsusans/c0a79e56786ea89704e3 to your computer and use it in GitHub Desktop.
Save rolandsusans/c0a79e56786ea89704e3 to your computer and use it in GitHub Desktop.
Download ZIP
Sorting table data with javascript.
Raw
jsbin.quhes.css
@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700);
@import url("http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css");
@import url("http://cdn.datatables.net/plug-ins/28e7751dbec/integration/bootstrap/3/dataTables.bootstrap.css");
@import url("");
body { font-size: 140%; }
tr:hover{
background-color:#3071a9;
border:1px;
border-color:black;
}
.display thead{
background-color:black;
color:white;
font-size:20px;
font-weight: bold;
}
#example{
background-color: rgb(215,215,215);
}
.display tfoot{
background-color:black;
color:white;
}
Raw
jsbin.quhes.html
<!DOCTYPE html>
<html>
<head>
<!--jquery librarys-->
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script>
<!--bootstrap-->
<script src="http://cdn.datatables.net/plug-ins/28e7751dbec/integration/bootstrap/3/dataTables.bootstrap.js"></script>
<!--dataTables.js - library for tables-->
<script src="http://cdn.datatables.net/1.10.0/js/jquery.dataTables.js"></script>
<!----------------------------------------->
<!--dataTables plugin for date format-->
<script src="http://cdn.datatables.net/plug-ins/28e7751dbec/sorting/date-de.js"></script>
<!----------------------------------------->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Data Tables</title>
<link rel="stylesheet" href="">
</head>
<body>
<h1>Example of using dataTables library</h1>
<h2>Lets look at example</h2>
<!---table-->
<table cellpadding="3" cellspacing="0" border="0" style="width: 67%; margin: 0 auto 2em auto;">
<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>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>01.04.2014 12:44</td>
<td>$320,800</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>01.04.2014 12:45</td>
<td>$170,750</td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>Junior Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td>02.04.2014 12:46</td>
<td>$86,000</td>
</tr>
<tr>
<td>Cedric Kelly</td>
<td>Senior Javascript Developer</td>
<td>Edinburgh</td>
<td>22</td>
<td>30.05.2014 18:00</td>
<td>$433,060</td>
</tr>
<tr>
<td>Airi Satou</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>33</td>
<td>03.04.2014 12:45</td>
<td>$162,700</td>
</tr>
<tr>
<td>Brielle Williamson</td>
<td>Integration Specialist</td>
<td>New York</td>
<td>61</td>
<td>03.04.2014 12:40</td>
<td>$372,000</td>
</tr>
<tr>
<td>Herrod Chandler</td>
<td>Sales Assistant</td>
<td>San Francisco</td>
<td>59</td>
<td>03.04.2014 13:40</td>
<td>$137,500</td>
</tr>
<tr>
<td>Rhona Davidson</td>
<td>Integration Specialist</td>
<td>Tokyo</td>
<td>55</td>
<td>03.04.2014 14:40</td>
<td>$327,900</td>
</tr>
<tr>
<td>Serge Baldwin</td>
<td>Data Coordinator</td>
<td>Singapore</td>
<td>64</td>
<td>01.07.1991 10:01</td>
<td>$138,575</td>
</tr>
<tr>
<td>Zenaida Frank</td>
<td>Software Engineer</td>
<td>New York</td>
<td>63</td>
<td>01.07.1991 12:01</td>
<td>$125,250</td>
</tr>
<tr>
<td>Zorita Serrano</td>
<td>Software Engineer</td>
<td>San Francisco</td>
<td>56</td>
<td>01.07.1991 13:01</td>
<td>$115,000</td>
</tr>
<tr>
<td>Jennifer Acosta</td>
<td>Junior Javascript Developer</td>
<td>Edinburgh</td>
<td>43</td>
<td>01.07.1991 13:01</td>
<td>$75,650</td>
</tr>
<tr>
<td>Cara Stevens</td>
<td>Sales Assistant</td>
<td>New York</td>
<td>46</td>
<td>01.07.1991 13:01</td>
<td>$145,600</td>
</tr>
<tr>
<td>Rolands Usans</td>
<td>Regional Director</td>
<td>London</td>
<td>47</td>
<td>01.07.1991 13:01</td>
<td>$356,250</td>
</tr>
<tr>
<td>Lael Greer</td>
<td>Systems Administrator</td>
<td>London</td>
<td>21</td>
<td>01.07.2000 13:01</td>
<td>$103,500</td>
</tr>
<tr>
<td>Jonas Alexander</td>
<td>Developer</td>
<td>San Francisco</td>
<td>30</td>
<td>01.08.2012 13:01</td>
<td>$86,500</td>
</tr>
<tr>
<td>Shad Decker</td>
<td>Regional Director</td>
<td>Edinburgh</td>
<td>51</td>
<td>01.06.2014 13:01</td>
<td>$183,000</td>
</tr>
<tr>
<td>Michael Bruce</td>
<td>Javascript Developer</td>
<td>Singapore</td>
<td>29</td>
<td>01.07.2012 13:01</td>
<td>$183,000</td>
</tr>
<tr>
<td>Donna Snider</td>
<td>Customer Support</td>
<td>New York</td>
<td>27</td>
<td>01.07.2012 13:01</td>
<td>$112,000</td>
</tr>
</tbody>
</table>
</body>
</html>
Raw
jsbin.quhes.js
function filterGlobal () {
$('#example').DataTable().search(
$('#global_filter').val()
).draw();
}
function filterColumn ( i ) {
$('#example').DataTable().column( i ).search(
$('#col'+i+'_filter').val(),
$('#col'+i+'_regex').prop('checked'),
$('#col'+i+'_smart').prop('checked')
).draw();
}
function filterByDate(){
$('#example').DataTable();
}
//starts sorting function, when document is ready
/*****************************/
$(document).ready(function() {
$('#example').dataTable({
"paging": true,//enables diables show 10/100/...pages
scrollY: 0,//enables scrolling in table
searching: true,//enables search
autoWidth:true,//Feature control DataTables' smart column width handling
"search": {
"search": ""//sets default search query on load "soeme text"
},
"columnDefs": [
{ "type": "de_datetime", targets: 4 }
]
});
/*****************************/
$('input.global_filter').on( 'keyup click', function () {
filterGlobal();
} );
$('input.column_filter').on( 'keyup click', function () {
filterColumn( $(this).parents('tr').attr('data-column') );
} );
} );
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment