Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

cleanup example

  • Loading branch information...
commit bff00943df46763faa7a5541921319872b2135fb 1 parent 70410a3
@kylefox authored
Showing with 54 additions and 45 deletions.
  1. +54 −45 index.html
View
99 index.html
@@ -3,20 +3,28 @@
<title></title>
<style type="text/css">
body {
- font: normal 16px/24px Georgia, serif;
+ font: normal 14px/21px Arial, serif;
+ }
+ .example {
+ float: left;
+ width: 40%;
+ margin: 5%;
}
table {
font-size: 1em;
border-collapse: collapse;
- margin: 100px auto;
+ margin: 0 auto
}
table, th, td {
border: 1px solid #999;
- padding: 10px 30px 10px 15px;
+ padding: 8px 16px;
text-align: left;
}
+ th {
+ background: #f4f4f4;
+ }
th.sorted {
- background: #eee;
+ background: #d4d4d4;
}
th.ascending:after {
@@ -30,62 +38,63 @@
</head>
<body>
-<table>
- <thead>
- <tr>
- <th>Name</th>
- <th>Band</th>
- <th>Date of Birth</th>
- <th class="number">Age</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>Thom Yorke</td>
- <td>Radiohead</td>
- <td data-sort-value="2">October 7, 1968</td>
- <td>43</td>
- </tr>
- <tr>
- <td>Justin Vernon</td>
- <td>Bon Iver</td>
- <td data-sort-value="4">April 30, 1981</td>
- <td>30</td>
- </tr>
- <tr>
- <td>Paul McCartney</td>
- <td>The Beatles</td>
- <td data-sort-value="1">June 18, 1942</td>
- <td>69</td>
- </tr>
- <tr>
- <td>Sam Beam</td>
- <td>Iron &amp; Wine</td>
- <td data-sort-value="3">July 26, 1974</td>
- <td>37</td>
- </tr>
- </tbody>
-</table>
+<div class="example ex-1">
+ <table>
+ <thead>
+ <tr>
+ <th>Name</th>
+ <th>Band</th>
+ <th>Date of Birth</th>
+ <th class="number">Age</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>Thom Yorke</td>
+ <td>Radiohead</td>
+ <td data-sort-value="2">October 7, 1968</td>
+ <td>43</td>
+ </tr>
+ <tr>
+ <td>Justin Vernon</td>
+ <td>Bon Iver</td>
+ <td data-sort-value="4">April 30, 1981</td>
+ <td>30</td>
+ </tr>
+ <tr>
+ <td>Paul McCartney</td>
+ <td>The Beatles</td>
+ <td data-sort-value="1">June 18, 1942</td>
+ <td>69</td>
+ </tr>
+ <tr>
+ <td>Sam Beam</td>
+ <td>Iron &amp; Wine</td>
+ <td data-sort-value="3">July 26, 1974</td>
+ <td>37</td>
+ </tr>
+ </tbody>
+ </table>
+</div>
+<div class="example ex-2"></div>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="jquery.tablesort.js"></script>
<script type="text/javascript">
-
- var sort;
$(function() {
var table = $('<table></table>');
table.append('<thead><tr><th class="number">Number</th></tr></thead>');
var tbody = $('<tbody></tbody>');
- for(var i = 0; i<500; i++) {
+ for(var i = 0; i<100; i++) {
tbody.append('<tr><td>' + Math.floor(Math.random() * 100) + '</td></tr>');
}
table.append(tbody);
- $('body').append(table);
+ $('.example.ex-2').append(table);
- sort = $('table').tablesort().data('tablesort');
+ $('table').tablesort().data('tablesort');
$('thead th.number').data('sortBy', function(th, td, sorter) {
return parseInt(td.text(), 10);
Please sign in to comment.
Something went wrong with that request. Please try again.