I'm using dataTables with MomentJS to sort a table with dates.
This sorts/works fine:
<table id="testTable" class="table table-bordered">
<thead>
<tr>
<th class="all">Title</th>
<th class="tablet-p tablet-l desktop text-center">Category</th>
<th class="tablet-p tablet-l desktop text-center">Date</th>
</tr>
</thead>
<!-- TABLE BODY -->
<tbody>
<tr>
<td ><a href='#' >Test 1</a></td>
<td class="text-center" align="center" >2</td>
<td class="text-center" align="center" >01 Oct 2020</td>
</tr>
<tr>
<td ><a href='#' >Test 2</a></td>
<td class="text-center" align="center" >8</td>
<td class="text-center" align="center" >01 Apr 2020</td>
</tr>
<tr>
<td ><a href='#' >Test 2</a></td>
<td class="text-center" align="center" >2</td>
<td class="text-center" align="center" >10 Sep 2020</td>
</tr>
<tr>
<td ><a href='#' >Test 1</a></td>
<td class="text-center" align="center" >2</td>
<td class="text-center" align="center" >20 Aug 2020</td>
</tr>
<tr>
<td ><a href='#' >Test 5</a></td>
<td class="text-center" align="center" >2</td>
<td class="text-center" align="center" >12 Dec 2020</td>
</tr>
</tbody>
</table>
but I would like to sort on this date:
<td class="text-center" align="center" >01 - 12 Oct 2020</td>
Ideally I would like to use something like this so the data is only sorted on the second part of the date:
$.fn.dataTable.moment('[%wildcard% -] DD MMM YYYY');
$('#testTable').DataTable();
Is this possible or is there a different solution?
I've found a solution - I used php to create a time stamp from the last part of the date and add it to a data attribute to sort on that instead:
<td class="text-center" align="center" data-sort="1602460800">01 - 12 Oct 2020</td>
Related
I am in the process of making a custom html template but cannot wok out how to make interior padding on a column (the ones with the 'call to action' button)
I have been trying to insert a small td with a width before the content but it breaks the column.
The code I have is below (apologies for the volume) but I can't work out exactly where to cut it back without breaking it.
<table width="650" style="background-color: #077ec3" border="0" cellspacing="0" cellpadding="0" align="center" class="wrapper" mc:repeatable mc:variant="2 Column With IMAGE + TITLE + DESC + READ MORE" style="table-layout:fixed;">
<tr>
<td height="15" class="fix_height"> </td>
</tr>
<tr>
<td class="pad_side" >
<table width="310" border="0" cellspacing="0" cellpadding="0" align="left" class="wrapper">
<tr>
<td align="center" valign="top">
<table width="310" border="0" cellspacing="0" cellpadding="0" align="center" class="wrapper">
<tr>
<td width="45" class="hide"> </td>
<td valign="top">
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td align="center" valign="top"><img src="https://gallery.mailchimp.com/330985abb260e1ae49eb607dd/images/a3bb236f-8b0a-4003-93de-6f40d964612c.jpg" width="265" height="130" alt="img_265X130" style="display:block;border:none; max-width:265px;" mc:edit="product1_img">
</td>
</tr>
<tr>
<td height="25" class="fix_height" style="background-color: #ffffff;"> </td>
</tr>
<tr style="background-color: #ffffff">
<td class="black" align="left" valign="top" style="font-family:Arial, sans-serif;font-size:18px;line-height:24px;color:#333333;" mc:edit="product1_title">Blog Post</td>
</tr>
<tr>
<td height="8" style="line-height:1px;font-size:1px; background-color: #ffffff;"> </td>
</tr>
<tr>
<td class="grey" align="left" valign="top" style="font-family:Arial, sans-serif;background-color: #ffffff;font-size:13px;line-height:20px;color:#333333;" mc:edit="product1_description">Text block 1</td>
</tr>
<tr>
<td height="15" style="line-height:1px;font-size:1px; background-color: #ffffff"> </td>
</tr>
<tr mc:hideable>
<td height="43" style="background-color: #ffffff" valign="top">
<table border="0" align="left" cellpadding="0" cellspacing="0" class="wrapper">
<tr>
<td>
<table border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td height="43" class="button_2" align="center" style="background-color:#ffffff; font-family:Arial, sans-serif;font-size:16px;line-height:18px;color:#ffffff;border-radius:3px;" bgcolor="#ffffff" mc:edit="btn_10">
Call to action
</td>
</tr>
<tr>
<td height="25" style="line-height:1px;font-size:1px; background-color: #ffffff"> </td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="40" style="line-height:1px;font-size:1px;" class="hide"> </td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table width="310" border="0" cellspacing="0" cellpadding="0" align="right" class="wrapper">
<tr>
<td align="center" valign="top">
<table width="310" border="0" cellspacing="0" cellpadding="0" align="center" class="wrapper">
<tr>
<td align="left" valign="top">
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td align="center" valign="top" class="pad_top"><img src="https://gallery.mailchimp.com/330985abb260e1ae49eb607dd/images/a3bb236f-8b0a-4003-93de-6f40d964612c.jpg" width="265" height="130" alt="img_265X130" style="display:block;border:none; max-width:265px;" mc:edit="product2_img">
</td>
</tr>
<tr>
<td height="25" class="fix_height" style="background-color: #ffffff;"> </td>
</tr>
<tr>
<td class="black" align="left" valign="top" style="font-family:Arial, sans-serif;font-size:18px;line-height:24px;color:#333333;background-color: white;" mc:edit="product2_title">Blog Post 2</td>
</tr>
<tr style="background-color: white;">
<td height="8" style="line-height:1px;font-size:1px;" > </td>
</tr>
<tr>
<td class="grey" align="left" valign="top" style="font-family:Arial, sans-serif;font-size:13px;line-height:20px;color:#333333;background-color:#ffffff;" mc:edit="product2_description">Text block 2</td>
</tr>
<tr style="background-color: white;">
<td height="15" style="line-height:1px;font-size:1px;"> </td>
</tr>
<tr mc:hideable>
<td height="43" style="background-color: #ffffff" valign="top">
<table border="0" align="left" cellpadding="0" cellspacing="0" class="wrapper">
<tr>
<td>
<table border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td height="43" class="button_2" align="center" style="background-color:#ffffff; font-family:Arial, sans-serif;font-size:16px;line-height:18px;color:#ffffff;border-radius:3px;" bgcolor="#ffffff" mc:edit="btn_10">
Call to action
</td>
</tr>
<tr>
<td height="25" style="line-height:1px;font-size:1px; background-color: #ffffff"> </td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td width="45" class="hide"> </td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
Add padding-left to the td elements containing the text and CTA you want space.
Padding is well supported, so will work fine.
the following code is a table, i tried to make it responsive with bootstrap 3,
i added class="table" to table tag, but it didnt work.
what should i do? what is wrong?
<div class="tab3_main" id="cs1">
<table width="770" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<th height="50" colspan="3" align="left" scope="col">Camera</th>
</tr>
<tr> </tr>
<tr>
<td width="135" align="left" class="td">Image Sensor:</td>
<td width="15" align="left" class="td1">|</td>
<td align="left" class="td2">1/3" Progressive Scan CMOS</td>
</tr>
<tr> </tr>
<tr>
<td width="135" align="left" class="td">Min. Illumination:</td>
<td width="15" align="left" class="td1">|</td>
<td align="left" class="td2">0.01Lux #(F1.2,AGC ON), 0.028Lux #(F2.0,AGC ON), 0 Lux with IR</td>
</tr>
<tr> </tr>
<tr>
<td width="135" align="left" class="td">Shutter time:</td>
<td width="15" align="left" class="td1">|</td>
<td align="left" class="td2">1/3 s ~ 1/10,000 s</td>
</tr>
<tr> </tr>
<tr>
<td width="135" align="left" class="td">Slow shutter:</td>
<td width="15" align="left" class="td1">|</td>
<td align="left" class="td2">Support</td>
</tr>
<tr> </tr>
</tbody>
</table>
You should wrap your ".table" in ".table-responsive"
<div class="table-responsive">
<table class="table">
...
</table>
</div>
to make a table responsive in bootstrap 3.
<td class="data-display-field" width="20%" valign="top">
<table class="printtotal" cellspacing="0" cellpadding="0" width="100%" ><tbody>
<tr class="list-row">
<td class="data-display-field" width="60%" style="font-weight: bold" align="center" colspan="2">Order Totals</td>
</tr>
<tr class="list-row">
<td class="data-display-field" width="60%" align="right" >Items total:</td>
<td class="data-display-field" width="40%" align="right" >
£323.36</td>
</tr>
<tr class="list-row">
<td class="data-display-field" width="60%" align="right" >Delivery total:</td>
<td class="data-display-field" width="40%" align="right" >
£7.00</td>
</tr>
<tr class="list-row">
<td class="data-display-field" style="color: #CC0000" width="60%" align="right" >Refund(s) total:</td>
<td class="data-display-field" style="color: #CC0000" width="40%" align="right" >(
£330.36)</td>
</tr>
How would I be able to make my web browser in VB select the money amount after "Refund(s) total:", I don't know how to do it as they all have the same class
you may use a unique id for elements like
<td id="id001"></td>
and with jquery you nay select id like this
$('#id001')
any reason that you are not using id?
I am attempting to pull a value and a header (string) from a website, but unable to find the element using selenium.
My Code
I used Firebug to get the XPath and this is what it determined:
//*[#id="DimensionForm"]/p[1]/table/tbody/tr[3]/td[3]
Code
Dim Right as double
Dim Marker as string
Marker = selenium.findElementByXPath("//*[#id="DimensionForm"]/p[1]/table/tbody/tr[2]/td[3]").getAttribute("value")
Right = selenium.findElementByXPath("//*[#id="DimensionForm"]/p[1]/table/tbody/tr[3]/td[3]").getAttribute("value")
HTML CODE
<form id="DimensionForm" name="validate" action="Dimension" method="post">
<div style="margin-top: 7px"></div>
<p><table width="100%" cellspacing="0" border="0" cellpadding="0" class="element">
<tr>
<td> </td><td class="formtitlenobg" colspan="6" align='right'>
AREA DIMENSIONS (AREA A) <span class='quote'> Front</span> 25.24</td>
</tr>
<tr align="right">
<td class="tablerowlightgreen" width=10> </td>
<th class="formtitle" width=250 align="left">Property</th>
<th class="formtitle" width=50>Check</th> <th class="formtitle" width=75>Front</th>
<th class="formtitle" width=75>Center</th><th class="formtitle" width=75>Left</th>
<th class="formtitle" width=120>Right</th>
<th class="formtitle" width=100>Total</th>
<td class="tablerow" width=50> </td>
<td class="tablerow"> </td>
</tr>
<tr align="right" nowrap>
<td> </td>
<td class="table" align="left"><strong>
Property O</strong></td>
<td class="table">+</td>
<td class="table">10</td>
<td class="table">12</td>
<td class="table"><strong>12</strong></td>
<td class="table"><strong><font class="front">
100</font></strong></td>
<td class="table">120</td>
<td> </td>
<td> </td>
</tr>
</table></td>
</tr></table>
You have incorrectly nested quotes:
selenium.findElementByXPath("//*[#id="DimensionForm"]/p[1]/table/tbody/tr[2]/td[3]")
Perhaps you meant:
selenium.findElementByXPath("//*[#id='DimensionForm']/p[1]/table//tr[2]/td[3]")
Note the single-quotes in the second line!
i am writing a selenium java code and at a particular webpage i want to select a link from a
group of links where each link has an emebeded text within a table. How can i select particular
link at this situtation. for eg.
run title--text 1
run title--text 2
run title--text 3
how can select specific run link for a specific title text? the text is not a label rather it is
just simple text on the webpage.
i am using the following code:
verify.text("text 1");
it will only verify the presence of text ut it wont go towarads the link as linkof every execution is named RUN. so it will identify the corresponding run link?
The HTML code for the above is:
<HTML>
<HEAD>
<TITLE>TEST</TITLE>
</HEAD>
<BODY>
<div align="center"><table class="module" width="630">
<tr>
<th class="banner" width="70">ACTION</th>
<th class="banner" width="560">REPORT TEMPLATE</th>
</tr>
<tr>
<td class="modulenav" width="70">
<table class="innermodule" width="100%">
<tr><td class="moduleNav"><a class="listingLink"
href="www.abc.com/">Run</a></td></tr>
<tr><td class="moduleNav"><a class="listingLink"
href="www.zxc.com">UnShare</a></td></tr>
</table>
</td>
<td>
<table class="innerModule" width="100%">
<tr>
<td class="label" width="70">Title</td>
<td width="490"><span class="listingHead">Incident Performance by Priority</span></td>
</tr>
<tr>
<td class="Label" width="70">Description</td>
<td class="listing"></td>
</tr>
<tr>
<td class="Label" width="70">Owner</td>
<td class="listing"> Software Engineer Tel: </td>
</tr>
<tr>
<td class="Label" width="70">Shared With</td>
<td class="listing">
Software Engineer Tel: <br>
</td>
</tr>
<tr>
<td class="label">Report Type</td>
<td class="listing">Performance by Priority</td>
</tr>
</table>
</td>
</tr>
<tr><td class="tableRuleNavy" colspan="2"></td></tr>
<tr>
<td class="modulenav" width="70">
<table class="innermodule" width="100%">
<tr><td class="moduleNav"><a class="listingLink"
href="www.abc.com">Run</a></td></tr>
<tr><td class="moduleNav"><a class="listingLink"
href="www.cxd.com">UnShare</a></td></tr>
</table>
</td>
<td>
<table class="innerModule" width="100%">
<tr>
<td class="label" width="70">Title</td>
<td width="490"><span class="listingHead">Incident Trend Analysis Report</span></td>
</tr>
<tr>
<td class="Label" width="70">Description</td>
<td class="listing"></td>
</tr>
<tr>
<td class="Label" width="70">Owner</td>
<td class="listing">Software Engineer Tel: </td>
</tr>
<tr>
<td class="Label" width="70">Shared With</td>
<td class="listing">
Software Engineer Tel: <br>
</td>
</tr>
<tr>
<td class="label">Report Type</td>
<td class="listing">Trend Analysis</td>
</tr>
</table>
</td>
</tr>
<tr><td class="tableRuleNavy" colspan="2"></td></tr>
<tr>
<td class="modulenav" width="70">
<table class="innermodule" width="100%">
<tr><td class="moduleNav"><a class="listingLink"
href="www.sdfds.com">Run</a></td></tr>
<tr><td class="moduleNav"><a class="listingLink"
href="www.asdg.com">UnShare</a></td></tr>
</table>
</DIV>
</td>
</BODY>
</HTML>