Ajax Loader
HTML 
<!DOCTYPE html>
1
<!DOCTYPE html>
2
<html>
3
  <head>
4
<title>Light Javascript Table Sorter</title>
5
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap.no-icons.min.css" rel="stylesheet">
6
  </head>
7
  <body>
8
<section class="container">
9
 
10
  <h2>Light Javascript Table Sorter</h2>
11
 
12
  <table>
13
    <thead>
14
      <tr>
15
        <th>Name</th>
16
        <th>Email</th>
17
        <th>Phone</th>
18
        <th>Price</th>
19
      </tr>
20
    </thead>
21
    <tbody>
22
      <tr>
23
        <td>John Doe</td>
24
        <td>john.doe@gmail.com</td>
25
        <td>0123456789</td>
26
        <td>99</td>
27
      </tr>
28
      <tr>
29
        <td>Jane Vanda</td>
30
        <td>jane@vanda.org</td>
31
        <td>9876543210</td>
32
        <td>349</td>
33
      </tr>
34
      <tr>
35
        <td>Alferd Penyworth</td>
36
        <td>alfred@batman.com</td>
37
        <td>6754328901</td>
38
        <td>199</td>
39
      </tr>
40
    </tbody>
41
  </table>
42
 
43
 
44
</section>
45
 
46
  </body>
47
</html>
 
CSS 
 
1
 
2
h2 {
3
  margin-bottom: 50px;
4
}
5
 
6
.container {
7
  text-align: center;
8
  overflow: hidden;
9
  width: 800px;
10
  margin: 0 auto;
11
}
12
 
13
.container table {
14
  width: 100%;
15
}
16
 
17
.container td, .container th {
18
  padding: 10px;
19
}
20
 
21
.container td:first-child, .container th:first-child {
22
  padding-left: 20px;
23
}
24
 
25
.container td:last-child, .container th:last-child {
26
  padding-right: 20px;
27
}
28
 
29
.container th {
30
  border-bottom: 1px solid #ddd;
31
  position: relative;
32
  cursor: pointer;
33
}
34
 
35
.container th.desc:after {
36
  border-top-color: #666;
37
}
38
 
39
.container th.asc:before {
40
  border-bottom-color: #666;
41
}
42
 
43
.container th:after, .container th:before {
44
  content: '';
45
  display: block;
46
  position: absolute;
47
  right: 0;
48
  border-color: transparent;
49
  border-style: solid;
50
  border-width: 5px;
51
  width: 0;
52
  height: 0;
53
}
54
 
55
.container th:after {
56
  border-top-color: #ddd;
57
  top: 22px;
58
}
59
 
60
.container th:before {
61
  border-bottom-color: #ddd;
62
  top: 10px;
63
}
64
 
65
.github {
66
  margin-top: 50px;
67
}
68
 
69
 
70
 
 
JavaScript 
(function(document) {
1
(function(document) {
2
  'use strict';
3
 
4
  var LightTableSorter = (function(Arr) {
5
 
6
    var _th, _cellIndex, _order = '';
7
 
8
    function _text(row) {
9
      return row.cells.item(_cellIndex).textContent.toLowerCase();
10
    }
11
 
12
    function _sort(a, b) {
13
      var va = _text(a), vb = _text(b), n = parseInt(va, 10);
14
      if (n) {
15
        va = n;
16
        vb = parseInt(vb, 10);
17
      }
18
      return va > vb ? 1 : va < vb ? -1 : 0;
19
    }
20
 
21
    function _toggle() {
22
      var c = _order !== 'asc' ? 'asc' : 'desc';
23
      _th.className = (_th.className.replace(_order, '') + ' ' + c).trim();
24
      _order = c;
25
    }
26
 
27
    function _reset() {
28
      _th.className = _th.className.replace('asc', '').replace('desc', '');
29
      _order = '';
30
    }
31
 
32
    function onClickEvent(e) {
33
      if (_th && _cellIndex !== e.target.cellIndex) {
34
        _reset();
35
      }
36
      _th = e.target;
37
      _cellIndex = _th.cellIndex;
38
      var tbody = _th.offsetParent.getElementsByTagName('tbody')[0],
39
        rows = tbody.rows;
40
      if (rows) {
41
        rows = Arr.sort.call(Arr.slice.call(rows, 0), _sort);
42
        if (_order === 'asc') {
43
          Arr.reverse.call(rows);
44
        }
45
        _toggle();
46
        tbody.innerHtml = '';
47
        Arr.forEach.call(rows, function(row) { tbody.appendChild(row); });
48
      }
49
    }
50
 
51
    return {
52
      init: function() {
53
        var ths = document.getElementsByTagName('th');
54
        Arr.forEach.call(ths, function(th) { th.onclick = onClickEvent; });
55
      }
56
    };
57
  })(Array.prototype);
58
 
59
  document.addEventListener('readystatechange', function() {
60
    if (document.readyState === 'complete') {
61
      LightTableSorter.init();
62
    }
63
  });
64
 
65
})(document);
 

Light Javascript Table Sorter

CSSDeck G+