Using jQuery (and UI), I want to be able to drag table rows out of the table and drop them on some element. The rows themselves should not leave the table, similar to how iTunes works when dragging multiple selected songs. I need to use a table since this is tabular data and I already have a table sort plugin in place.
Any idea how to achieve this?
JQuery UI's droppable() lets you define a function to run whenever an acceptable draggable() is dropped onto that droppable(). The demo on this page was what helped me understand how to code it. Look at their code by clicking "View Source." Especially this part:
$gallery.droppable({
accept: '#trash li',
activeClass: 'custom-state-active',
drop: function(ev, ui) {
recycleImage(ui.draggable);
}
});
You should be able to create a drop function to clone the row you want, for example, but not delete it from its original location.
Just try this plugin, written in plain Javascript, able to drag and sort rows and columns.
https://sindu12jun.github.io/table-dragger/
Related
I am using JQuery-UI's Sortable to sort my table's td tags of each row as
$(".scheduler").children('tbody')
.children('tr').sortable({
revert: true
});
but I found additional column has appeared. Here is JsFiddle Link. Can anyone give me suggestion ?
Additional question : Can I sort td tags of the whole table instead of each row ? (currently I can sort only td tags of same rows. I would like to drag one td and replace with another td tag of different rows)
Regarding the additional column, it is rendered, because when you start dragging an item, jQuery UI sortable adds a placeholder element to the row.
You could workaround this behavior by using
helper: "clone"
The placeholder will still be added, but the original element to be dragged will get display: none and the helper will be positioned absolutely.
Maybe, instead of using table, you could use a list… https://jqueryui.com/sortable/#display-grid
Regarding sorting the whole table, there is no simple way I can imagine using jQuery UI sortable. The best behavior I achieved so far is initializing using
$(".scheduler").sortable({
items: "td"
});
but it will just move table cells from one row to the other causing more and more columns to be added to the table.
make you jquery code like this
$(".scheduler tr").sortable({
revert: true
});
i tried this on jsfiddle and working for td sorting
I am currently using an open-source javascript table sorter: http://mottie.github.io/tablesorter/docs/
The problem I have is that I dynamically add tables to my page in reaction to the user pressing a button. Only the most recently added table becomes sortable and the previous tables are not sortable anymore after I add the new table. Currently, I have this code at the end of my table creation:
//Make table sortable
$(document).ready(function () {
$("#" + thisTable.ID).tablesorter();
});
I don't understand why the old tables lose their sortability if they're not being reloaded. I am only appending a new table with a different ID under the previously added table.
You can change your selector to $('table'), and this will add the sorter to all tables. Your current code will only run on page load though, so you'll have to execute the $('table').tablesorter(); line every time you dynamically add a new table (in your button's click handler).
It would be better though if you added a class, such as sortedTable to every table, and made your selector $('.sortedTable'), rather than simply $('table'), because you may at some time want a table that isn't sorted and the first version will always sort all tables. The second version will only sort those tables that you explicitly mark as sortable.
There's an example in DataTables for highlighting rows on hover:
http://datatables.net/examples/advanced_init/highlight.html
However, I'm looking for something a bit different. I'd like the highlight to be trigged when users click on words outside the table. For example, in the above link, I'd like row #2 to be highlighted when a user click on "visibility" in the text above the table (so it's kind of a hyperlink).
I'm assuming I can find an highlighting plug-in that maybe can do what I need. But before
I got there, is there any easy way to do this with DateTables or other table/grid plug-ins?
Thank you!
Here is an example of highlight on click.
It also has an example of deleting a row on click from a link outside the table.
EDIT: This example won't do exacly what you want, but it get's you most of the way there. I have retrofitted the example in this fiddle to do what you want. Here is the "click link to highlight row" part of it:
$("#rowHighlightLink").click(function(event) {
$(oTable.fnSettings().aoData).each(function (){
$(this.nTr).removeClass('row_selected');
});
$('#example tbody tr').eq(1).addClass('row_selected');
});
I wanted to do draggable table rows, I found TableDnD jQuery plugin and it works fine
$(function() {
$("table").tableDnD();
});
As you can see there:
http://jsfiddle.net/drBfS/1/.
But I wanted to make only one column draggable. I mean, whole row (tr) is moved like now, but you can move row only by dragging left column (td.drag), when trying to drag right column it should be no effect. Have you got any idea how it can be done?
It appears that this is an older plugin, where it might have been possible to do this at one point, according to this document: http://isocra.com/2008/02/table-drag-and-drop-jquery-plugin/
However, after looking through the source now, it is no longer possible. Instead, perhaps consider simply using jQuery UI sortable. If you wrap your rows in a tbody, this code will get you what you want:
jQuery(function () {
jQuery('table tbody').sortable({ handle:'.drag' });
});
Unfortunately, it's not possible with the TableDnD plugin. That plugin was designed to enable row dragging, not column dragging.
From the documentation:
This TableDnD plugin allows the user to reorder rows within a table
I'm working on the following webpage and have reached a problem. Here's what happens on the site: On, the "mouseup" event after dragging a row, the following events occurs.
server updates the "order number" in the database
server returns the updated database back to the browser.
browser displays the update info.
The problem is that when the browser is updated, the rows are not draggable any more.
When modifying a table dynamically through Javascript, do I need to reload the Javascript "include files" again or something? If you need source code, I can provide.
here is the site
(link now removed, the problem solved)
Currently, I have it simply adding a new row with "made up" information every time you drag something only for testing purposes. What I would like to know, is how to make those new added rows draggable like the rest.
You're using jQuery, which I notice has a Drag and Drop plugin, whose comment section had the following that may be helpful:
#Ian Q: I had a similar problem, when DnD didn’t worked for rows added after initialization.
var params = {
onDragClass: “onDragRow”,
onDrop: function(table, row) { },
onDragStart: function(table, row) {}
};
// Initialization
$(“table”).tableDnD(params);
Then call $(“table”).tableDnD(params); everytime you add rows to that table.
Those new rows are being added to the table but never attached by the javascript library that is allowing you to drag and drop. Also, there seems to be some issue where I'm getting a repeat row? A lot of "Earthquake in Haiti"'s.
Check out the site for the plugin you're using to see how to add new rows into its control.
From the tableDnD website:
Added $(‘…’).tableDnDUpdate() to cause the table to update its rows so the drag and drop functionality works if, for example, you’ve added a row.
So call that function when the rows are inserted/updated.