<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <div class="col-md-12"> <div class="alert alert-info"> Please Wait...</div> <div class="alert alert-success" style="display:none;"> <span class="glyphicon glyphicon-ok"></span> Drag table row and cange Order</div> <table class="table"> <thead> <tr> <th> Column heading </th> <th> Column heading </th> <th> Column heading </th> </tr> </thead> <tbody> <tr class="active"> <td> Column content </td> <td> Column content </td> <td> Column content </td> </tr> <tr> <td> Column content </td> <td> Column content </td> <td> Column content </td> </tr> <tr class="success"> <td> Column content </td> <td> Column content </td> <td> Column content </td> </tr> <tr> <td> Column content </td> <td> Column content </td> <td> Column content </td> </tr> <tr class="warning"> <td> Column content </td> <td> Column content </td> <td> Column content </td> </tr> <tr> <td> Column content </td> <td> Column content </td> <td> Column content </td> </tr> <tr class="danger"> <td> Column content </td> <td> Column content </td> <td> Column content </td> </tr> </tbody> </table> </div> </div> </div>

(function ($) { $.fn.extend({ tableAddCounter: function (options) { // set up default options var defaults = { title: '#', start: 1, id: false, cssClass: false }; // Overwrite default options with user provided var options = $.extend({}, defaults, options); return $(this).each(function () { // Make sure this is a table tag if ($(this).is('table')) { // Add column title unless set to 'false' if (!options.title) options.title = ''; $('th:first-child, thead td:first-child', this).each(function () { var tagName = $(this).prop('tagName'); $(this).before('<' + tagName + ' rowspan="' + $('thead tr').length + '" class="' + options.cssClass + '" id="' + options.id + '">' + options.title + '</' + tagName + '>'); }); // Add counter starting counter from 'start' $('tbody td:first-child', this).each(function (i) { $(this).before('<td>' + (options.start + i) + '</td>'); }); } }); } }); })(jQuery); $(document).ready(function () { $('.table').tableAddCounter(); $.getScript("http://code.jquery.com/ui/1.9.2/jquery-ui.js").done(function (script, textStatus) { $('tbody').sortable();$(".alert-info").alert('close');$(".alert-success").show(); }); });