I use the excellent "footable" plugin. I can sort the table by clicking on the header, but how to tell to "footable" : sort this table with this column just after the page is loaded ?
I tried with this keyword : data-sort-initial, without success :
<thead>
<tr>
<th data-type="html" data-sort-use="text" data-sort-initial="ascending">Code</th>
<th>Libellé</th>
</tr>
</thead>
My goal is to have this table just after the loading :
With the "sorted icon" displayed in the header. How to do that ?
my js is simple :
$(function () {
$('.footable').footable();
});
Thanks for your ideas. Merci
dominique
Found the answer.
<th data-type="html" data-sort-use="text" data-sorted="true" data-direction="ASC">Code</th>
you must add to the column the tag: data-sorted="true"
like this:
<th data-type="html" data-sort-use="text" data-sort-initial="ascending" data-sorted="true">Code</th>
Related
How do I create a table using flutter pdf like this
please help me
I am using Table.fromTextArray() function but I can't cut one column or row
you can make table with markdown package
Markdown(
data: '<table>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
</table>'
)
I think using MD is the easier method
I am trying to get my script to click on a button called Enter Response located in the same row as a specific text (SID). I am able to locate both separately but can't seem to make both work at the same time.
The table is dynamic so I am using the SID, finding it's row and then want to click on it's response button. I.E. find text '123456' & click on 'Enter Response' found in the same row.
I tried this but am getting an error locator not found:
//tr/td/a[#class='title-abbr' and text()='123456']/following-sibling::td/a[text()='Enter Response']
Table Row Headers:
Title/Source/Source ID/SID/Create Date/(Enter Response button)/Form Type
<tr>
<td class="t-Report-cell" headers="TITLE_ABBR">this is my title</td>
<td class="t-Report-cell" headers="SOURCE_NAME">source1</td>
<td class="t-Report-cell" headers="SOURCE_NUMBER">142417</td>
<td style="background-color: rgb(13, 13, 13);" class="t-Report-cell" headers="SID_ABBR">
123456
</td>
<td class="t-Report-cell" headers="TRANSACTION_DATE">07/28/2016</td>
<td style="background-color: rgb(13, 13, 13);" class="t-Report-cell" headers="LINK" align="center">
<a style="background-color: rgb(0, 255, 255);" class="response-btn" href="f?p=58117:50:27077013481519::NO::P50_TRIGGER_ID:321860">Enter Response</a>
</td>
<td class="t-Report-cell" headers="FORM_TYPE">Questions</td>
</tr>
Any help would be greatly appreciated!
if I am looking right, you should first get to the parent node before trying to get to the next sibling....because "a" element has no sibling, so basically something like that:
//tr/td/a[#class='title-abbr' and text()='123456']/../following-sibling::td/a[text()='Enter Response']
You could also just use following-sibling::td[2] instead of selecting by text in the second part of xpath, but maybe you need it for some reason.
Btw some tips:
If the element could have multiple style classes, you will have to use contains
The same applies to text, beware of spaces etc. you should trim the text or use contains to avoid wrong selectors
In my application,I've to select the last td (which is an img) in table.Can anyone help me with this ?
HTML
<table>
<tbody>
<tr>
<td>
<td>
<a onclick="return confirm('Delete creative?')" href="delete.page?cid=47">
<a href="edit.page?id=47"><a href="?duplicateId=47">
<img title="Duplicate" src="/tracker/images/skin2/bolean.png">
</a>
</td>
</tr>
</tbody>
</table>
Implemenetd as below :
#browser.img(:src => "/tracker/images/skin2/bolean.png").click
#browser.img(:src => "/tracker/images/skin2/bolean.png").last.click
which is clicking on the first image.
When you do:
#browser.img(:src => "/tracker/images/skin2/bolean.png")
This returns the first matching element.
If you want to get all of the matching elements, you need to pluralize the method:
#browser.imgs(:src => "/tracker/images/skin2/bolean.png")
You will then get a collection of all images that have the specified src. You can then get the last one and click it similar to how Željko did it for tds.
#browser.imgs(:src => "/tracker/images/skin2/bolean.png").last.click
Try this:
#browser.tds.last.click
I'm trying to dynamically update a HTML table via Comet. I've got something like the following:
class EventsComet extends CometClient[Event] {
def server = Event
def render = {
println("Binding on: " + defaultHtml)
data.flatMap( event =>
bind("event", "name" -> event.name.toString, "date" -> event.startDate.toString)
)
}
}
And:
<lift:comet type = "EventsComet">
<table>
<thead>
<tr>
<th>Name</th>
<th>Date</th>
</tr>
</thead>
<tbody>
<tr>
<td><event:name />Test Name</td>
<td><event:date />Oct. 25, 2012</td>
</tr>
</tbody>
</table>
</lift:comet>
This prints out the entire table over and over again, one for each event rendered by EventsComet. The println statement outputs the entire table node.
So I tried variations:
<table>
<thead>
<tr>
<th>Race</th>
<th>Track</th>
<th>Date</th>
</tr>
</thead>
<tbody>
<lift:comet type = "EventsComet">
<tr>
<td><event:name />Test Name</td>
<td><event:date />Oct. 25, 2012</td>
</tr>
</lift:comet>
</tbody>
</table>
As expected, the HTML5 parser strips out the [lift:comet] tags and no binding occurs.
So I tried switching the rows to:
<tr lift:comet = "EventsComet">
<td><event:name />Test Name</td>
<td><event:date />Oct. 25, 2012</td>
</tr>
...as is shown in a snippet example here, but with this syntax my CometClient is not being instantiated at all.
Can anyone advise on the proper syntax?
EventsComet itself works fine; it can keep lists of events up to date without problem. I only run into issue using tables (and presumably other highly-nested structures I've not tried yet?).
Thank you. This is all rather frustrating for such a simple problem, and makes me want to just start implementing my templates in a strongly-typed templating language instead of using bindings.
The proper syntax seems to be:
<tr class="lift:comet?type=EventsComet">
<td><event:name />Test Name</td>
<td><event:date />Oct. 25, 2012</td>
</tr>
From this thread:
https://groups.google.com/forum/?fromgroups=#!topic/liftweb/NUDU1_7PwmM
Sometimes I'm getting duplicate rows (inserted above the table header at that), but I'd imagine this is related to my comet actor itself.
I have a HTML Table which in which i want to manipulate using JQuery
Table:
<tr><td>----Parent One
<Table id="ChildID" >----Child One
First TR1<TR>
<TD><div class=ExternalClass00FA6D5A488C4B2582667D6D8DF15F79>Value 1</div></TD>
<TD class="ms-disc-bordered-noleft">Value 2</TD>
<TD class="ms-disc-bordered-noleft">Value 3</TD>
<TD class="ms-disc-bordered-noleft">
Value 4
</TD></TR>
..........
Second TR2<TR>
<TD><div class=ExternalClass00FA6D5A488C4B2582667D6D8DF15F79>Value 1</div></TD>
<TD class="ms-disc-bordered-noleft">Value 2</TD>
<TD class="ms-disc-bordered-noleft">Value 3</TD>
<TD class="ms-disc-bordered-noleft">
Value 4
</TD></TR>
........and so on
</TABLE>---Child One
</td></tr></TABLE>---Parent One
i am trying to pick "Value 4" the last having string "FolderCTID" in href and insertBefore "Value 1" with div class that starts with "ExternalClass".
I want to insertBefore the each element in the row to the corresponding element in the same row
I am using following code:
$('a[href*="FolderCTID"]').insertBefore($('div[class^="ExternalClass"]'));
But it is inserting all the elements for every row....i think i should make something to specify the entities and loop around** each end of the entity...
Please help me on this
then you may want this,
try this , and let me know,
$('a[href*="FolderCTID"]').each(
function(){
$(this).parents('tr').find('div[class^="ExternalClass"]').before(this);
}
);
$('a[href*="FolderCTID"]').each(
function(){
$(this).siblings(':first').insertBefore(this);
}
)
may this help.