jquery-tablesortable
Version:
A jQuery Plugin to make a table sortable by clicking header cells
77 lines (71 loc) • 1.83 kB
HTML
<html>
<head>
<meta charset="utf8" />
<title>A jQuery Plugin to make a table sortable by clicking header cells</title>
<style>
table thead th {
cursor: pointer;
}
table thead th.nosort {
cursor: initial;
}
.table_sortable thead th:after {
display: inline-block;
padding: 0 .25rem;
}
.table_sortable thead th.desc:after {
content: '↑';
}
.table_sortable thead th.asc:after {
content: '↓';
}
</style>
</head>
<body>
<table id="myTable" border="1">
<thead>
<tr>
<th rowspan="2" class="nosort" title="nosort">Nr.</th>
<th rowspan="2">Name</th>
<th colspan="2">Order</th>
</tr>
<tr>
<th>number</th>
<th>text</th>
</tr>
</thead>
<tbody>
<tr>
<td>1.</td>
<td>Nikola</td>
<td>2</td>
<td>Tesla</td>
</tr>
<tr>
<td>2.</td>
<td>John</td>
<td>0</td>
<td>Miller</td>
</tr>
<tr>
<td>3.</td>
<td>Jacque</td>
<td>1</td>
<td>Fresco</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>-</td>
<td><a href="https://github.com/duzun/jquery.tableSortable">GitHub</a></td>
<td>-</td>
<td><a href="https://www.npmjs.com/package/jquery-tablesortable">npm</a></td>
</tr>
</tfoot>
</table>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://unpkg.com/jquery-tablesortable"></script>
<script>$('table#myTable').tableSortable();</script>
</body>
</html>