how to import jquery.tablesorter.js in veolicty template of jira plugin

I am trying to sort table based on column header using tablesorter jquery plugin(i.e jquery.tablesorter.js). I have web-resource for jquery.tablesorter.js in the plugin descriptor file and I am using webResourceManager.requireResource() with proper web resource key to import the resource in my velocity template. In my velocity template I am using $("#reportfields").tablesorter(); to sort tables where my table id is reportfields. still I am not getting srting functionality to this table.

3 answers

1 accepted

I've tried it and it worked. See example below:

atlassian-plugin.xml

<web-resource key="example-resources" name="Web Resources">
    <dependency>com.atlassian.auiplugin:ajs</dependency>
    <resource type="download" name="jquery.tablesorter.min.js" location="/js/jquery.tablesorter.min.js"/>
    <context>example</context>
  </web-resource>

velocity page - example.vm

<html>
	<head>
		$webResourceManager.requireResource("com.exmaple.plugin:example-resources")
		<script type="text/javascript">
			var $ = AJS.$; 
			$(document).ready(function() { 
					$("#myTable").tablesorter(); 
					$("#myTable").tablesorter( {sortList: [[0,0], [1,0]]} ); 
				} 
			); 
    
		</script>	
	</head>
	<body>
		<div>
			<table id="myTable" class="tablesorter"> 
			<thead> 
			<tr> 
				<th>Last Name</th> 
				<th>First Name</th> 
				<th>Email</th> 
				<th>Due</th> 
				<th>Web Site</th> 
			</tr> 
			</thead> 
			<tbody> 
			<tr> 
				<td>Smith</td> 
				<td>John</td> 
				<td>jsmith@gmail.com</td> 
				<td>$50.00</td> 
				<td>http://www.jsmith.com</td> 
			</tr> 
			<tr> 
				<td>Bach</td> 
				<td>Frank</td> 
				<td>fbach@yahoo.com</td> 
				<td>$50.00</td> 
				<td>http://www.frank.com</td> 
			</tr> 
			<tr> 
				<td>Doe</td> 
				<td>Jason</td> 
				<td>jdoe@hotmail.com</td> 
				<td>$100.00</td> 
				<td>http://www.jdoe.com</td> 
			</tr> 
			<tr> 
				<td>Conway</td> 
				<td>Tim</td> 
				<td>tconway@earthlink.net</td> 
				<td>$50.00</td> 
				<td>http://www.timconway.com</td> 
			</tr> 
			</tbody> 
			</table> 
	        </div>      	        
	</body>
</html>

Note that you should not include another copy of jQuery in the file, but use the one from AUI.

Boris, Thanks for your reply. it worked.
But it created one more problem with context.
I am displaying JIRA deafult header toolbar by using follwing in my velocity template

<meta name='decorator' content='atl.general'/>.

But its not functioning properly whenever I use Jquery-tablesorter web resource in my velocity template.
so far I have not used ant conetxt in my Jquery-tablesorter web resource.

Here're a couple of suggestions:

  1. Are you getting any errors in the browser script console log ?
  2. I think that by default the "$" alias is not mapped to jquery,so try one of the approaches below:
AJS.$("#reportfields").tablesorter()

or

$= AJS.$;
$("#reportfields").tablesorter();

Hey Boris,
I tried your suggestions, but still I am not able to sort my table. Following is my updated script.

<script type="text/javascript">
$(document).ready(function(){
AJS.$("#tp").html("This is Hello World by JQuery");
AJS.$("#reportfields").tablesorter();
});
</script>

My browser script console logs showing following errors:

Error: TypeError: F(...).on is not a function
Error: TypeError: jQuery.namespace is not a function
Error: TypeError: JIRA.Forms is undefined
Error: TypeError: jQuery.aop is undefined

It's AJS.$(document).ready

Renjith,

AJS.$(document).ready doesnt work.
I used
<script type="text/javascript">
$(document).ready(function(){
AJS.$("#tp").html("This is Hello World by JQuery");
AJS.$("#reportfields").tablesorter();
});
</script> and it worked.
But whenever i replace $(document).ready(function() with AJS.$(document).ready, it doesnt work

What about the second suggestion?

Suggest an answer

Log in or Sign up to answer
Atlassian Community Anniversary

Happy Anniversary, Atlassian Community!

This community is celebrating its one-year anniversary and Atlassian co-founder Mike Cannon-Brookes has all the feels.

Read more
Community showcase
Bridget Sauer
Published Thursday in Marketplace Apps

Calling all developers––You're invited to Atlas Camp 2018

 Atlas Camp   is our developer event which will take place in Barcelona, Spain  from the 6th -7th of   September . This is a great opportunity to meet other developers and get n...

78 views 0 5
Read article

Atlassian User Groups

Connect with like-minded Atlassian users at free events near you!

Find a group

Connect with like-minded Atlassian users at free events near you!

Find my local user group

Unfortunately there are no AUG chapters near you at the moment.

Start an AUG

You're one step closer to meeting fellow Atlassian users at your local meet up. Learn more about AUGs

Groups near you