Create Sortable HTML Tables In jQuery - sortable.js

sortable.js is a lightweight jQuery plugin that provides a 'sortable' functionality to your table columns with support for fixed table header and column highlighting.

How to use it:

1. Include jQuery library together with the stylesheet sortable.css and JavaScript sortable.js on the webpage.

<link href="sortable.css" rel="stylesheet">
<script src="//code.jquery.com/jquery.min.js"></script>
<script src="sortable.js"></script>

2. Call the plugin on the html table and done.

$('table').sortable({
  // options here
});

3. Config the plugin with the following options.

$('table').sortable({

  // DIV selector before table
  divBeforeTable: '',

  // DIV selector after table
  divAfterTable: '',

  // initial sortable column
  initialSort: '',

  // ascending or descending order
  initialSortDesc: false,

  // language
  locale: 'en',

  // column(s) with negative values
  negativeSort: [],

  // use table array
  tableArray : []
  
});

Change log:

2017-10-18

• Update sortable.js

2017-06-01

• Update sortable.css

2017-05-16

• Update sortable.js

2017-05-11

• JS update

2017-05-08

• JS update

---

This awesome jQuery plugin is developed by rern. For more Advanced Usages, please check the demo page or visit the official website.