Untitled

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Table Reorder</title>
<script src="jquery-1.7.2.min.js"></script>
<script src="jquery-ui.min.js"></script>
<script src="jquery.dragtable.js"></script>
<link rel="stylesheet" type="text/css" href="dragtable.css" />
</head>
<body>
    <table id="tblReg" class="table table-bordered">
        <thead>
            <tr>
                <th>#</th>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Username</th>
                <th>Password</th>
                <th>Email</th>
                <th>Phone</th>
            </tr>
        </thead>
        <tbody class="sort">
            <tr>
                <th>1</th>
                <td>Mark</td>
                <td>Otto</td>
                <td>@mdo</td>
                <td>545trt574</td>
                <td>Na@email.com</td>
                <td>7788994320</td>
            </tr>
            <tr>
                <th>2</th>
                <td>Jacob</td>
                <td>Thornton</td>
                <td>@fat</td>
                <td>yffft5456</td>
                <td>Na@email.com</td>
                <td>7788994320</td>
            </tr>
            <tr>
                <th>3</th>
                <td>Larry</td>
                <td>the Bird</td>
                <td>@twitter</td>
                <td>fgfhgf444</td>
                <td>Na@email.com</td>
                <td>7788994320</td>
            </tr>
            <tr>
                <th>4</th>
                <td>Rima</td>
                <td>the Bird</td>
                <td>@twitter</td>
                <td>jjk8899</td>
                <td>Na@email.com</td>
                <td>7788994320</td>
            </tr>
            <tr>
                <th>5</th>
                <td>Sundar</td>
                <td>the Bird</td>
                <td>@twitter</td>
                <td>76767687hjh</td>
                <td>na@email.com</td>
                <td>7788994320</td>
            </tr>
        </tbody>
    </table>

    <hr>

    <table id="tblRegMaster" class="table table-bordered">
        <thead>
            <tr>
                <th>#</th>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Username</th>
                <th>Password</th>
                <th>Email</th>
                <th>Phone</th>
            </tr>
        </thead>
        <tbody class="sort">
            <tr>
                <th>1</th>
                <td>Mark</td>
                <td>Otto</td>
                <td>@mdo</td>
                <td>545trt574</td>
                <td>Na@email.com</td>
                <td>7788994320</td>
            </tr>
            <tr>
                <th>2</th>
                <td>Jacob</td>
                <td>Thornton</td>
                <td>@fat</td>
                <td>yffft5456</td>
                <td>Na@email.com</td>
                <td>7788994320</td>
            </tr>
            <tr>
                <th>3</th>
                <td>Larry</td>
                <td>the Bird</td>
                <td>@twitter</td>
                <td>fgfhgf444</td>
                <td>Na@email.com</td>
                <td>7788994320</td>
            </tr>
            <tr>
                <th>4</th>
                <td>Rima</td>
                <td>the Bird</td>
                <td>@twitter</td>
                <td>jjk8899</td>
                <td>Na@email.com</td>
                <td>7788994320</td>
            </tr>
            <tr>
                <th>5</th>
                <td>Sundar</td>
                <td>the Bird</td>
                <td>@twitter</td>
                <td>76767687hjh</td>
                <td>na@email.com</td>
                <td>7788994320</td>
            </tr>
        </tbody>
    </table>

$(document).ready(function(){

    var tblReg  = $('#tblReg').attr('id');
    var tblRegMaster = $('#tblRegMaster').attr('id');

    processDnD(tblReg);
    processDnD(tblRegMaster);

});


function processDnD(cuTable){
    $('#'+cuTable).find('th').each(function() {
        var ctxt = $(this).text();
        if(ctxt == 'First Name'){
            $(this).attr('id','firstName');
        }else if(ctxt == 'Password'){
            $(this).attr('id','password');
        }else if(ctxt == 'Email'){
            $(this).attr('id','iemail');
        }else if(ctxt == 'Username'){
            $(this).attr('id','Username');
        }else if(ctxt == 'Last Name'){
            $(this).attr('id','lastName');
        }else if(ctxt == '#'){
            $(this).attr('id','slNo');
        }else if(ctxt == 'Phone'){
            $(this).attr('id','phone');
        }
    })

    $('#'+cuTable).dragtable({
        persistState: function(table) {
        if (!window.localStorage) return;
            var ss = window.localStorage;
            table.el.find('th').each(function(i) {
            if(this.id != '') {table.sortOrder[this.id]=i;}
        });
        ss.setItem('setTableOrder', JSON.stringify(table.sortOrder));
        },
        restoreState: eval('(' + window.localStorage.getItem('setTableOrder') + ')')
    });

    $('#'+cuTable).each(function(){
        $(this).dragtable({
            placeholder: 'dragtable-col-placeholder',
            items: 'thead th:not(.notdraggable):not(:has(.dragtable-drag-handle)), .dragtable-drag-handle',
            appendTarget: $(this).parent(),
            scroll: true
        })
    });
}