Jaylen Jaylen - 3 months ago 15
Javascript Question

How can I add column on the fly to a table while using Dragtable UI?

I need a GUI that allows me to move columns around via dragging and dropping them. But I also want to be able to add/ remove column to/from the table on the fly.

I came across Dragtable plugin which seems to be able to do what I need. The only thing that I don't like about this GUI is that its document is not the best.

Anyhow, I added custom jQuery code that will allow me to add column to the table. The problem that I am having is that the columns I manually add are not draggable.

How can I make my manually added column draggable also?

Here is my code that I use to simple add column to the table.

$('#test1').click(function()
{
$( "#testTable1 > thead > tr" ).each(function()
{
$(this).append('<th>New Column</th>');
});

$( "#testTable1 > tbody > tr" ).each(function()
{
$(this).append('<td>New cell in the column</td>');
});

// I tried adding this after I add the column, but it did not work. "it had no affect"
//$('.defaultTable').dragtable();
});


Here is where you can see my code in action



$(document).ready(function() {

$('.defaultTable').dragtable();

$('#test1').click(function()
{
$( "#testTable1 > thead > tr" ).each(function()
{
$(this).append('<th>New Column</th>');
});

$( "#testTable1 > tbody > tr" ).each(function()
{
$(this).append('<td>New cell in the column</td>');
});

$('.defaultTable').dragtable();
});


});

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link href="http://akottr.github.io/css/akottr.css" rel="stylesheet"/>
<link href="http://akottr.github.io/css/reset.css" rel="stylesheet"/>

<link rel="stylesheet" type="text/css" href="//rawgithub.com/akottr/dragtable/master/dragtable.css" />

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>
<script src="//rawgithub.com/akottr/dragtable/master/jquery.dragtable.js"></script>

<!-- only for jquery.chili-2.2.js -->
<script src="//code.jquery.com/jquery-migrate-1.1.1.js"></script>
<script type="text/javascript" src="//akottr.github.io/js/jquery.chili-2.2.js"></script>


<div class="sample">

<button type="button" id="test1">Add column</button>

<div class="demo">
<h4>demo</h4>
<div class="demo-content">
<table class="defaultTable sar-table" id="testTable1">
<thead>
<tr>
<th>TIME</th>
<th>%user</th>
<th>%nice</th>
<th>%system</th>
<th>%iowait</th>
<th>%idle</th>
</tr>
</thead>

<tbody>
<tr>
<td>12:10:01 AM</td><td>28.86</td><td>0.04</td><td>1.65</td><td>0.08</td><td>69.36</td>
</tr>
<tr>
<td>12:20:01 AM</td><td>26.54</td><td>0.00</td><td>1.64</td><td>0.08</td><td>71.74</td>

</tr>
<tr>
<td>12:30:01 AM</td><td>29.73</td><td>0.00</td><td>1.66</td><td>0.09</td><td>68.52</td>
</tr>
</tbody>
</table>

</div>
</div>

</div>




Answer

Just refresh data on your table before calling dragTable again

$('.defaultTable').removeData().dragtable();

DEMO