We Keep Coding

jquery drag multiple table rows with sortable

i have 2 tables and i need to select some rows from one, then drop them to the other table in the position i want to place.
i can drag multiple rows, but they will be placed on the end of table..i need to place where i want.
i tried with this
$("#table1 .childgrid tr, #table2 .childgrid tr").draggable({
helper: function(){
var selected = $('.childgrid tr.selectedRow');
if (selected.length === 0) {
selected = $(this).addClass('selectedRow');
}
var container = $('<div/>').attr('id', 'draggingContainer');
container.append(selected.clone().removeClass("selectedRow"));
return container;
}
});
http://jsfiddle.net/83k9k/5/
but i can't apply the sortable.
here i tried to apply sortable, but i can't apply the selected rows.
$("#table1 .childgrid, #table2 .childgrid").sortable({
connectWith: ".childgrid",
//connectWith: ".t_sortable",
items: $(".draggable_tr"),
//items: "> tr:not(:first)",
appendTo: $tabs,
//helper:"clone",
zIndex: 999990,
helper: function(){
var selected = $('.childgrid tr.selectedRow');
if (selected.length === 0) {
selected = $(this).toggleClass('selectedRow');
}
console.log(selected.length)
var container = $('<div/>').attr('id', 'draggingContainer');
//console.log(container)
container.append(selected.clone().removeClass("selectedRow"));
return container;
},
update: function (event, ui)
{
$(this).append(ui.helper.children());
$('.selectedRow').remove();
}
}).disableSelection();
http://jsfiddle.net/ce36vd0h/
where is the issue?

Please check below. I have made some changes. THe problem I see is , you are dragging inside a table, so you do not get which tr you are dragging after . I have made below changes. I have added a class tt1 in every table row on the right side table. And then called the droppable in the table row instead of the table itself. You can do the same for the left table. This just show the example. I am not sure if this goes with your actual usecase but I feel this is the best way to identify the table row where you are dropping. I am not sure about the sortable, are you trying to apply sortable after the row is moved ?
http://jsfiddle.net/2gb7vcLf/
$("#table1 .childgrid, #table2 .tt1").droppable({
drop: function (event, ui) {
// alert($(this).hasClass('childgrid'))
//alert($(this).closest('tr').hasClass('draggable_tr'))
var droppedRow = $(this).closest('tr');
// $(droppedRow).css('color', 'red');
$(ui.helper.children()).insertAfter(droppedRow);
// $(droppedRow).next(ui.helper.children());
//$(this).append(ui.helper.children());
$('.selectedRow').remove();
}
});
<tr class="draggable_tr tt1">

How to draw button into table once using dataTable jquery

So I am trying to add a button two each row in the table.
I was able to accomplished this by doing the code below, but the button keeps generating every time i go to the next page and come back to it. It adds one button to the table every time I go between pages. I dont understand why this happening. Can someone please help me out. Thank you in advance.
$('#displayTable').on('draw.dt', function () {
$('.dataTable > thead > tr').append('<th style="width: 163px"></th>');
//adding button to table.
$('.dataTable > tbody > tr').append('<td>Add to Topic</td>');
});

You may use TableTools extension for DataTables to add custom buttons to table header.
In the override options:
"aButtons": [
{
"sExtends": "text",
"sButtonText": " ",
"fnInit": function ( nButton, oConfig ) {
$(nButton).attr("title", "Delete selected items");
$(nButton).removeClass("DTTT_button").addClass("btn btn-small");
$(nButton).append('<i class="icon-trash"></i> <i class="icon-white icon-exclamation-sign"></i>');
},
"fnClick": function( nButton, oConfig, oFlash ) {
if (!$(nButton).attr('disabled')) {
// code to run on click
deleteSelectedItems();
}
}
}
]

For anyone in the future looking for an answer, this is what I did
<script type="text/javascript">
$('#displayTable').on('preInit.dt', function () {
//adding column to table.
$('.dataTable > thead > tr').append('<th>header</th>');
});
$('#displayTable').on('draw.dt', function () {
//adding button to column.
$('.dataTable > tbody > tr').append('<td>Add to Topic</td>');
});
</script>

All checkbox columns are not selected for row that is added to the dom

