DataTables

DataTables Examples

HTML

<link rel="stylesheet" href="//cdn.datatables.net/1.10.0/css/jquery.dataTables.css">
<script src="//cdn.datatables.net/1.10.0/js/jquery.dataTables.js"></script>
<script src="http://jquery-datatables-row-reordering.googlecode.com/svn/trunk/media/js/jquery.dataTables.rowGrouping.js"></script>
<script src="http://jquery-datatables-row-reordering.googlecode.com/svn/trunk/media/js/jquery.dataTables.rowReordering.js"></script>
<script src="https://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<table id="mySuperTable">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Address</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Mary Sue</td>
                    <td>123 South st.</td>
                </tr>
                <tr>
                    <td>Anthony Jones</td>
                    <td>321 East st.</td>
                </tr>
                <tr>
                    <td>Jamie Lanister</td>
                    <td>98 King's Landing Ave.</td>
                </tr>
                <tr>
                    <td>Donald Duck</td>
                    <td>54 Disney Dr.</td>
                </tr>
            </tbody>
        </table>

JavaScript

$("#mySuperTable thead tr").prepend('<th>#</td>');    
var count = $("#mySuperTable tbody tr").length-1;
$("#mySuperTable tbody tr").each(function(i, tr) {
    $(tr).attr('id', 'id'+i);
    $(tr).prepend('<td>'+parseInt(i+1)+'</td>');    
    if (i==count) {
       $("#mySuperTable").dataTable({
           //...initialization options
       }).rowReordering();
    }     
});