Bootstrap sortable table columns example

November 10, 2017 | Category : JQuery Plugin JQuery HTML Bootstrap

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 ?

New Articles

Blog Categories

Random Articles