I am using JQuery Mobile for show a data of Products, someone like this:
<table data-role="table" id="products-vip" data-column-btn-theme="b" data-column-popup-theme="a" data-mode="columntoggle" class="ui-responsive" data-column-btn-text="See">
<thead>
<tr>
<-- <th> with table heads -->
</tr>
</thead>
<tbody>
#foreach(Product in Model)
{
<tr>
<-- <td> with info of Products-->
</tr>
}
</tbody>
</table>
The table is "columntoggle".
My problem is that the Content of the cells exceed the width of the screen, for example, in a iOS browser, and JQuery Mobile truncate the content and do not allow move the page into left or right to see the content.
How I can say to JQuery Mobile that do not truncate the content, and make the table responsive, or the cell with a word wrap indicated.
Thanks!...
Put the table inside a div and allow the div to scroll when the table exceeds the div boundaries:
<div class="tableWrapper">
<table data-role="table" id="products-vip" data-column-btn-theme="b" data-column-popup-theme="a" data-mode="columntoggle" class="ui-responsive table-stroke" data-column-btn-text="See">
<thead>
<tr>
<th>Col 1</th>
<th>Col 2</th>
<th>Col 3</th>
<th>Col 4</th>
</tr>
</thead>
<tbody>
<tr>
<td>Col 1 Row 1 content</td>
<td>Col 2 Row 1 content</td>
<td>Col 3 Row 1 content</td>
<td>Col 4 Row 1 content</td>
</tr>
</tbody>
</table>
</div>
CSS:
.tableWrapper {
overflow: auto;
-webkit-overflow-scrolling: touch;
}
The column contents automatically wraps to multiple line and the table stays within the div until the columns can no longer shrink. At that point, the table becomes wider than the div and the scrollbar appears.
DEMO
Related
How can I prevent Tablesorter from sorting a certain value or keep these values at the bottom? More specifically, this certain value will always be a -
<table id="myTable" class="tablesorter">
<thead>
<tr>
<th>Name</th>
<th>Number</th>
</tr>
</thead>
<tbody>
<tr>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Bach</td>
<td>40</td>
</tr>
<tr>
<td>Doe</td>
<td>-</td>
</tr>
</tbody>
</table>
I want to keep Doe with the value "-" always at the bottom.
Tablesorter has an emptyTo option which can modify the sort behavior of empty, or non-numeric, cells (demo)
In this case, you might need to set a data-text attribute (modified by the textAttribute option to an empty string.
HTML
<td data-text="">-</td>
JS
$('#myTable').tablesorter({
// ...
emptyTo: 'bottom'
});
This worked for me.
Doc: https://mottie.github.io/tablesorter/docs/example-options-headers-digits-strings.html
jQuery(function($) {
$("#myTable").tablesorter({
stringTo: 'bottom'
});
});
I've got an MVC 5 / Bootstrap app that has a table embedded in a panel, as follows:
<div class="panel panel-default col-md-3 col-md-offset-3">
<div class="panel-heading">Life List Counts</div>
<div class="panel-body">
<table class="table table-striped table-bordered table-responsive table-hover">
<thead>
<tr>
<th>Col1</th>
<th>Col2</th>
</tr>
</thead>
<tbody>
#foreach (var item in Model)
{
<tr>
<td>
Col1Data
</td>
<td>
Col2Data
</td>
</tr>
}
</tbody>
</table>
</div>
</div>
I'd like to limit the maximum height of the table to something like 200px and then have the rest of the contents scroll vertically inside the panel. I've been unsuccessful in all my attempts. I've tried putting style heights on the panel and table and neither seems to work.
You need to set the .panel-body height and overflow to auto
.panel-body {
height: 200px;
overflow: auto;
}
If you want to keep the table header fixed there is and article here: fixed header table
that looks quite interesting.
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');
I have a table in a gsp containing 10 deiiferent values :
<table class="table table-striped">
<tr>
<th scope="row">Name:</th>
<td>
${person.name}
</td>
</tr>
<tr>
<th scope="row">Address:</th>
<td>
${person.address}
</td>
</tr>............
I need to highlight (either change the background or text clour on some of the values if they are present in an array also available in the gsp.
Is this possible? For example using g:if? Like :
<tr>
<th scope="row">Name:</th>
<td>
<g:if ${array}.contains("${person.name}")>
//change styling of this cell
${person.name}
</g:if>
</td>
</tr>
This should work, but I've not tried it:
<td class="${array.contains( person.name ) ? 'highlight' : ''}">
So if it contains the name, then a 'highlight' class will be added to the td
I have nested tables where both the inner and outer tables have rows added to them dynamically. When I trigger an update of an inner table, after the inner table order has been changed, the order of the outer table is also changed. I've created a jsfiddle to demonstrate this:
http://jsfiddle.net/FZLxp/
which is forked from the OS question Nested jQuery Tablesorter tables, all sortable
To see the problem sort the outer table by Make so that Toyota is at the top and then click the "update" button. The update button triggers an update of the inner toyota table but also sorts the outer table as well to reflect the sort direction of the Toyota Doors column.
How can I sort the inner table after adding additional rows without sorting the outer table as well?
<script type="text/javascript">
function updateRW() {
$("#toyota").trigger("update", [true]);
}
</script>
<table class="tablesorter">
<thead>
<tr>
<th>Make</th>
<th>Model</th>
</tr>
</thead>
<tbody>
<tr>
<td>Honda</td>
<td>Accord</td>
</tr>
<tr class="tablesorter-childRow">
<td colspan="2" style="padding: 0 30px 0 30px;">
<table class="tablesorter-child">
<thead>
<tr>
<th>Doors</th>
<th>Colors</th>
</tr>
</thead>
<tbody>
<tr>
<td>Honda 2-Door</td>
<td>Honda Red</td>
</tr>
<tr>
<td>Honda 4-Door</td>
<td>Honda Blue</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>Toyota</td>
<td>Camry</td>
</tr>
<tr class="tablesorter-childRow">
<td colspan="2" style="padding: 0 30px 0 30px;">
<table id="toyota" class="tablesorter-child">
<thead>
<tr>
<th>Doors</th>
<th>Colors</th>
</tr>
</thead>
<tbody>
<tr>
<td>Toyota 2-Door</td>
<td>Toyota Yellow</td>
</tr>
<tr>
<td>Toyota 4-Door</td>
<td>Toyota Green</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<input type=button value="update" onclick="updateRW()">
$(document).ready(function()
{
$("table").tablesorter({selectorHeaders: '> thead > tr > th'});
});
This appears to be a bug in tablesorter!
I've opened an issue so we can track it, and I should have this fixed in the next update.
Thanks for reporting it!