Bootstrap sortable table columns example


In this article, i wanted to share with you simple example of bootstrap sort table column using bootstrap-sortable plugin.

We may sometime need to add sorting a-z or z-a means asc or desc order of table column. At that moment we can also use bootstrap plugin for that. So here i will show you simple example of bootstrap-sortable plugin and you can see how it easy.

bootstrap-sortable plugin provide several feature like data-defaultsort, data-firstsort, data-value etc. So here you can simply understand how it works.

Example:

<!DOCTYPE html>

<html>

<head>

<title>Bootstrap sortable table columns example</title>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />

<link rel="stylesheet" href="https://drvic10k.github.io/bootstrap-sortable/Contents/bootstrap-sortable.css" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.19.1/moment.js"></script>

<script src="https://drvic10k.github.io/bootstrap-sortable/Scripts/bootstrap-sortable.js"></script>

<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">

</head>

<body>


<div class="container">

<h1>Bootstrap sortable table columns example</h1>

<table class="table table-bordered sortable">

<thead>

<tr>

<th>No</th>

<th>Name</th>

<th>Email</th>

</tr>

</thead>

<tbody>

<tr>

<td>1</td>

<td>Haresh</td>

<td>haresh@gmail.com</td>

</tr>

<tr>

<td>2</td>

<td>Vimal</td>

<td>vimal@gmail.com</td>

</tr>

<tr>

<td>3</td>

<td>Harshad</td>

<td>harshad@gmail.com</td>

</tr>

<tr>

<td>4</td>

<td>Raju</td>

<td>raju@gmail.com</td>

</tr>

<tr>

<td>5</td>

<td>Paresh</td>

<td>paresh@gmail.com</td>

</tr>

</tbody>

</table>

</div>


</body>

</html>

You have to simple copy above code and run it.

You can get more information about plugin from here : bootstrap-sortable.

I hope you found your best example...


November 10, 2017 | 2128 Viewer | Category : Bootstrap HTML JQuery JQuery Plugin
Related Posts