Bootstrap Snippet JavaScript Table Sorter using HTML CSS Javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html>
<html>
    <head>
<title>Light Javascript Table Sorter</title>
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap.no-icons.min.css" rel="stylesheet">
    </head>
    <body>
<section class="container">
    <h2>Light Javascript Table Sorter</h2>
    <table>
        <thead>
            <tr>
                <th>Name</th>
                <th>Email</th>
                <th>Phone</th>
                <th>Price</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>John Doe</td>
                <td>john.doe@gmail.com</td>
                <td>0123456789</td>
                <td>99</td>
            </tr>
            <tr>
                <td>Jane Vanda</td>
                <td>jane@vanda.org</td>
                <td>9876543210</td>
                <td>349</td>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
h2 {
  margin-bottom: 50px;
}
.container {
  text-align: center;
  overflow: hidden;
  width: 800px;
  margin: 0 auto;
}
.container table {
  width: 100%;
}
.container td, .container th {
  padding: 10px;
}
.container td:first-child, .container th:first-child {
  padding-left: 20px;
}
.container td:last-child, .container th:last-child {
  padding-right: 20px;
}
.container th {
  border-bottom: 1px solid #ddd;
  position: relative;
  cursor: pointer;
}
.container th.desc:after {
  border-top-color: #666;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
(function(document) {
    'use strict';
    var LightTableSorter = (function(Arr) {
        var _th, _cellIndex, _order = '';
        function _text(row) {
            return row.cells.item(_cellIndex).textContent.toLowerCase();
        }
        function _sort(a, b) {
            var va = _text(a), vb = _text(b), n = parseInt(va, 10);
            if (n) {
                va = n;
                vb = parseInt(vb, 10);
            }
            return va > vb ? 1 : va < vb ? -1 : 0;
        }
        function _toggle() {
            var c = _order !== 'asc' ? 'asc' : 'desc';
            _th.className = (_th.className.replace(_order, '') + ' ' + c).trim();
            _order = c;
        }
        function _reset() {
            _th.className = _th.className.replace('asc', '').replace('desc', '');
            _order = '';
        }
        function onClickEvent(e) {
            if (_th && _cellIndex !== e.target.cellIndex) {
                _reset();
            }
            _th = e.target;
            _cellIndex = _th.cellIndex;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"JavaScript Table Sorter"
Bootstrap 3.3.0 Snippet by ASDAFF

Related: See More

Questions / Comments:

"JavaScript Table Sorter" Bootstrap 3.3.0 Snippet by ASDAFF

Related: See More

Questions / Comments:

"JavaScript Table Sorter"
Bootstrap 3.3.0 Snippet by ASDAFF