I'm trying to create a jQueryMobile compatible <table> with TYPO3.
It means adding data-role="table" and class="class="ui-responsive"".
This table can be generated with RTE or a Table Content Element.
RTE
Default <table> HTML
<table style="" class="contenttable">
<thead>
<tr>
<th scope="col">head 1</th>
<th scope="col">head 2</th>
<th scope="col">head 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>L 1</td>
<td>...</td>
<td>...</td>
</tr>
<tr>
<td>L 2</td>
<td>...</td>
<td>...</td>
</tr>
</tbody>
</table>
attempt to solve problem
I've added the following setup but jQuery seams not to work anymore. It load (spinning animation) indefinitely.
lib.parseFunc_RTE.externalBlocks.table.stdWrap.HTMLparser.tags.table.fixAttrib.data-role.always = 1
lib.parseFunc_RTE.externalBlocks.table.stdWrap.HTMLparser.tags.table.fixAttrib.data-role.default = table
lib.parseFunc_RTE.externalBlocks.table.stdWrap.HTMLparser.tags.table.fixAttrib.class.default = ui-responsive
lib.parseFunc_RTE.externalBlocks.table.stdWrap.HTMLparser.tags.table.fixAttrib.class.list = ui-responsive
Content Element
Default <table> HTML
<table class="contenttable contenttable-0 test">
<thead>
<tr class="tr-even tr-0">
<th class="td-0" scope="col" id="col162967-0">head 1</th>
<th class="td-1" scope="col" id="col162967-1">head 2</th>
<th class="td-last td-2" scope="col" id="col162967-2">head 3</th>
</tr>
</thead>
<tbody>
<tr class="tr-odd tr-1">
<td class="td-0" headers="col162967-0">L 1</td>
<td class="td-1" headers="col162967-1">...</td>
<td class="td-last td-2" headers="col162967-2">...</td>
</tr>
<tr class="tr-even tr-last">
<td class="td-0" headers="col162967-0">L 2</td>
<td class="td-1" headers="col162967-1">...</td>
<td class="td-last td-2" headers="col162967-2">...</td>
</tr>
</tbody>
</table>
attempt to solve problem
I don't find in tt_content where to add configuration to add a classand data-role.
For the TABLE content element you have at least 2 options:
A. Render the table yourself - You can create your own PHP method that would do the processing of the tables. I presume you are using css_styled_content extension whose method render_table() does the rendering of the tables. You can copy that method, add it to your own class and modify it so that it adds the data-role attribute as you want.
B. Do some replacing of the outputted code - You can try to use the replacement property (available in TYPO3 >=4.6) of the stdWrap to replace class="contenttable with data-role="table" class="ui-responsive. I currently cannot test it but try this:
tt_content.table.20.stdWrap.replacement {
10 {
search = class="contenttable
replace = data-role="table" class="ui-responsive
}
}
There's a bug report open at forge to override the Flexform values via TSconfig TYPO3 forge.
The suggested workaround by overriding the flexform completly works fine though:
\TYPO3\CMS\Core\Utility\ExtensionManagementUtility::addPiFlexFormValue('*', 'FILE:EXT:'.$_EXTKEY.'/flexform_table.xml', 'table');
Related
It's a lot that I used MVC but I need to create a widget using Abp.IO,
What I currently got is
But I want to hide this SenzaAgente and ConAgente, I think this is generated since I use abp-input and it get the value of the property, does exist a way of hiding it and gaining the space (The SENZA Agente on the left should be on the same line of the number)
The code I used is
<abp-table hoverable-rows="true" responsive-sm="true">
<tbody>
<tr>
<td></td>
<td>% RINCARO</td>
</tr>
<tr>
<td>SENZA Agente</td>
<td><abp-input readonly="true" asp-for="#Model.Rincaro.SenzaAgente"></abp-input></td>
</tr>
<tr>
<td>CON Agente</td>
<td><abp-input readonly="true" asp-for="#Model.Rincaro.ConAgente"></abp-input></td>
</tr>
</tbody>
</abp-table>
You can use suppress-label="true" attribute
<abp-table hoverable-rows="true" responsive-sm="true">
<tbody>
<tr>
<td></td>
<td>% RINCARO</td>
</tr>
<tr>
<td>SENZA Agente</td>
<td><abp-input suppress-label="true" readonly="true" asp-for="#Model.Rincaro.SenzaAgente"></abp-input></td>
</tr>
<tr>
<td>CON Agente</td>
<td><abp-input suppress-label="true" readonly="true" asp-for="#Model.Rincaro.ConAgente"></abp-input></td>
</tr>
</tbody>
</abp-table>
I'm using Mottie's tablesorter plugin with the Math extension. I have a conditionally formatted table - the categories of conditional formatting are indicated in a data-color attribute on the data cell.
In the footer, I have several rows that summarize the values of the conditional formatting. The footer cells are decorated with data-math-filter="[data-color='color1']".
<table>
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
</tr>
</thead>
<tbody>
<tr>
<td data-color='red' style='background-color:red'>
3
</td>
<td data-color='blue' style='background-color:blue'>
7
</td>
</tr>
<tr>
<td data-color='green' style='background-color:green'>
6
</td>
<td data-color='red' style='background-color:red'>
4
</td>
</tbody>
<tfoot>
<tr>
<td data-math-filter='[data-color="red"]' data-math='col-sum'></td>
<td data-math-filter='[data-color="red"]' data-math='col-sum'></td>
</tr>
<tr>
<td data-math-filter='[data-color="green"]' data-math='col-sum'></td>
<td data-math-filter='[data-color="green"]' data-math='col-sum'></td>
</tr>
<tr>
<td data-math-filter='[data-color="blue"]' data-math='col-sum'></td>
<td data-math-filter='[data-color="blue"]' data-math='col-sum'></td>
</tr>
</tfoot>
</table>
My reading of the docs leads me to believe that the math function will filter for the data-elements - but it doesn't seem to work. I've tried a bunch of different CSS filters - nothing seems to work.
What am I doing wrong?
Here im using DataTable with Angular2 Here DataTable is working wen i refresh the page.But its not loading on 1st Run
<table datatable class="row-border hover">
<thead>
<tr>
<th>Auction ID</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let value of auction">
<td>{{value.name}}</td>
<tbody>
</table>
At The same time i used normal DataTable(Without *ngFor="") its working fine without any issue
<table datatable class="row-border hover">
<thead>
<tr>
<th>Auction ID</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<tbody>
</table>
In my ASP.NET MVC Core app that uses Bootstrap (installed by default by Visual Studio 2015 MVC Core project), I need to use ID column in a controller but want to hide it in the View. But the following View still displays the column as blank. I would like to hide the first columns that is the ID column
View:
#model List<myProj.Models.StateName>
<form id="target" asp-controller="TestController" asp-action="TestAction" asp-route-returnurl="#ViewData[" ReturnUrl"]" method="post">
<table class="table">
<thead>
<tr>
<th></th>
<th>
State Name
</th>
<th>
State Code
</th>
</tr>
</thead>
<tbody>
#for (int i = 0; i < Model.Count(); i++)
{
<tr>
<td><input asp-for="#Model[i].StateId" type="hidden" /></td>
<td>
<label asp-for="#Model[i].State"></label>
</td>
<td>
<input asp-for="#Model[i].StateCode" type="text" readonly style="border:0px;"/>
</td>
</tr>
}
</tbody>
</table>
<button type="submit" class="btn btn-default">Save</button>
</form>
I've tested the behavior you describe in this pen. The "Bad Table" version demonstrates what I believe you are likely seeing and occurs by neglecting to add display:none to one single th/td in that column. The "Good Table" version has the first column completely hidden and stretches to fill the entire available width.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<h2>Good Table</h2>
<table class="table">
<thead>
<tr>
<th style="display:none">Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
</thead>
<tbody>
<tr>
<td style="display:none">Data 1.1</td>
<td>Data 1.2</td>
<td>Data 1.3</td>
</tr>
<tr>
<td style="display:none">Data 2.1</td>
<td>Data 2.2</td>
<td>Data 2.3</td>
</tr>
<tr>
<td style="display:none">Data 3.1</td>
<td>Data 3.2</td>
<td>Data 3.3</td>
</tr>
</tbody>
</table>
<h2>Bad Table</h2>
<table class="table">
<thead>
<tr>
<th style="display:none">Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
</thead>
<tbody>
<tr>
<td style="display:none">Data 1.1</td>
<td>Data 1.2</td>
<td>Data 1.3</td>
</tr>
<tr>
<td>Data 2.1</td> <!-- WHOOPS -->
<td>Data 2.2</td>
<td>Data 2.3</td>
</tr>
<tr>
<td style="display:none">Data 3.1</td>
<td>Data 3.2</td>
<td>Data 3.3</td>
</tr>
</tbody>
</table>
Long and short, check the rendered output and ensure that each th/td in the column you are hiding ended up with the display:none style.
Given:
<table id="identification-data" class="pure-table">
<thead>
<tr>
<th>Name</th>
<th>DOB</th>
<th>Gender</th>
<tr>
</thead>
<tbody>
<tr th:each="row : ${identificationData}">
<td th:text="${row['Name']}">Brian Smith</td>
<td th:text="${#calendars.format(row['Date of Birth'], 'MM/dd/yyyy')}">10/11/1971</td>
<td th:text="${row['Gender']}">Male</td>
</tr>
</tbody>
</table>
If the collection ${identificationData} is empty - is there a thymeleafy way to show a message like "no data found"?
I could do something on the controller side like:
if (identificationData.isEmpty()){
model.addAttribute("identificationDataNotFound", Boolean.TRUE);
}
model.addAttribute("identificationData", identificationData);
The most "thymeleafy" way that I can think of is to conditionally render a <tbody> containing the "No data found" message if the list is empty. You can use the utility object #lists to check if the list is empty in the UI (saving you one more boolean model attribute)
<tbody th:if="${not #lists.isEmpty(identificationData)}">
<tr th:each="row : ${identificationData}">
...
</tr>
</tbody>
<tbody th:if="${#lists.isEmpty(identificationData)}">
<tr>
<td colspan="3">No Data found</td>
</tr>
</tbody>