function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Abi V 4Abi V 4 

How to use jquery or javascript for tablesorting in visualforce page.

I have reffred the few links and followed the process to use the jquery tablesort plugin in visualforce page for pabeblock table sorting.
But those are not working.Please provide me inputs how to implimnet the pagination for pageblocktable from clientside and it is kind of urjency delievery.

 
Jerome RussJerome Russ
Hello. Can you provide the code you are trying to use? It would be hard to assist you further without it, especially if you have already referred to other links (links are the only help we could provide without seeing code).
VIP Condos TorontoVIP Condos Toronto
I'm working on the same issue, I have the following so far, I think jquery loaded ok, not sure about jqueryUI 
<apex:page standardController="Lead" title="Printable Worksheet" sidebar="false" showHeader="false">
<apex:sectionHeader title="Printable Workseet" printUrl="/apex/Worksheet_Page?Id={!Lead.id}" />
<apex:includeScript value="{!$Resource.JQuery}"> 

</apex:includeScript>
<apex:includeScript value="{!$Resource.JQueryUI}">
</apex:includeScript>
<head>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css" />
</head>
  <h1>Personal Details</h1>


<table id="demo">

<thead>
<tr>
<th>Applicant 1</th>
<th>Applicant 2</th>
</tr>
</thead>

<tbody>
<tr>
<td>Name: {!Lead.firstname} {!Lead.lastname}</td>
<td>Name: </td>
</tr>
<tr>
<td>Telephone: {!Lead.phone}</td>
<td>Telephone: </td>
</tr>
<tr>
<td>Position: {!Lead.title}</td>
<td>Position: </td>
</tr>
<tr>
<td>Employer: {!Lead.company}</td>
<td>Employer: </td>
</tr>
<tr>
<td>Identification: {!Lead.id}</td>
<td>Identification: </td>
</tr>
</tbody>
</table>

<script>
j$ = jQuery.noConflict();

var previousOnload = window.onload; window.onload = function() { if (previousOnload) { previousOnload(); }
function() {      
$('#demo').dragtable();   
}
}
</script>

</apex:page>

You can see I'm trying various different ways of getting the table sort to run but nothing seems to be working, earlier when I ran a "pop-up test" it seemed like jquery was working so that's the bulk of the "var previousOnload" section

Somewhere I saw that $ interferes with your code so I added the jquery noconflict function if that helps, but when I view my page I still get nothing.

In the end I'll want 1 to 3 tables that can be re-arranged or added/removed by a check box but some of that is not in here yet, the tables should drag based on the jqueryUI if I did everything correct up to here.
VIP Condos TorontoVIP Condos Toronto
So a bit more background, Resource.JQuery and Resource.JQueryUI were added to my library directly, I didn't not use any zip file or anything.  Not sure if I'm supposed to include a URL after the resource is listed as I've seen in some places (something like,'bin/file.js')