jquery table columns Drag and Drop with re-order
<p>I want to allow the user to reorder the columns in the table by dragging and dropping them. I am using jquery.dragtable.js to allow drag and drop and save the order after drag and drop even reload the page. Here I used localStorage to store table order as option provide by plugin JS. Its working with only a single table. In More than one table with name column header, its not working.
Actually, It's overwrite the previous localStorage variable with another table order value.</p>

<p>HTML:</p>

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

    &lt;hr&gt;

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

<p>Jquery -</p>

<pre><code>$(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
        })
    }); 
}
</code></pre>

<p>I would like to work reoder multipule table. Please suggest any solution. Thanks</p>

<p>Plugin Refer: <a href="https://github.com/akottr/dragtable" rel="nofollow">https://github.com/akottr/dragtable</a></p>