Java 8 introduced a new Nashorn Javascript Engine to replace existing Rhino. Nashorn Javascript engine provides 2 to 10 times better performance and it directly compiles the code in memory and passes the bytecode to JVM. Nashorn JavaScript Engine enhanced version of javax.script.ScriptEngine and follows the same set of rules, permitting for Java and JavaScript interoperability.
Points to remember
Use jjs command to run Javascript through Nashhorn Engine.
The class name for the Nashorn Javascript engine is jdk.nashorn.api.scripting.NashornScriptEngine.
Below example is for sorting HTML table on ascending and descending order after click on header name. Based on sorting will display ascending and descending images.
Source Code
Copy your ascending and descending images on images folder and change path according to you project configuration.
Sort Table
var order;
function sortTable(col)
{
changeSortHeaderImage(col);
//get list of all rows of table content except header
var rows=$('#employeeTbl tbody tr').get();
rows.sort(function(a,b){
var A= $(a).children('td').eq(col).text().toUpperCase();
var B= $(b).children('td').eq(col).text().toUpperCase();
//sort in ascending order
if(order=="asc")
{
return (A <b> B) ? 1 : 0);
}
//sort in descnding order
if(order=="desc")
{
return (B <a> A) ? 1 : 0);
}
});
//iterate each row of table for changing order
$.each(rows, function(index, row) {
$('#employeeTbl').children('tbody').append(row);
});
}
//Change image for column sorting
function changeSortHeaderImage(col)
{
var imgArr= document.getElementById("employeeTbl").getElementsByTagName('input');
var altAtr;
for (i = 0; i < imgArr.length; i++) {
altAtr=imgArr[i].getAttribute("alt");
if(i==col && "asc" == altAtr)
{
imgArr[i].setAttribute("src", "images/desc.png");
imgArr[i].setAttribute("alt", "desc");
order="desc";
}
else if (i==col && ("nosort" == altAtr || "desc" == altAtr))
{
imgArr[i].setAttribute("src", "images/asc.png");
imgArr[i].setAttribute("alt", "asc");
order="asc";
}
else
{
imgArr[i].setAttribute("src", "images/nosort.png");
imgArr[i].setAttribute("alt", "nosort");
}
}
}</a></b></pre>
<table id="employeeTbl">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Age</th>
<th>Designation</th>
<th>Salary</th>
</tr>
<tr>
<td>1</td>
<td>Saurabh Gupta</td>
<td>34</td>
<td>Sr Lead</td>
<td>50000</td>
</tr>
<tr>
<td>2</td>
<td>Gaurav Gupta</td>
<td>30</td>
<td>Software Engineer</td>
<td>40000</td>
</tr>
<tr>
<td>3</td>
<td>Ranjith Kumar</td>
<td>45</td>
<td>Manager</td>
<td>60000</td>
</tr>
<tr>
<td>4</td>
<td>Sakshi Mehta</td>
<td>25</td>
<td>Trainee</td>
<td>25000</td>
</tr>
<tr>
<td>5</td>
<td>Arun Roi</td>
<td>35</td>
<td>Tester</td>
<td>28000</td>
</tr>
<tr>
<td>6</td>
<td>Nitin Verma</td>
<td>40</td>
<td>SEO</td>
<td>55000</td>
</tr>
</thead>
</table>
<pre><b><a>
Initial Table Without Soring
Initial Employee Detail Table Without Sorting
Sort in Ascending Order for Column Designation
Employee Table with Ascending Order soring for column Designation
Sort in Descending Order for column Designation
Employee Table with Desscending Order soring for column Designation
Summary
In above example. I try to cover below topics.
How to create HTML Table with column header and rows column content.
Apply JQuery and Java Script for sorting ascending and descending order on click each columns.
On click Change columns header sorting images by Java Script.
How to apply CSS on table column headers and background image.