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

This widget could not be displayed.

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.

This widget could not be displayed.

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

This widget could not be displayed.

What about the second suggestion?

Suggest an answer

Log in or Sign up to answer
Community showcase
Published Aug 22, 2018 in Marketplace Apps

How a Marketplace app tech team is achieving gender diversity

Hello! My name is Genevieve Blanch, and I'm the Marketing Manager at RefinedWiki, creators of apps to give teams the tools to customize Atlassian platforms. Currently, 44% of the tech team at Re...

510 views 3 18
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