I'm using a jQuery UI sortable with a table (works fine). I would like to make the header and last row fixed (non-moveable).
The jQuery UI docs indicate this can be done using a selector for items, but I am at a loss for the syntax.
Here is the relevant code:
<script type="text/javascript">
$(function () {
$("#response_options tbody.content").sortable();
$("#response_options tbody.content").disableSelection();
});
</script>
<table id="response_options" class="data-table">
<tbody class="content">
<tr>
<th>Links</th><th>Response</th>
</tr>
<tr class="sortable-row">
<td>Edit</td>
<td>Item 1</td>
</tr>
<tr class="sortable-row">
<td>Edit</td>
<td>Item 2</td>
</tr>
<tr class="sortable-row">
<td>Edit</td>
<td>Item 3</td>
</tr>
<tr class="sortable-row">
<td>Edit</td>
<td>Item 4</td>
</tr>
<tr class="sortable-row">
<td>Edit</td>
<td>Item 5</td>
</tr>
<tr>
<td>Edit</td>
<td>Item 1</td>
</tr>
</tbody>
</table>
The selector goes inside .sortable(...):
$("#response_options tbody.content").sortable();
as
$("#response_options tbody.content").sortable( items: ??? );
and it should be possible to select only items with class="sortable-row"; but again, I am at a loss for the syntax.
This should work:
$("#response_options tbody.content").sortable({items: 'tr.sortable-row'});
This worked for me:
jQuery(".sortable tbody").sortable({
items: 'tr:not(:first)'
});
For this markup:
<table id="tableid">
<thead>
<tr>
<th>namr</th>
<th>id</th>
</tr>
</thead>
<tbody>
<tr>
<td>jagadeesh</td>
<td>1</td>
</tr>
<tr>
<td>jagadeesh</td>
<td>2</td>
</tr>
</tbody>
</table>
Use this jQuery:
$('#tableid tbody').sortable();
It will move only body content of table you cannot move header part.
Related
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?
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.
I want to display terms attribute using thymeleaf. I tried like
<table>
<tr th:each="term: ${contractMap.contractTerms}">
<td><table>
<tr th:each="termRow: ${term.rows}">
<td><table>
<tr th:each="atr: ${termRow.attributes}">
<td th:text="${atr.value}"></td>
</tr ></table>
</td>
</tr>
</table>
</td>
</tr>
</table>
But it is not working.
This is what my highchart looks like atm
I kinda want the chart to be on the right side while the table to be on the left
this is my html:
<div id="words" style="width:70%;float:left;">
<table border="1" class="highchart" data-graph-container-before="1" data-graph-type="column">
<thead>
<tr>
<th>Word</th>
<th>Count</th>
</tr>
</thead>
<tbody>
<tr>
<td>icon</td>
<td>12</td>
</tr>
<tr>
<td>text</td>
<td>12</td>
</tr>
<tr>
<td>your</td>
<td>9</td>
</tr>
<tr>
<td>post</td>
<td>6</td>
</tr>
<tr>
<td>document</td>
<td>5</td>
</tr>
<tr>
<td>with</td>
<td>5</td>
</tr>
<tr>
<td>parentNode</td>
<td>4</td>
</tr>
<tr>
<td>email</td>
<td>4</td>
</tr>
<tr>
<td>com"</td>
<td>4</td>
</tr>
<tr>
<td>googletag</td>
<td>3</td>
</tr>
</tbody>
</table>
What should i do to achieve such output?
If you can change HTML, then simply put table before Highcharts container and set proper styles (float, width). For example you can also use two divs: http://jsfiddle.net/68qdew8g/
<div style="float: left; width: 30%;">
<table border="1" class="highchart" data-graph-container-before="1" data-graph-type="column">
...
</table>
</div>
<div id="words" style="width:70%;float:left;"></div>
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');