I have a script that counts the number of rows in a table and assigns a value attribute to an input field. I am adding the draggable plugin Sortable to table rows, what would be the best way to run this script then on document ready, and on change. The first part works, but i am not getting alerted when the table rows change.
this is now my revised code:
function countRows(){
var i = 0;
$('#offices td input').each(function(){
$(this).attr("value", ++i);
});
}
$(document).ready(countRows);
// Sortable rows
$('.sorted_table').sortable({
containerSelector: 'table',
itemPath: '> tbody',
itemSelector: 'tr',
placeholder: '<tr class="placeholder"/>'
})
$('.sorted_table').children("tbody").sortable({
stop: function (event, ui) {
countRows(); // re-number rows after sorting
}
});
Assuming you are using jQuery UI Sortable:
$('.sorted_table').children("tbody").sortable({
stop: function (event, ui) {
countRows(); // re-number rows after sorting
}
});
jsFiddle demo here: http://jsfiddle.net/7vmf1c4L/
Related
I have a table I'm using jquery Ui sortable.
in the table I have nested rows with different class names.
How I can have ui.item.index() dont count the rows that has that class name when I position an element on the table.
$(".slds-card .slds-card__body table tbody").sortable({
axis: "y",
cancel: '.functionClass'
}).disableSelection()
.on("sortstart", function(event, ui) {
initialPos = ui.item.index();
})
Try this to exclude a row with a specific class...
$(".slds-card .slds-card__body table tbody").sortable({
axis: "y",
cancel: '.functionClass'
}).disableSelection()
.on("sortstart", function(event, ui) {
if( !ui.item.hasClass('exclude') ) {
initialPos = ui.item.index();
}
})
Is there a way for jQuery UI's sortable() to sort rows only by their "containing" element? I have a table with rowspanned cells that are only supposed to be sorted in their containing spanned columns.
var $sortable = $('.nested-sortable tbody');
$sortable.sortable({
helper: function (e, ui) {
ui.children().each(function () {
$(this).width($(this).width());
});
return ui;
}
});
jsfiddle
The column Make isn't sortable. The column Type should only be sortable within its "container", which is the Make column. This means that Types 1 and 2 cannot be dropped to Brand 2 and Type 3 cannot be dropped to Brand 1. The same is true for the Subtypes and models.
Is it possible for jQuery UI sortable out of the box? Thank you.
Apparently, I just needed to add another tbody selector to make it work:
$(function(){
var $sortable = $('.nested-sortable tbody tbody');
$sortable.sortable({
axis:'y',
helper: function (e, ui) {
ui.children().each(function () {
$(this).width($(this).width());
});
return ui;
}
});
});
jsfiddle
I am using datatables.js https://www.datatables.net/ and am running in to a problem where I want the user to select one row for reach table shown.
I've tried several things but can't get it to work, my script checks all the datatables instead of the one you are selecting in. Which I understand because in my code I am fetching all the tables by using var table = $('table').DataTable();
But I have no idea how I could specify it so it checks if a selected class is set on one of the rows in the datatables.
var table = $('table').DataTable();
$('table tbody').on( 'click', 'tr', function () {
if ( $(this).hasClass('selected') ) {
$(this).removeClass('selected');
}
else {
table.$('tr.selected').removeClass('selected');
$(this).addClass('selected');
}
} );
In the on() event get the row's table instead of using the table defined outside of the function.
Code
$('table tbody').on( 'click', 'tr', function () {
var table = $(this).closest("table");
if ( $(this).hasClass('selected') ) {
$(this).removeClass('selected');
}
else {
table.$('tr.selected').removeClass('selected');
$(this).addClass('selected');
}
} );
I have ui-sortable table implemented with jquery-ui. The rows can be dragged to swap positions. All works fine, but when the row is dragged, all the remaining rows in a table get squeezed to 1/5 size (columns overlapping).
here's the code that invokes the sortable script on the table:
$(document).ready(function () {
var fixHelper = function (e, ui) {
ui.children().each(function () {
$(this).width($(this).width());
});
return ui;
};
$("tbody.sortable").sortable({
helper: fixHelper,
connectWith: "tbody.sortable",
containment: "parent",
dropOnEmpty: true,
cancel: "tr.sort-disabled",
receive: function (event, ui) {
ui.item.find("input[type='hidden']").val(this.id);
sortableDummyRowsUpdate();
}
});
});
When the dragged row is released to the new position, the table returns to normal. But while dragging everything looks awful
I'm trying to select more than one item in a jQuery sortable set and then move the selected items around together.
Here's my weak beginning of an attempt to make it work. And here's the code:
HTML:
<div class="container">
<div>one</div>
<div>two</div>
<div>three</div>
<div>four</div>
<div>five</div>
</div>
JS:
$('.container div').draggable({
connectToSortable: '.container',
//How do I drag all selected items?
helper: function(e, ui) {
return $('.selected');
}
});
$('.container').sortable({
axis: 'y',
//How do I sort all selected items?
helper: function(e, ui) {
return $('.selected');
}
});
$('.container div').live('click', function(e) {
$(this).toggleClass('selected');
});
CSS:
body{background-color:#012;font-family:sans-serif;text-align:center;}
div{margin:5px 0;padding:1em;}
.container{width:52%;margin:1in auto;background-color:#555;border-radius:.5em;box-shadow:0 0 20px black;}
.container div{background-color:#333;color:#aaa;border:1px solid #777;background-color:#333;color:#aaa;border-radius:.25em;cursor:default;height:1em;}
.container div:hover{background-color:#383838;color:#ccc;}
.selected{background-color:#36a !important;border-color:#036 !important;color:#fff !important;font-weight:bolder;}
I don't know if I'm headed in the right direction or not. I can't find an example of this anywhere online. Just lots of related questions. Does anyone know how?
For example, if I've selected items 4 and 5 out of a list of 6. I want to be able to drag 4 and 5 to the top of the set to get this order - 4 5 1 2 3 6 - Or if I selected 5 and 1 and drag them to the bottom - 2 3 4 6 1 5
This seems to work with the multisortable plugin. Code below. Or see jsFiddle.
// ctrl + click to select multiple
$('.container').multisortable({
stop: function(e, ui) {
var $group = $('.ui-multisort-grouped').not(ui.item);
$group.clone().insertAfter($(ui.item));
$group.each(function() {
$(this).removeClass('ui-multisort-grouped');
});
$group.remove();
}
});
But what if multisortable breaks with future jQuery versions?
Modifying my answer here (according to your HTML and CSS) :
Select items to sort
Create a custom helper
Hide the selected items until sort is done
Resize the helper and placeholder according to the selection
Manually detach selected items from the current position and attach them to the new position after sort
Show the hidden items (undo step 3) after step5
$(function () {
$('.container').on('click', 'div', function () {
$(this).toggleClass('selected');
});
$(".container").sortable({
revert: true,
helper: function (e, item) {
if (!item.hasClass('selected')) item.addClass('selected');
var elements = $('.selected').not('.ui-sortable-placeholder').clone();
var helper = $('<div/>');
item.siblings('.selected').addClass('hidden');
return helper.append(elements);
},
start: function (e, ui) {
var elements = ui.item.siblings('.selected.hidden').not('.ui-sortable-placeholder');
ui.item.data('items', elements);
var len = ui.helper.children().length;
var currentHeight = ui.helper.height()
var itemHeight = ui.item.height() + 32; // 32 = 16x2 padding
ui.helper.height(currentHeight + (len * itemHeight))
ui.placeholder.height((len * itemHeight))
},
receive: function (e, ui) {
ui.item.before(ui.item.data('items'));
},
stop: function (e, ui) {
ui.item.siblings('.selected').removeClass('hidden');
$('.selected').removeClass('selected');
}
});
});
Updated Fiddle