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.


<!DOCTYPE html>



<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">



<div class="container">

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

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







































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 | Category : BootstrapHTMLJQueryJQuery Plugin
Related Posts

Blog Search