Show specific child row in datatables - javascript

Let's say that I have a added 2 children to a datatable row using row().child()
row.child([item1, item2]);
Later, I would like to show one of the children, without regenerating it. row.child.show() works fine, except that it shows both childs.
How to show a specific child from row.child?
Fiddle: http://jsfiddle.net/mg22w6o5/
Try clicking the first generated row. How to only show one of the childs?
My current solution if it helps anyone: http://jsfiddle.net/mg22w6o5/4/

There is no direct API to selectively show or hide child rows. There is row().child() that returns jQuery collection of all child <tr> rows though but it's not helpful in this situation.
The possible solution would be to recreate child rows as shown below:
var dummyChilds = [['child 1'], ['child 2']];
table.row(0).child(dummyChilds);
$('#example tbody').on( 'click', 'tr', function () {
var row = table.row(this);
var children = row.child();
if(children){
var child = row.child;
// Recreate children rows
row.child(dummyChilds[0]);
if ( row.child.isShown() ) {
child.hide();
} else {
child.show();
}
}
} );
See this JSFiddle for demonstration.

You can get it by number of the node:
row.childNodes[0];
If you have unique id's or classes there is also find() in jquery.

Related

jquery datatable - Get column name by clicking on table footer cell

I am trying to get the column name when the user clicks on the jquery datatable's footer cell.
I tried to follow this: https://datatables.net/forums/discussion/24593/retreive-column-idx-when-clicking-on-header
And, https://datatables.net/reference/type/column-selector
But, I am getting 'undefined' with the following code,
$('#myTable').on( 'click', 'tfoot th', function () {
var index = table.column( this ).index(); //index is returned as undefined
} );
Any suggestion will be greatly appreciated.
CAUSE
Columns can be selected only if you use header th nodes or table body td nodes, that's why it doesn't work.
SOLUTION
Try the code below to get actual column index.
Modifier :visible is needed because $(this).index() operates with actual DOM elements and returns index of the th node among currently visible columns. However jQuery DataTables may remove columns from DOM when using various extensions, such as Responsive, Buttons - Column visibility, etc, and actual column index may differ from index of the column in DOM.
$('#example').on( 'click', 'tfoot th', function () {
var index = table.column($(this).index() + ':visible').index();
});
See this example for code and demonstration.

JQuery Table Toggle Row issue

I have table which is being dynamically created.
I would like to try not to have any more attributes in the table (like an ID field).
It is a multilevel table where all the TableRows should be expandable and collapse on click in any of the TD in each row.
$('.fylke_click').click(function () {
$(this).parent().nextUntil('.fylke').slideToggle(0);
$('.sted').hide();
});
$('.kom_click').click(function () {
$(this).parent().nextUntil('.kommune').slideToggle(0);
});
See this simplified fiddle:
http://jsfiddle.net/T2Lwn/
So it's basically 3 levels and it is a lot of problems here.
One obvious one is when you are on the second level, which is called "kommune" and if you click on the last TR it removes the "fylke" underneath. As you can see if you click on "MIDTRE GAULDAL"
This is probably because I use .Parent() and I need some sort of if check if I am on the last row?
Is it also other problems with this code? Can I specify the click method class="fylke_click" and class="kom_click" on a more general level?
For example for all <tr class="fylke"> each TD class will have class="fylke_click" and same for kommunne?
If I understand your issue correctly this may help:
Demo Fiddle:
Since you said you're going to be dynamically creating this content, I would recommend delegating off of the main table instead of making a click handler for each row. Also, since all of the stuff you want to show / hide are siblings and not nested, things get a bit tricky. You'll need to be specific with your .nextUntil() by passing a filter, and I found a :not() on the filter was necessary.
Again, since these are all siblings, it's not as easy as hiding the children of the header row, so I set up an "open" class to check if the header was open or not, and hid / showed stuff depending on if it was already open.
JS:
$('.kommune').hide();
$('.sted').hide();
$('.table').on('click', 'tr', function(){
$this = $(this);
if( $this.hasClass('fylke') ){
if ( $this.hasClass('open') ) {
$this.toggleClass('open').nextUntil('.fylke', 'tr').hide();
}
else {
$this.toggleClass('open').nextUntil('.fylke', 'tr:not(.sted)').toggle();
}
}
else if ( $this.hasClass('kommune') ){
$this.nextUntil('.kommune', 'tr:not(.fylke)').toggle();
}
});

