I tried to include the Column Selector Widget to a table and it didn't work. After a couple of hours i found out that in the demo file itself and the the given html template it differs. On the working demo the table begins with two header rows:
<tr class="tablesorter-ignoreRow hasSpan" role="row">
<th colspan="2" data-column="0" scope="col" role="columnheader" class="tablesorter01e6b87093a1e8columnselectorhasSpan" data-col-span="3">Student</th>
<th colspan="3" data-column="3" scope="col" role="columnheader" class="tablesorter01e6b87093a1e8columnselectorhasSpan" data-col-span="4">Courses</th>
</tr>
<tr role="row" class="tablesorter-headerRow">
<th data-priority="critical" data-column="0" class="tablesorter-header tablesorter-headerUnSorted" tabindex="0" scope="col" role="columnheader" aria-disabled="false" unselectable="on" style="user-select: none;" aria-sort="none" aria-label="Name: No sort applied, activate to apply an ascending sort"><div class="tablesorter-header-inner">Name</div></th>
...
</tr>
but in the HTML template it is instead only one header row
<table class="tablesorter custom-popup">
<thead>
<tr class="tablesorter-ignoreRow"> <!-- Ignore all cell content; disable sorting & form interaction -->
<th data-priority="critical">Name</th>
So if i get it right, the template cannot work at all, because the first (and here the only!) header row has a "tablesorter-ignoreRow"-class given.
When using the sourcecode of the page it now works for me mostly, but the colspan of the first row which includes "student" and "courses" is now confusing me. Is it right that i have to set the colspan and data-col-span-values to the highest possible number of columns in it?
Thanks for any help!
I discovered that when loading bootstrap more than once the selector just doesn't work. Also when you mix bootsrap libs. So far I have not found the real problem. So I would search for the load order of the bootstrap libs
Related
I have a list in Thymeleaf and I want to use th:with in a div to grab the last element in a list. I've tried:
<div th:if="${not #lists.isEmpty(licence.registrations)}"
th:with="lastRegistation=${licence.registrations[__(#lists.size(licence.registrations) - 1)__]}">
<tr>
<td>Name</td>
<td><span th:text="${lastRegistration.name}"/></td>
</tr>
</div>
However this gives me the error:
org.thymeleaf.exceptions.TemplateProcessingException: Could not parse as expression: "(#lists.size(licence.registrations) - 1)" (template: "admin/viewLicence.html" - line 103, col 10)
Does anyone know a way I can get the last item in a list with Thymeleaf?
Cheers,
Neil
If you're using preprocessing, you need to surround the expression with ${...}. Like this:
th:with="lastRegistration=${licence.registrations[__${#lists.size(licence.registrations) - 1}__]}"
That being said, there is no reason to use preprocessing in this case. (And I would remove the extra unused tags as well.) This will work:
<tr th:if="${not #lists.isEmpty(licence.registrations)}"
th:with="lastRegistration=${licence.registrations[#lists.size(licence.registrations) - 1]}">
<td>Name</td>
<td th:text="${lastRegistration.name}" />
</tr>
You can also get fancy with collection selection & projection, but I'm not sure this is an appropriate use. Still, it seems to work:
<tr th:if="${not #lists.isEmpty(licence.registrations)}">
<td>Name</td>
<td th:text="${licence.registrations.![name].$[true]}" />
</tr>
Im running into an issue, and I think the issue is with how my page.all is pulling radio button questions in.
So here is the HTML for the table itself (Multiple questions with 5 radio button choices a piece):
<table class="table table-striped table-stuff table-collapsible">
<colgroup>
<thead>
<tbody>
<input id="0_answer_question_id" value="9966" name="response[answers][0][answer_id]" type="hidden">
<tr>
<td class="heading">
<td class="option">
<div class="radio-inline radio-inline--empty">
<input id="question_1_1" value="1" name="response[answers_attributes][0][answer_opinion]" type="radio">
<label for="question_1_1">Strongly Disagree</label>
</div>
</td>
<td class="option">
<td class="option">
<td class="option">
<td class="option">
</tr>
<input id="response_1_question_id" value="9966" name="response[answers_attributes][1][answer_question_id]" type="hidden">
<tr>
<input id="response_1_id" value="<a number>" name="response[answers_attributes][1][id]" type="hidden">
<Same as above repeated 5 times with numbers changed>
</tbody>
</table>
Im using:
page.all('table.table-stuff tbody tr', minimum: 6).each do |row|
row.all("td label").sample.trigger('click')
end
To get each row and select one from it. HOWEVER, I notice "sometimes" a row will not have one selected. My theory is the "heading" (which has a <label> itself is accepting one of the clicks perhaps? (since from my understanding of how page.all works it's grabbing every tbody tr within the table...but is maybe grabbing the heading too? (since it contains a td label?)
Also when a table is named something like table table-striped table-stuff table-collapsible...how can you tell what the actual table "name" is? (I didn't write this website, just doing tests for it). When putting it in the page.all('table.<etc>')?
If the heading td (it's not expanded in your example) also contains a label element (so it would be included in the results of your all call) then you just need to change the CSS selector so it wouldn't be included - something like
row.all("td.option label").sample.trigger('click') # only choose labels contined in tds with the class of 'option'
or
row.all("td:not(.heading) label").sample.trigger('click') # choose labels contained in tds without the class of 'heading'
On your second question about table names, I don't really understand what you're asking. Tables don't have name attributes, they could have an id attribute or a caption containing some text which could then be used to find them with capybara via find(:table, 'id or caption text') or within_table('id or caption text') { code to execute within scope of the table }. Rather, you seem to be talking about the classes on the element which are specified in a CSS selector with '.'. Therefore a CSS selector to match a table element with all the classes you listed would be - 'table.table.table-striped.table-stuff.table-collapsible'
Note: If you're sure there's always only 5 choices you could add the :count option to your find to make sure your selector is only finding those items
row.all("td.option label", count: 5).sample.trigger('click')
I have my grails view, and using a api rest I Receive an array of items,that I put in a table,and I want to make the pair rows with tr class="alt">
I want for first for second ,and so on.
I was thinking to do that with a or creating a tag,but don´t know really if there is something useful that can use for similar cases.
The tr that I want to change In the code is as
<table id="customers">
<tr>
<th>Foto</th>
<th>Nombre</th>
<th>Vendedor</th>
<th>Precio</th>
<th>Estado</th>
<th>Ciudad</th>
</tr>
<g:each in="${results}">
**<tr >**
<td><img src="${it.thumbnail}"></td>
<td>${it.title}</td>
<td>${it.nombre_vendedor}</td>
<td>${it.price}</td>
<td>${it.condition}</td>
<td>${it.address.state_name}</td>
</tr>
</g:each>
</table>
<g:each in="${results}" status="ix">
<tr class="${ix % 2 ? 'light' : 'dark'}">
<td>...
</tr>
</g:each>
I have tablesorter and pager working together and had no problems so far.
Only thing that I can't manage to do correctly is update the pager after a search.
<table>
<thead>
<tr>
<td>Name</td>
<td>Age</td>
<td>Country</td>
</tr>
</thead>
<tbody>
<tr>
<td>Al</td>
<td>18</td>
<td>Germany</td>
</tr>
<tr>
<td>BAl</td>
<td>19</td>
<td>Italy</td>
</tr>
<tr>
<td>CAl</td>
<td>99</td>
<td>Sweden</td>
</tr>
<tr>
<td>DAl</td>
<td>65</td>
<td>Australia</td>
</tr>
<tr>
<td>EAl</td>
<td>1</td>
<td>Germany</td>
</tr>
</tbody>
I initialize the sorter and the pager to display only 2 rows per page, but after searching for 99 year old person still pager will show 1/3 and not 1/1 which is the correct!
Pager still works, is that visual total page count that is wrong!
Any tips?
I am not sure if this will help or not, but I have it working on mine.
Super important note, all the examples the Official Sorter page has does not use a ID of the table, it just says any table tag. (add the # to the reference)
$("#caseInfoTable").tablesorter({widthFixed: true, widgets: ['zebra']});
$("#caseInfoTable").tablesorterPager({container: $("#pager"), positionFixed: false});
[1]
In the jquery.tablesorter.pager.js file I added these two lines at line 110...
c.pagerPositionSet = false;
fixPosition(table);
Those 2 go right before the line
updatePageDisplay(table);
[1] https://forum.jquery.com/topic/jquery-problem-with-tablesorter-pager-plugin-there-should-be-an-option-to-turn-off-absolute-positioning-of-pager-container/
I have the following table structure inside a view which gets displayed in the _Layout view in place of #RenderBody
<table>
<thead>
<tr>
<th>first</th>
<th>second</th>
<th>third</th>
</tr>
</thead>
<tbody>
<tr>
<td>1st</td>
<td>2nd</td>
<td>3rd</td>
</tr>
</tbody>
</table>
In my _Layout page, I want to apply the contextMenu event to the th elements, however, being a beginner, I'm having a hard time figuring the selector for the same.
Some combinations that I've tried -
I have a reference to my table in a variable called oTable
oTable.$('tr th').contextMenu ....
oTable.$('thead tr th').contextMenu ....
$('table.tableID th').contextMenu ....
None of them are working. Any suggestions?
If you simply want to select ALL of your th elements then you don't need anything more complicated than this:
$('th').contextMenu ....
If your table has an id associated to it then the following will allow you to target just that table:
$('#yourid th')