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...
Do you like below Tutorials ?
- Laravel 5.6 - Collection could not be converted to int
- Laravel - How to generate secure https URL from route?
- Laravel - Vue JS File Upload Example
- How to get last 7 days data in Laravel?
- Laravel Validation required if other field empty example
- Laravel Eloquent - When Case Statement in Select Query Example
- Laravel 7.x and 6.x Passing Variable to Javascript Example
- How to pass PHP variables in JavaScript or jQuery?