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.
Related
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
Since the align attribute is considered obselete I am cleaning up code to remove it and replace with a CSS class. I'm trying to determine if there is a way to do this using find and replace (or something else) in VS Code.
As an example, I might have some html that looks like this:
<table>
<tr>
<td align="left" class="someclass" id="mainTitleCell" title="Title1">Title1</td>
<td align="center" title="Title2">Title2</td>
<td class="someclass" align="right" title="Title3">Title3</td> <!-- attributes are not always in the same order -->
</tr>
<tr>
<td align="left">Title</td>
<td align="center">Title</td>
<td align="right">Title</td>
</tr>
</table>
which I would like to change to
<table>
<tr>
<td class="left someclass" id="mainTitleCell" title="Title1">Title1</td>
<td class="center" title="Title2">Title2</td>
<td class="right someclass" title="Title3">Title3</td>
</tr>
<tr>
<td class="left">Content</td>
<td class="center">Content</td>
<td class="right">Content</td>
</tr>
</table>
Basically removing the align attribute and either adding a class attribute with a specific value OR adding a specific value to an existing class attribute. Is there a way to do this with the Edit...Replace option in VS Code? I know I can find based on a regex but not sure how I would go about the replace since this becomes
Find the align tag
Remove it
Find a class attribute in the <td> or <th> tag and add the appropriate class
If there is no class attribute, add one with the appropriate class.
Obviously step #1 & 2 are easy, it's #3 & 4 that I'm not sure of. I'd be totally happy with having to run 3 separate find and replace commands (one for left, center and right).
Do I have any options here (I am open to extensions)?
UPDATE:
#Mark had the right answer and I was able to chain together several find and replace commands using the Replace Rules extension. With that I can open a file, run a single keystroke to find and replace everything and clean up the extra spaces in the class attribute.
Try this:
Find: align="(.*?)"(.*?) class="(.*?)"|class="(.*?)"(.*?) align="(.*?)"|align="(.*?)"
Replace: class="$7$1$6 $3$4"$2$5
See regex101 demo.
I'm a little surprised this works as well as it does (I included a couple of other test cases you didn't). The only issue (thus far...) is that it can result in one stray space, as in:
<td class="left ">Title</td> // only happens when there is no class attribute
as you can see in the demo page. You could then search for " and replace with just ". It could be handled by a conditional replacement but vscode find/replace doesn't allow those.
To some degree attributes will be re-ordered so that the class attribute is first, but not always - you didn't mention that as a concern - any attribute that occurs before either the first class or align attribute will not be moved. Otherwise, attributes like id or title if they are between class<->attribute (in any order) will be put last.
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 Umbraco as the CMS, 7.6 - Umbraco.TinyMCEv3
So using insert Table will create HTML something like following
<table>
<tbody>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
How can I configure to add default <thead> when table is created
<table>
<thead>
<tr>…</tr>
</thead>
<tbody>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
Thanks
I don't know if this is all that possible; it seems as though that functionality isn't included as a setting within the editor.
The obvious thing to do if the setting isn't included is to create it yourself - the way to to do this would be to either extend the existing editor or copy and paste the editor to a new one locally.
The files for the editor are under \Umbraco\lib\tinymce
Unfortunately, it appears the angular js file associated with this editor is only available as a non-human readable minified version - likely owing to the fact that tinymce is under license. So any modification of this would be quite tricky, to say the least.
Perhaps see if there is another way around this? You can always set css to select the first child row of the table if it is for styling purposes. Otherwise the only other option would be to create your table in the editor, then choose the code edit option to manually insert the correct table structure.
I have v5 with vue.js
After created table:
1-Click right on row of head you want > row > row properties
click right on row of head>row>row properties
2-In general choose "Header" at Row type
in general select of "Header" at Row type
I know that it's possible to create own decorator but I'm interested in is it possible to create it throught the standart error decorator?
I would like to get smth like this:
<table>
<tr>
<td><label></td>
<td><input></td>
</tr>
<tr>
<td></td>
<td><ul><li>ERROR</li></ul></td>
</tr>
</table>
Regrettably, as of ZF version 1.11.7, only a single tag is supported when it comes to wrapping forms, form elements or individual decorators. You will indeed require a custom decorator.