NiceSnippets.com
Sorting Table Demo Using Sorttable Jquery With HTML,CSS
Sorttable jquery plugin for best sorting js plugin. this plugin you can also use with bootstrap. usign this plugin you can sort table in ascending order or descending order. jquery sort table by column value. jquery sort table by clicking header
We allows to free snippets of jquery ui sortable table , you can download full code of table sort arrow css layout. Here in this post i will give you example of jquery sortable table snippet and you will get simple code of html, css and jquery. In jquery sortable refresh snippet i give you three tab with html, css and js, you can easily get code of jquery sortable table layout.
<!doctype html>
<html>
<head>
<title>Sample</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="custom.css">
<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.12.1.min.js"></script>
<script src="https://www.jqueryscript.net/demo/Simplest-jQuery-Sortable-Table-Plugin-sorttable-js/sorttable.js"></script>
</head>
<body>
<div class="main-section">
<div class="header">
<h1>Shorting Table js using HTML CSS</h1>
</div>
<table style="width:100%" id="dest">
<thead>
<tr>
<th>No.</th>
<th>Title</th>
<th>Date</th>
<th>Price 1</th>
<th>Price 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Test 1</td>
<td>15-01-2018</td>
<td>120</td>
<td>250</td>
</tr>
<tr>
<td>2</td>
<td>Test 2</td>
<td>20-04-2018</td>
<td>40</td>
<td>80</td>
</tr>
<tr>
<td>3</td>
<td>Test 3</td>
<td>15-08-2018</td>
<td>570</td>
<td>120</td>
</tr>
<tr>
<td>4</td>
<td>Test 4</td>
<td>05-02-2018</td>
<td>8</td>
<td>200</td>
</tr>
<tr>
<td>5</td>
<td>Test 5</td>
<td>14-06-2018</td>
<td>200</td>
<td>150</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
body{
background-color:#fafafa;
font-family: 'Roboto Condensed', sans-serif;
}
.main-section{
border:5px solid #a1a1a1;
padding:20px;
margin:auto;
margin-top:100px;
width:800px;
text-align: right;
background-color: #fff;
}
.header{
margin-bottom:30px;
text-align: left;
}
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
$(function(){
$("#dest").addSortWidget();
});
