I'm building a mobile real estate website for my wife's business using Tablesorter to sort by price. It works fine for 6 digit numbers (including $s and commas), e.g. $600,000. However it fails when confronting a 7 digit number, e.g. $1,295,000.
In my
<script type="text/javascript" id="js">$(document).ready(function() {
$("table").tablesorter({
// sort on the second column, order asc
sortList: [[1,0]],
headers: {
1: { sorter: 'digit' } // column number, type
}
});
});
<table cellspacing="2" class="tablesorter { 0: { sorter: false}, 1: {sorter: true} }">
<thead>
<tr>
<th width="158" class="headerempty">Property</th>
<th width="130" class="{'sorter':'currency'}">Sort by Price</th>
</tr>
</thead>
<tbody>
<tr class="odd">
<td><img src="../sales/29 Laurel Way/prepped_images/29lw-for_mobile.jpg" title="Tap for Details" alt="29 Laurel Way" width="150" height="100" border="0"></td>
<td class="{'sorter':'currency'}">$329,000</td>
</tr>
<tr class="odd">
<td><img src="../sales/Aetna Lane/al_for_Mobile.jpg" width="150" height="100"></td>
<td class="{'sorter':'currency'}">$175,000</td>
</tr>
<tr class="odd">
<td><img src="../sales/Atop Smith Hill/prepped/ash_mobile.jpg" width="150" height="100"></td>
<td class="{'sorter':'currency'}">$1,295,000</td>
</tr>
<tr class="odd">
<td><img src="../sales/Beech Hill/bh_mobile.jpg" width="150" height="100"></td>
<td class="{'sorter':'currency'}">$595,000</td>
</tr>
<tr class="odd">
<td class="{'sorter':'currency'}"><img src="../sales/Bluefield/b_mobile.jpg" width="150" height="100"></td>
<td>$299,000</td>
</tr>
</tbody>
</table>
Any thoughts on solving this one? Many thanks in advance, clpix
Constructions like td class="{'sorter':'currency'}" make me scary. You probaly should define table with class sortable and init table sorted in JS using this class, and define sorting parameters in constructor:
$(".sortable").tablesorter({
// sort on the second column, order asc
sortList: [[1,0]],
headers: {
1: { sorter: 'currency' } // column number, type
}
});
<table class='sortable'>
<tr>
<td>$1.000.000</td>
</tr>
......
</table>
And check out delimeter . or ,
This code work fine.
Related
I am new to Thymeleaf and trying to create a dynamic table on Themeleaf template.
How can I do it..??
I have been googling by I didn't got any proper answer. The issue is I cannot iterate List< Map< String,Object >>. I can have any number of columns and columns name could be any thing.
<tr class="headings">
<th class="column-title">ID</th>
<th class="column-title">Name</th>
<th class="column-title">Salary</th>
<th class="column-title">Status</th>
</tr>
</thead>
<tbody>
<tr class="even pointer" th:each="row:${rows}" id = "tablerow">
<td class=" " th:text="${row.getId()}">Id</td>
<td class=" " th:text="${row.getName()}">Name</td>
<td class=" " th:utext="${row.getSalary()}">Salary</td>
<td class=" " th:text="${row.getStatus()}">Active</td>
</tr>
</tbody>
I need to set values dynamically since if query of result will keep changing . right now column name are hard coded and value are also getting by row.getId what if there is no Id, it could be anything in rows what shall I use than..? example row.<>.
rows is obtained as List< Map< String, Object>>.
Thanks in advance.
You can iterative over a Map just as easily as you can a List. The simplest form of this would be:
<tbody>
<tr class="even pointer" th:each="row: ${rows}" id="tablerow">
<td th:each="field: ${row}" th:text="${field.value}" />
</tr>
</tbody>
However, since Maps don't have a specific ordering (unless you're using something like a TreeMap), the way I would do it would be something like this (complete example should match your example table):
Controller
List<String> headers = Arrays.asList("ID", "Name", "Salary", "Status");
List<Map<String, Object>> rows = new ArrayList<>();
rows.add(Map.of("ID", "1", "Name", "Jim", "Salary", "50000", "Status", "active"));
rows.add(Map.of("ID", "2", "Name", "Sally", "Salary", "50000", "Status", "inactive"));
Template
<table>
<thead>
<tr class="headings">
<th th:each="header: ${headers}" class="column-title" th:text="${header}" />
</tr>
</thead>
<tbody>
<tr class="even pointer" th:each="row: ${rows}" id="tablerow">
<td th:each="header: ${headers}" th:text="${row.get(header)}" />
</tr>
</tbody>
</table>
Which will produce:
<table>
<thead>
<tr class="headings">
<th class="column-title" >ID</th>
<th class="column-title" >Name</th>
<th class="column-title" >Salary</th>
<th class="column-title" >Status</th>
</tr>
</thead>
<tbody>
<tr class="even pointer" id="tablerow">
<td >1</td>
<td >Jim</td>
<td >50000</td>
<td >active</td>
</tr>
<tr class="even pointer" id="tablerow">
<td >2</td>
<td >Sally</td>
<td >50000</td>
<td >inactive</td>
</tr>
</tbody>
</table>
Is there any logical way to change the background colour for a table cell in a repeatable region in mailchimp? Here is my code, I don't see any options in mailchimp with the custom template build.
<table width="100%" cellspacing="20" mc:repeatable="product" mc:variant="content1">
<tbody>
<tr>
<td align="center" bgcolor="#ff0000" valign="middle" mc:edit="playlist"><h2>Playlist</h2>
<h3>Check out this playlist!</h3>
<h4>FOLLOW</h4></td>
</tr>
</tbody>
</table>
I came across a similar issue today. Here's a possible solution:
<table width="100%" cellspacing="20" mc:repeatable="product" mc:variant="red">
<tbody>
<tr>
<td align="center" bgcolor="#ff0000" valign="middle" mc:edit="playlist">
<h2>Playlist</h2>
<h3>Check out this playlist!</h3>
<h4>FOLLOW</h4>
</td>
</tr>
</tbody>
</table>
<table width="100%" cellspacing="20" mc:repeatable="product" mc:variant="green">
<tbody>
<tr>
<td align="center" bgcolor="#00ff00" valign="middle" mc:edit="playlist">
<h2>Playlist</h2>
<h3>Check out this playlist!</h3>
<h4>FOLLOW</h4>
</td>
</tr>
</tbody>
</table>
<table width="100%" cellspacing="20" mc:repeatable="product" mc:variant="blue">
<tbody>
<tr>
<td align="center" bgcolor="#0000ff" valign="middle" mc:edit="playlist">
<h2>Playlist</h2>
<h3>Check out this playlist!</h3>
<h4>FOLLOW</h4>
</td>
</tr>
</tbody>
</table>
When you've imported this into your template, create a campaign and on the design page you'll have a dropdown with the different colour options. Make any h2s, h3s etc editable by adding mc:edit.
I have a feed that outputs HTML. The following segment is part of the output
<div class="leftnav">
<table border="0" cols="2">
<tr>
<td colspan="2" class="topline"><span style="font-size: 1px"> </span></td>
</tr>
<tr>
<td colspan="2"><span class="bold">Article Cat1 </span></td>
</tr>
<tr>
<td class="date" colspan="2">
ArticleTitle1</td>
</tr>
<tr>
<td width="20"></td>
<td class="date">
ArticleLink1
</td>
</tr>
<tr>
<td colspan="2" class="topline"><span style="font-size: 1px"> </span></td>
</tr>
<tr>
<td colspan="2"><span class="bold">Article Cat2 </span></td>
</tr>
<tr>
<td class="date" colspan="2">
ArticleTitle2</td>
</tr>
<tr>
<td width="20"></td>
<td class="date">
ArticleLink2
</td>
</tr>
</table>
</div>
I want to process above segment using XPATH so that output looks like this
Article Cat1
ArticleTitle1
ArticleLink1 Article Cat2
ArticleTitle2
ArticleLink2
What is the optimal XPATH that will produce the desired output? I tried //div[#class="leftnav"]/table/tr but this gives all the TR elements. I want to skip the first TR element so that I can get the output in the format I described above.
//div[#class="leftnav"]/table/tr[position() > 1]
Try the above
Stupid simple way:
substring-after(normalize-space(string(//*:div)), normalize-space(string(//*:div/*:table/*[1])))
Result: "Article Cat1 ArticleTitle1 ArticleLink1 nbsp Article Cat2 ArticleTitle2 ArticleLink2"
I don't know why, but (position() > 1) doesn't work in my environment, so I've used strings instead.
I am looking for a very simple data grid plugin for jquery that will allow me to do the following
populate it
order columns a->z and z->a
add rows on the client
I am using asp.net mvc on the server side.
DataTables is pretty straightforward and easily configurable:
http://datatables.net/
Their examples page lists a number of ready to go implementations.
I've been working with jquery.tablesorter. API is pretty clear; you can override the sorting function to provide custom sorting. In this example, notice that i have a grouping header as well, for which I can disable sorting.
<div style="width: 1024px; overflow: scroll">
<table id="myTable" class="tablesorter">
<thead>
<tr>
<th colspan="2">Skill</th>
<th colspan="2">Resource</th>
<th colspan="2">Project</th>
<th>Role</th>
</tr>
<tr>
<th>Skill</th>
<th>Complexity</th>
<th>Bill</th>
<th>Joe</th>
<th>Project 1</th>
<th>Project 2</th>
<th>Role 1</th>
</tr>
</thead>
<tbody>
<tr>
<td>.Net</td>
<td>2</td>
<td>1</td>
<td>3</td>
<td>4</td>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td>UX</td>
<td>3</td>
<td>1</td>
<td>2</td>
<td>1</td>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td>WCF</td>
<td>3</td>
<td>4</td>
<td>1</td>
<td>3</td>
<td>2</td>
<td>2</td>
</tr>
</tbody>
</table>
(function ($) {
$(document).ready(function () {
$("#myTable").tablesorter({
headers: {
0: { sorter: false },
1: { sorter: false },
2: { sorter: false },
3: { sorter: false }
}
});
});
})(jQuery);
jqGrid is probably the best grid plugin out there, it should do all you need above, and provide ample room for growth down the road if needed.
http://www.trirand.com/blog/
jsGrid is a really lightweight and customizable jQuery grid plugin http://js-grid.com/
I using datatable plugin (datatables.net) with code below
How can i click anywhere in datatable to get image id
<table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
<thead>
<tr>
<th></th>
<th>Rendering engine</th>
<th>Browser</th>
<th>Platform(s)</th>
<th>Engine version</th>
<th>CSS grade</th>
</tr>
</thead>
<tbody>
<tr class="gradeX">
<td><img id='1' href='#' src='Images/details_open.png'/></td>
<td>Trident</td>
<td>Internet Explorer 4.0</td>
<td>Win 95+</td>
<td class="center">4</td>
<td class="center">X</td>
</tr>
<tr class="gradeC">
<td><td><img id='2' href='#' src='Images/details_open.png'/></td></td>
<td>Trident</td>
<td>Internet Explorer 5.0</td>
<td>Win 95+</td>
<td class="center">5</td>
<td class="center">C</td>
</tr>
</tbody>
</table>
Thanks very much
I use another way to resolve this problem :
I set hiden colum and use function :fnGetData to get id from this hiden row.