Chosen JS with clone(true,true), rerender on append

I am using the Chosen JS jQuery plugin & I am trying to get it to rerender every time a cloned element (using true, ture - this is because I need to copy the on click events) is appended to the dom.
This is my code:
var container = jQuery(self.options.parent_class + ' tbody tr:first-child'),
container_clone = container.clone(true,true);
var elem = container_clone.find('select');
elem.chosen('destroy');
elem.chosen();
return container_clone;
Here it is on fiddle: http://jsfiddle.net/udj7t/1/
Try this,
$(document).ready(function(){
$('select').chosen();
$('a#clone_me').on('click', function(){
var $clone = jQuery('#toClone select:first').clone();
$clone.removeAttr('style');
//$clone.chosen('destroy');
jQuery('#toClone').append($clone);
jQuery('#toClone select:last').chosen();
});
});
Demo
For those interested in a possible solution that will work with clone(true, true), as per the OP's actual question I found that doing the following worked for me. I also had multiple selects in my cloned row so I needed to use the each() method. This could easily be adapted though.
// Look through the cloned row and find each select
$clone.find('select').each(function (){
// Because chosen is a bitch with deep cloned events
// We need to make another internal clone with no events
$clonedChosen = $(this).clone().off();
// Now we can delete the original select box
// AND delete the chosen elements and events
// THEN add the new raw select box back to the TD
$parentTd = $(this).closest('td');
$parentTd.empty().append($($clonedChosen).show());
// Finally, we can initialize this new chosen select
$parentTd.find('select').chosen();
}

Find TH object (table head) by text using jquery without iterating over all TH's of a table

I have dynamically created HTML table clicking on its TH will reload the table according to sorted column.
What i want is to apply a class to the TH clicked.
Since the table is reloaded i first put the clicked column name in a Global variable and then when the table get reloaded i want to apply a CSS class.
The requirement is i want to search the THs in a TR by text (without iterating all elements) and then apply a class.
Any help is appreciated
Thanks
EDIT:
We cannot use :contains becuase two column names can contains similar text header
jQuery's filter function allows you to specify a function to be used as the filter.
$("th").filter(function() {
return $(this).text() == "foo";
}).addClass("newClass");
To apply a class to the th when clicked:
$(function () {
$('th').on('click', function () {
$(this).addClass('myClickedClass');
});
});
If you want to apply the class based on the match of a string, use this:
$(function () {
$("th:contains('" + myStringValue + "')").addClass('myClickedClass');
});

Update background color of table row using jquery

I used the following jquery to load an external html page into a div named content:
$(document).ready(function(){
$("#content").load("content.html");
});
(function($) {
$(function() {
$('.load_link').click(function() {
$("#content").load("content2.html");
return false;
});
});
})(jQuery);
The link (using <a class="load_link">) that triggers the change of content is within a row in a table. I'd like to be able to update the class assigned to a row of a table when someone clicks a link. The row that contains the link clicked should be assigned the class "rowselected" and all other rows (in that table only) should be assigned the class "rownotselected". Only rows in this table use those class names so it should be safe to replace any occurrence of that class name.
It this possible? I'm using jquery for the very first time.
Thanks in advance for any advice!
How about:
$('.load_link').click(function() {
$("#content").load("content2.html");
var $row = $(this).closest("tr");
// find the parent <tr> and set the class
$row.removeClass("rownotselected").addClass("rowselected");
// Set the class of the other rows:
$row.siblings("tr").removeClass("rowselected").addClass("rownotselected");
return false;
});
Find the parent tr using closest()
Use removeClass and addClass to remove the appropriate classes
Using siblings() to find sibling rows in the current table.
Here's a working example: http://jsfiddle.net/andrewwhitaker/vN2ny/

Categories

Resources