I am using Jquery Jtable, I need to expand a child table (I have the "master" row ID).
How can I achieve this?
I would like to show a child table expanded, not collapse as is shown as default.
Thanks,Nk
Trigger the click event:
$('#divTable').jtable('getRowByKey',1).find("img").trigger('click');
Related
situation
I am using bootstrap to render a table based on values in an array of objects. I have a select which has a jQuery on ('change') method attached so that when an item from the list is selected, a new table is rendered based on the selected value.
the table uses bootstrap collapse to show/hide rows from the table when the top row is clicked. the last item in the row has a glyphicon arrow which shows the row can be folded/unfolded as the picture below shows
collapse with glyphicon
I am using the below jQuery to toggle the icon
$('#tog').on('click', function() {
console.log("tog clicked");
$(this).find('span').toggleClass('glyphicon-arrow-up glyphicon-arrow-down');
});
so far I have this all working as shown with this fiddle http://jsfiddle.net/vgfb74u0/
Problem
the issue I am facing is that when a new table is rendered based on the selected item the jQuery that changes the glyphic does not trigger so when the table unfolds the icon remains the same.
I have put in some console.log at the start of the method and I never see it firing. so to my newbie eyes the click event is never triggered.
I'm surprised that i've managed to get this far and at a loss to what the issue might be so any help, pointers or advise is most welcome!
You need to manually bind events to any dynamically created element, or let jQuery do that for you.
Changing
$('#tog').on('click', function() {});
To
$('html').on('click', '#tog', function() {});
Will tell JavaScript to delegate the event to any #tog that's created inside the <html> element.
The problem is the event handler is lost when the table is re-rendered.
The fix is to attach the handler in a different way: $('.table').on('click', '#tog', function() {...}
See the updated jsfiddle
I have specific requirement for datatable using query. I am looking for solution.
I have datatable with rows , each row is either parent row of any other row or child row of other parent row.
I want to Implement button as one of the column, when it is clicked it should scroll me to the parent row. Each row has its own guid and holds value of its parent row's guid.
Open for all kind of solution.
Thank you for your time.
I'm using jquery datatables plugin. (https://datatables.net/) I wanna know if there's a way to change the TD class when the tables is empty.
From what I saw when there are no rows in table datatables inserts a row with a TD with class dataTables_empty . Is there way to change *dataTables_empty* to *myDataTables_empty* ?
I'm using fnRowCallback to change other rows classes... but it seems that this is not working for the auto inserted row when the table is empty.
you could change it using jQuery quite easily.
in your (document).ready handler...
$('.dataTables_empty').removeClass('dataTables_empty').addClass('myDataTables_empty');
Alternatively you could just use the default class name and override it in your CSS.
Otherwise, take a look at the datatables doco...
I was wondering how you would go about deleting a row in a table (HTML table) on the click of a button. At the moment the table is dynamically created with javascript and jQuery but I want to have a button that deletes the buttons row when selected. At the moment is this sort of what each row looks like in the table:
<tr><th>Some text</th><th><button type="button">Delete</input></th></tr>
Since each row has the same setup, is there a way to delete the parent <tr> of the button that was clicked without the use of id's?
You mean*:
<tr><th>Some text</th><th><button class="delete">Delete</button></th></tr>
DEMO
$('#table').on('click', '.delete', function(){
$(this).closest('tr').remove();
});
My application is in ASP.net MVC3.
I have a table of elements. An element can have child elements, but a child element cannot. In the table, if the element has children, they are listed in a ul. A user can select the items in the list to remove it from that parent. When this happens, the element is removed from the list, and a partial view is rendered that makes a new row in the table for that element since it is no longer a child. Elements that are not children and don't have children of their own are able to be combined with other elements by selecting the element you want to combine it with from a dropdown. My problem is that when you remove an element from a parent, the dropdown created for the table row in the partial view does not have the functionality needed.
I think that this may be due to the fact that my javascript function to combine elements is in the $(document).ready(function () {...}); and that dropdown is no there on page creation.
is there a way to add my $('.combineDropdown').change(function () {...}); to an element that has been created dynamically?
You need to use bind, on, delegate or one (depending on what you need). This needs to be done each time you add a new element
Why use jQuery at all for this? You can acheive the same result by outputting the dropdown with the onChange html attribute pointing to a javascript function to be executed.
Example:
<select onChange="myFunction(this)"><option>...</option></select>