CODEWITHSUNDEEP
javascriptjquerydrag-and-drop
Daniel Smith
Daniel Smith

Reputation: 1734

jquery table columns Drag and Drop with re-order

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.

HTML:

<!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>[email protected]</td>
                <td>7788994320</td>
            </tr>
            <tr>
                <th>2</th>
                <td>Jacob</td>
                <td>Thornton</td>
                <td>@fat</td>
                <td>yffft5456</td>
                <td>[email protected]</td>
                <td>7788994320</td>
            </tr>
            <tr>
                <th>3</th>
                <td>Larry</td>
                <td>the Bird</td>
                <td>@twitter</td>
                <td>fgfhgf444</td>
                <td>[email protected]</td>
                <td>7788994320</td>
            </tr>
            <tr>
                <th>4</th>
                <td>Rima</td>
                <td>the Bird</td>
                <td>@twitter</td>
                <td>jjk8899</td>
                <td>[email protected]</td>
                <td>7788994320</td>
            </tr>
            <tr>
                <th>5</th>
                <td>Sundar</td>
                <td>the Bird</td>
                <td>@twitter</td>
                <td>76767687hjh</td>
                <td>[email protected]</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>[email protected]</td>
                <td>7788994320</td>
            </tr>
            <tr>
                <th>2</th>
                <td>Jacob</td>
                <td>Thornton</td>
                <td>@fat</td>
                <td>yffft5456</td>
                <td>[email protected]</td>
                <td>7788994320</td>
            </tr>
            <tr>
                <th>3</th>
                <td>Larry</td>
                <td>the Bird</td>
                <td>@twitter</td>
                <td>fgfhgf444</td>
                <td>[email protected]</td>
                <td>7788994320</td>
            </tr>
            <tr>
                <th>4</th>
                <td>Rima</td>
                <td>the Bird</td>
                <td>@twitter</td>
                <td>jjk8899</td>
                <td>[email protected]</td>
                <td>7788994320</td>
            </tr>
            <tr>
                <th>5</th>
                <td>Sundar</td>
                <td>the Bird</td>
                <td>@twitter</td>
                <td>76767687hjh</td>
                <td>[email protected]</td>
                <td>7788994320</td>
            </tr>
        </tbody>
    </table>

Jquery -

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

I would like to work reoder multipule table. Please suggest any solution. Thanks

Plugin Refer: https://github.com/akottr/dragtable

Upvotes: 0

Views: 7230

Answers (1)

Raeesh Alam
Raeesh Alam

Reputation: 3480

I have solved this problem you can check on jsFiddle from below url. I hope this snippet help you.

jsfiddle.net/raeeshalam/rn8sxxba

Upvotes: 1

Related Questions