Forums
Home Product Q&A Discussion groups Articles Ask a question Search
Learning
Events
Champions

Forums

Articles
Create
cancel
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for 
Search instead for 
Did you mean: 
Product Q&A
See all
Community resources
Top groups
Explore all groups
Community resources
Learn
Community resources
Events
Community resources

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

Sushant2
Sushant February 13, 2013

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.

Answer
Watch
Like Be the first to like this
1283 views

3 answers

1 accepted

0 votes
Answer accepted
Boris Georgiev [Appfire]
Boris Georgiev [Appfire]
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
Get recognized
February 14, 2013

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.

View More Comments
Sushant2
Sushant February 17, 2013

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.

Like
Reply
0 votes
Boris Georgiev [Appfire]
Boris Georgiev [Appfire]
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
Get recognized
February 14, 2013

What about the second suggestion?

Reply
0 votes
Boris Georgiev [Appfire]
Boris Georgiev [Appfire]
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
Get recognized
February 13, 2013

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();

View More Comments
Sushant2
Sushant February 14, 2013

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

Like
Renjith Pillai
Renjith Pillai
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
Get recognized
February 14, 2013

It's AJS.$(document).ready

Like
Sushant2
Sushant February 17, 2013

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

Like
Reply

Suggest an answer

Log in or Sign up to answer
Product apps
Apps & Integrations
TAGS
AUG Leaders

Atlassian Community Events

    See all events
    Community
    Forums
    FAQs Forums guidelines
    Learning
    About learning Resources
    Events
    Champions
    Copyright © 2025 Atlassian
    Privacy Policy Terms Security
    Welcome illustration

    Welcome to the new Atlassian Community

    Online forums and learning are now in one easy-to-use experience.

    By continuing, you accept the updated Community Terms of Use and acknowledge the Privacy Policy. Your public name, photo, and achievements may be publicly visible and available in search engines.