Live Demo: https://matsort-audionote.firebaseapp.com/ (click the "title" header)
My code: https://github.com/AskYous/audio-note/commit/75c667f66ec4e15a5dbd460ec044938782d672a4
I'm having a difficult time getting sortable headers to work. I attached a live demo of my app having header sorting not working, as well as the code I used to implement this. When I click on a header, I get not response. No errors, no sorting, no feedback. I did the following:
Added matSort directive to the table.
Added mat-sort-header to each header.
Imported MatSortModule into app.module.ts.
Provided the MatSort directive to the table data source.
The headers are clickable, and they have toggling arrows, but the rows are not being sorted on click.
It is because you are initializing your datasource's sort as matSort before table is rendered in DOM (because of the *ngIf)
this.notes.sort = this.sort;
change this line
<table mat-table [dataSource]="notes" *ngIf="notes.data" matSort>
to
<table mat-table [dataSource]="notes" [hidden]="!notes.data" matSort>
Related
I get a table to be filled in data by JavaScript, there is a table with single template row with few columns, and are hidden by css, when server returns data, program clone the template row to multiple rows and fill in data to columns of them.
Now, there is a strange thing, if the table is in same page, all things work fine, but if I try to add a new page (i.e. ) and fill in data and then go to new page (i.e. jQuery.mobile.changePage("#newPage")), after new page shown, all cloned rows are processed twice (i.e. I guess that the 'create' event is fired twice), the decoration get duplicate, there are 2 div tag for single input field,
i.e. a input tag is decorated to following:
<td style="min-width: 70px;">
<b class="ui-table-cell-label">Price</b>
<div class="ui-input-text ui-body-inherit ui-corner-all ui-state-disabled ui-shadow-inset">
<div class="ui-input-text ui-body-inherit ui-corner-all ui-state-disabled ui-shadow-inset">
<input data-meta-column="TxnGridTxnPrc" disabled="disabled">
</div></div>
</td>
, but original template row looks correct, just cloned rows get duplicates, I also debugged my JavaScript function, after cloned and filled in data and before I go to new page, all things OK (checked DOM tree by Developer Tools of Chrome browser); my program do not fire selectmenu("refresh") or similar calling, the new page is created and loaded by JavaScript, my understanding is, if 'create' event is already fired before I fill data, then cloned rows also get decorations and no need to be decorated again.
, how to avoid it?
There is a screen dump for demo:
I've been working with Knockout.js for some time now but only recently I've started to integrate jqueryUI animations for the sake of a better user experience. I'm seeing some issues trying to use the animation bindings on the tr elements inside a table tag. When I use the "visible" binding to hide and show each element it works just fine but when I attempt to animate the showing hiding of each element it only seems to apply to the first row in the table. I've attempted this using various methods. I've attempted using the knockout foreach template 'afterAdd' option as described here:
http://knockoutjs.com/documentation/foreach-binding.html#note_5_postprocessing_or_animating_the_generated_dom_elements
I've also created a custom binding and attempted to use that on each of the table row items with the same results.
Lastly I attempted to use the plugin found here:
http://www.codecoding.com/knockout-plugin-visibility-bindings-with-jqueryui-effects/
And again, it only appears to work on the first element of the table. Now before attempting to rewrite my HTML to use divs and spans rather than the tables I wanted to see if anybody else has seen these sorts of issues with knockout in the past. The relevant chunk of HTML is this:
<table class="tab_table table_a">
<tbody data-bind="foreach:featuredMenuItems,visible:showFeatured">
<tr data-bind="fadeVisible:readyToShow, click:function(){$root.showProductOptions($data);}">
<td class="td_large" data-bind="css:{td_select:itemInCart};"><span class="inCart_delete" data-bind="css:{display_IB:itemInCart},click:removeFromCart,clickBubble:false"><i class="fa fa-times-circle"></i></span><span data-bind="text:name"></span></td>
<td class="td_last" data-bind="css:{td_select:itemInCart},text:lineItemCost"></td>
</tr>
</tbody>
</table>
I would paste the ViewModel code in here as well but it is a rather large view model and the relevant part to this is just a simple "readyToShow" observable set to either true or false. Whenever this table is being shown the "readyToShow" values of each of the objects in the observableArray containing the table items is being set to true over time using a timeout so as to show a cascading effect when the table is shown.
I would really appreciate any help you guys could provide. Thanks!
I would like to combine the following
this table sorter
and this fusion table to html table
But after 3 days of working on it I've decided to may be best to ask for help.
Many thanks in advance.
include the tablesorter script.
Add this to the <table> tag:
<table id="myTable" class="tablesorter">
Add this to the code after the table is populated:
$("#myTable").tablesorter();
working example
Here's the thing: file a.php contains jQuery Tablesorter table.
This is the Tablesorter code:
$("#feedsTable thead").live("click", function() {
$("#feedsTable").tablesorter({
widthFixed : true,
dateFormat : "uk",
}).tablesorterPager({
container : $("#pager"),
positionFixed : false
});
});
Slightly stripped table HTML code:
<div id="tablica">
<article class="module width_full">
<div id="pager">
<form>
[snip]tablesort pager stuff...
</form>
</div>
<table id="feedsTable" class="tablesorter" cellspacing="0">
<thead>
<tr>
[snip]table header row...
</tr>
</thead>
<tbody> ... PHP printed table data
Also, file a.php contains refresh link, which, when clicked, calls b.php file which contains following code: $("#tablica").load("a.php #tablica"); (basically, b.php prints table with new elements and then replaces the old table with the new one using the load function).
Of course, I must use either jQuery live or delegate (having some kind of problems with this one, just can't get Tablesorter to work, so I'm using live instead) function instead of (document).ready because once the load code is executed, Tablesorter will not work with the new table data.
But the problem is that when I use jQuery live() function, I need to click twice to be able to use the Tablesorter plugin. It's like the first click only "activates" the plugin, and then, when table header is clicked for 2nd time, table is sorted and it works great.
In a.php, I can add this code
$(document).ready(function() {
$("#feedsTable thead").click();
});
and it will "activate" the plugin and first user's click on the table header will sort the table. But if I add $("#feedsTable thead").click(); to the b.php file and click refresh link, this "hack" does not work, and again two clicks are needed to be able to use Tablesorter plugin after the table with new data is loaded.
Basically, the question is: I would like Tablesorter to work on first click when using jQuery live, and not only on second. How to fix that?
Any help would be much appreciated!
Thanks.
"of course, I must use either jQuery live or delegate"
http://api.jquery.com/live/:
As of jQuery 1.7, the .live() method is deprecated. Use .on() to attach event handlers. Users of older versions of jQuery should use .delegate() in preference to .live().
Try on() and see if it makes much of a difference. If it doesn't then something else is at play.
So, delegate won't work because it is targeting the table inside of #tablica which has all of its contents completely replaced by the load function. Delegate needs an "anchor" element to detect a bubbling event whereas live uses the document, I think. So, the way it is written, when the user clicks anywhere in the thead, tablesorter will initialize. Now a second click will actually sort the column because tablesorter is active.
Anyway, the solution would be to initialize tablesorter within the load callback function. So remove the live function completely and try just this:
$("#tablica").load("a.php #tablica", function(){
$("#feedsTable").tablesorter({
widthFixed : true,
dateFormat : "uk",
}).tablesorterPager({
container : $("#pager"),
positionFixed : false
});
});
Now when the user clicks on the table header it will sort because tablesorter is initialized immediately after the content is loaded.
I am using jquery 1.6.4 and I have a table. Initially in the table, a user is presented by only one row and a few columns. I, then, let users add as many rows as they would like using by doing this
$('.add').live('click', function(e){
e.preventDefault();
var $parentRow = $(this).parents('tr');
$parentRow.clone().insertAfter($parentRow);
$parentRow.next().find('input').val('');
$(this).replaceWith('-');
});
I also let them delete the rows on fly doing this
$('.delete').live('click', function(e){
alert("removing");
e.preventDefault();
$(this).parents('tr').remove();
});
However now I want the values that they are entering in these columns to be collected. I am not sure how to collect those values when they hit submit button as in my view source all I see is this
<tr>
<td class="actions">+</td>
<td><input type="text"></input></td>
<td><input type="text"></input></td>
<td><input type="text"></input></td>
<td><textarea rows="1"></textarea></td>
</tr>
In the page source it shows only one row where as in my view I definitely see three rows added. Not sure what am I missing and how to get the values
You don't have ids so it will be difficult to tell what you are actually collecting, but to get the values of the inputs, both static and dynamic, you can use this:
//submit code
$('input[type=submit]').click(function(){
$('table input').each(function(index,item){
//for testing you could just output to a div
//$('#output').append($(this).val());
});
});
From what I can tell, your input fields don't have names, so you're not going to get much when submit is pressed.
Also, you won't see DOM updates in your view source. View source will only show you what the page looked like when it first loaded.
To get a live view of the page, you can either use FireBug, for FireFox, or if you're using Google Chrome, there are developer tools under the "View" menu that you can use to see how the html looks live.