I am using angular-datatables 13.0.1 in my angular application. I displayed a table using the following code in my UI. It was working.
Html:
<table datatable class="datatable table table-striped table-condensed h5" [dtOptions]="dtOptions" [dtTrigger]="dtTrigger" bFilter=false>
<tfoot>
<tr>
<td colspan="8">
<div class="center-cont-block">
<mfBootstrapPaginator [rowsOnPageSet]="[50,100,500]"></mfBootstrapPaginator>
</div>
</td>
</tr>
</tfoot>
</table>
.ts file
this.dtOptions = {
pagingType: 'full_numbers',
pageLength: 50
};
dtTrigger: Subject<any> = new Subject<any>();
I used this link http://l-lin.github.io/angular-datatables/#/welcome to learn how to display an angular-datatable.
I haven't changed any of the libraries related to this. Surprisingly when I try to implement the same logic in another screen, nothing works.
Either the table developed before or new table.
Pagination is not displayed or the sorting. It is not applying any of the angular-datatables properties. When I inspect the code, many of the properties are missing few them are:
2. aria-controls
Related
I have built an html table that generates dynamically from a data array. It is intended to make a menu of beers on tap in my bar. The array contains the following data: [tap_number, brewery_image, beer_name, price_for_a_pint, price_for_a_pitcher]. Therefore the array dictates that the table generate with 5 columns and 14 rows (with current data). The image data consists of an html tagged image and similarly the beer_name is tagged <h3></h3>. All the html tagged data is rendering as text. What have I done wrong? btw, using Materialize css for basic table styling. Have tried with bootstrap also - same result. Here's a snippet of the html element that the js generates:
<table class = "tabel">
<thead>
<tr>
...has <td>column name</td> X5
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td><img src='[url of image]' alt=''></td>
<td><h3>[Beer_Name]</h3></td>
<td>$6</td>
<td>$10</td>
</tr>
...a bunch more rows..
</tbody>
</table>
.
So data positions 1 and 2 should be rendering according to html tag but are just appearing on the page as the text of their html. All data from the array is passed as textContent. Should I be using innerHtml? when I do, nothing at all renders. Cannot figure out what amateur mistake I've made or whether Materialize is screwing me... Thanks for any advice...
It was an amateur mistake. was using innerHtml instead of innerHTML....
I'm using jQuery Footable V3 and trying to using the class="" attribute to but when the table is initialized the class attr desappear
Here is my example
<table class="table footable " data-page-size="20" data-paging="true" data-filtering="true" data-sorting="true" ">
<thead>
<tr>
<th data-type="number" data-breakpoints="all" >ID</th>
<th data-sortable="false" data-filterable="false" data-formatter="formatter">X</th>
<th data-type="text" data-sortable="true"><?=_("Descripción")?></th>
</tr>
</thead>
<tbody>
<tr class="danger">
<td>1111111111111</td>
<td>1111111111111</td>
<td>1111111111111</td> </tbody> </table>
Not only class attributes are removed from static tables (where HTML was already created before footable() call) but also HTML inside TD (links, images etc.) with current version 3.0.1.
The current FT 3 documentation is misleading concerning "static" tables, partially wrong.
Have a look at Github issues. You'll find some related to your question.
The best way to avoid this behavior is to load table rows and columns via JSON strings e.g. created with PHP.
Or to use workarounds. Use attributes like data-myclass="danger" and convert it via JQuery to class attribute after FT has been initialized. Sometimes slow!
Or use FT 2 until developers post a statement or maybe new version 3.
I am creating a custom MailChimp template but having issues when using the mc:repeatable element. I have it on a wrapped around a block of code and in the editor when creating a campaign, it works fine, I can spawn a new version of the parent block and move it around in the template, but when I preview, or send the email, the child block that was spawned from the parent sits below it's parent and not where I have placed it following spawning it from the parent block... Something seems to be wrong? (Heavily simplified) Code example below... Anyone any ideas on the fix???
<!-- BLOCK A -->
<div style="width:100%" mc:repeatable="CONTENTBLOCK_A">
<p>This is block A</p>
</div>
<!-- end of BLOCK A -->
<!-- BLOCK B -->
<div style="width:100%" mc:repeatable="CONTENTBLOCK_B">
<p>This is block B</p>
</div>
<!-- end of BLOCK B -->
So, when creating a new campaign, if I duplicate BLOCK A and position the duplicated BLOCK A below BLOCK B - in the preview within the campaign editor it looks fine, but when I click to view it into PREVIEW MODE, or send a PREVIEW EMAIL - the duplicated BLOCK A sits above BLOCK B and below its original spawned parent BLOCK A element...
Any ideas? Are the HTML COMMENTS (e.g. < !-- --> ) The issue perhaps?
Very late, but I was able to find success using this:
<table mc:repeatable="content" mc:variant="variant_1">
<tr>
<td mc:edit="section_1">
Variant 1 Content
</td>
</tr>
</table>
<table mc:repeatable="content" mc:variant="variant_2">
<tr>
<td mc:edit="section_2">
Variant 2 Content
</td>
</tr>
</table>
<table mc:repeatable="content" mc:variant="variant_3">
<tr>
<td mc:edit="section_3">
Variant 3 Content
</td>
</tr>
</table>
More in depth explanation can be found here: Create Editable Content Areas with MailChimp’s Template Language
I have next table in my template:
<table ...>
<tr mc:repeatable mc:hideable>
<td mc:edit="mc-news-item-image"><img .../></td>
<td mc:edit="mc-news-item-h3"><h3>Lorem ipsum.</h3></td>
<td mc:edit="mc-news-item-date"><span>22.10.13</span></td>
</tr>
</table>
In edit campaign mode if I try to dublicate a row I get copy of it but can't edit any block in template. Any help would be much appreciated!
It appears that Mailchimp doesn't allow the hideable and repeatable tags to be on the same table/div.
So you are going to have to use one or the other.
I've been messing with this for far too long, and managed to get IE8 working, but IE7 has me stumped.
I've got a table, and for each column, I am trying to extract a number of divs. I am only extracting divs which match specific selectors, not all divs in the column.
My original jquery selector was
jQuery('div.a1, div.a3, div.a4, div.a7','table#a'+tableId+' td:nth-child('+columnNum+')').each(function(){
alert(jQuery(this).attr('id'));
});
This worked great in FF, but didn't trigger the .each function at all in IE.
After messing around for a bit, I got to
jQuery('td:nth-child('+columnNum+') > div.a1, td:nth-child('+columnNum+') > div.a3, td:nth-child('+columnNum+') > div.a4,td:nth-child('+columnNum+') > div.a7', table#a+'tableId).each(function(){
alert(jQuery(this.attr('id'));
});
Not so nice, but works in IE8.
I had tried all sorts of combinations using .eq(+'columnNum+') but nothing else was working.
Now I go and test in IE7, and again the .each isn't being triggered.
What is the nicest way (and cross-browser compatible) to work with this sort of .each element?
--------------addition--------------
After further testing and playing around with suggestions from DrJ and bdukes, I've found that the table#'+tableId breaks the function in both IE7&8.
I've gone back to my original code
jQuery('div.a1, div.a3, div.a4, div.a7','table#a'+tableId+' td:nth-child('+columnNum+')').each(function(){
alert(jQuery(this).attr('id'));
});
as that seems to me the most efficient.
If I remove 'table#a'+tableId, i get the correct response in all browsers, except that it is adding up the results from all tables, and I need to be able to get only the results from one table at a time.
I have also tried 'table#a'+tableId+'>td:nth-child('+columnNum+')').each, but that doesn't work either.
The first function i've used works perfectly in firefox.
----------------the html being selected---------------------------
The tables are being created dynamically in javascript so I can't really copy and past it, but here is what the output looks like. It ends up looking kinda like a gantt chart on a table.
<table id="a1">
<tr>
<th colspan="5">
Group Name
</th>
</tr>
<tr class="rowId1" >
<td>
<div class="a1" id="a43" style="margin-left:13px; width:60px" ></div>
</td>
<td>
</td>
<td>
<div class="a3" id="a93" style="margin-left:4px; width: 80px" ></div>
<div class="a2" id="a94" style="margin-left:4px; width: 30px" ></div>
</td>
<td>
<div class="a1" id="a24" style="margin-left: 15px; width: 65px;" ></div>
</td>
<td>
</td>
</tr>
</tr>
<tr class="rowId1" >
<td>
<div class="a7" id="a24" style="margin-left:10px; width:60px" ></div>
</td>
<td>
<div class="a2" id="a15" style="margin-left:14px; width: 22px" ></div>
</td>
<td>
;
<div class="a2" id="a105" style="margin-left: 8px; width: 50px" ></div>
</td>
<td>
</td>
<td>
<div class="a4" id="a102" style="margin-left: 5px; width: 45px;" ></div>
</td>
</tr>
</table>
It turns out this was an issue with IE failing when two different elements have the same ID. Apparently this breaks the .each function.
I had two tables
table.notes#a1 & table.inputs#a1
The .each function should have gone through each table but instead found neither.
jQuery also wouldn't run in ie with
jQuery('div.a1, div.a3, div.a4, div.a7','table.inputs#a'+tableId+' td:nth-child('+columnNum+')').each(function(){
alert(jQuery(this).attr('id'));
});
which it should have done, as I am them pointing directly to a specific table even if the id is not unique.
I'm using id's retrieved from the database for the id, and IE doesn't like id's that start with numbers, so I just added an 'a' to the beginning of the id.
However, it apparently doesn't like that either, so now I'm adding the first letter of the class and then the '1' or whatever the id number is.
This solves the issue.