I have a grid to which I can dynamically add rows and columns. Each column has a checkbox next to it and checking it makes all checkboxes for that column be selected.
It looks like this:
Below is my code to add columns by clicking the "Add another column" button.
$('#btnAddCol').click(function () {
myfrom.find('tr').each(function(){
var trow = $(this);
var columnName = $('#colorName').val()
if(trow.index() === 1){
trow.append('<th > ' + columnName + ' <input type="checkbox" class="colmaster"/>');
}else if (trow.index() > 1){
trow.append('<td><input type="checkbox" name="'+columnName+'" class="child" /></td>');
}
});
iter += 1;
});
And here is the code for selecting all checkboxes in the column.
$('.colmaster').click(function(){
var idx = $(this).parent().index();
$('#colorgrid td:nth-child(' + (idx + 1) + ') input.child').prop('checked', this.checked);
})
Question
For the newly added columns, justadded in the screenshot above, when I check the checkbox it doesn't seem to select all checkboxes in that column
Here is a working fiddle for everything: http://jsfiddle.net/y55nn1qx/4/

$('.colmaster').click will only bind the event to .colmaster elements that exist at the time of running the code. Try something like this:
$('#colorgrid').on('click', '.colmaster', function() {
// insert your .colmaster.click code here
});
Here's the jQuery API reference for on.

Change $('.colmaster').click(function(){ to:
$('.colmaster').live('click', function(){ // jQuery < 1.7
So that any .colmaster added to the DOM after DOM ready can also be included.
NOTE
If you upgrade to a modern version of jQuery you would use:
$(document).on('click', '.colmaster', function(){ //jQuery 1.7+
jQuery API Documentation | live

Table columns collapsed in Javascript

I have this function which is responsible of making the table tr and th collapse. But in fact I don't want to collapse all the table columns (th and tr). I think because I am using $('tr th').click(function() so all the tr and th are collapsing. Is there any way I can exclude some columns? I don't want to move the title..
$('tr th').click(function() {
var index = (this.cellIndex + 1);
var cells = $('table tr > :nth-child(' + index + ')');
cells.toggleClass('collapsed');
if ($(this).hasClass('collapsed')) {
$(this).find('span').html('<b>+</b>');
}
else {
$(this).find('span').html('<b>-</b>');
}
if ($('table tr > th:not(.collapsed)').length)
$('table').removeClass('collapsed');
else
$('table').addClass('collapsed');
});
});
Here is my code: jsfiddle.net/9QkVd/20

To exclude the first column (title), you can use:
$('tr th:gt(0)').click(function() {
...
});
Updated fiddle: http://jsfiddle.net/9QkVd/22/

If I'm interpreting your question correctly, you want a function that collapses some headers but not all. See this fiddle.
All you need to do is slightly modify the selector for your .click function:
$('tr th.collapse').click(function() { ... }
and add a class collapsible onto the headers that you want to have this functionality. Change your CSS a bit so that your title isn't so large and you're done!

Drag and Drop table columns using jquery Plugin

I am having a table which has fixed header and first 3 columns are fixed .
http://jsfiddle.net/ncUdA/embedded/result/
I want to drag and drop the columns (i.e) A,B,C,D,E,F are columns which should be shiftable (drag and drop) enabled.All the elements below it should also be shifted to the new position.
http://jsfiddle.net/ncUdA/
I found a plugin which does what i want but i was not able to implement because usage of multiple tables in my code for fixed header and fixed 3 columns.
http://johnny.github.com/jquery-sortable/#table
Below code is the plugin code on how to do it.
I am using handlebars for templating.
var oldIndex
$('.sorted_head tr').sortable({
containerSelector: 'tr',
itemSelector: 'th',
placeholder: '<th class="placeholder"/>',
vertical: false,
onDragStart: function (item, group, _super) {
oldIndex = item.index()
item.appendTo(item.parent())
_super(item)
},
onDrop: function (item, container, _super) {
var field,
newIndex = item.index()
if(newIndex != oldIndex)
item.closest('table').find('tbody tr').each(function (i, row) {
row = $(row)
field = row.children().eq(oldIndex)
if(newIndex)
field.before(row.children()[newIndex])
else
row.prepend(field)
})
_super(item)
}
})

After google-ing to find the solution to re-order table columns by using drag'n'drop.
I found that 'akottr' has write an awesome jquery plugin. here
It is a library-independent js-function that gives you the ability to re-order table columns by using drag'n'drop. It's very easy to use.
$('#defaultTable').dragtable();
Thus, I hope you will get the re-order table as you want.
Check it out for more example : http://akottr.github.io/dragtable/