Sorting PageBlock Table using jQuery table sorter

Salesforce provide functionality of sorting list view and enhanced list view but if we need to add any custom button or do any other custom functionality then we need to create our own list view, i get similar kind of requirement from my client where my client want some custom functionality in list view so need to create a custom list view with sorting functionality , in this post my whole emphasis will be on how to create sortable pageblock table, to meet this specification i did take help from Google and find that we can make sortable pageblock table using jQuery table sorter,So let see how to do .

Sort-able pageblock table using jQuery table sorter

I will not go in much detail on how to use pageblock table if you are reading this post i suppose you know that , so lets see how to add sorting functionality see my visualforce page below.

We need to include jQuery in our code so in my visualforce page at 3rd line i included one jQuery script and at 6th line i include the CSS file and from line 8th to 26th line there is one more script and in that script at 11th line we have to refer pageblock id , see below code

$j("[id$=sort]")

As you can see above here sort is the ID of the pageblock table so when you scroll down the code you will find that pageblock table have ‘sort’ as ID so change ‘sort’ with your pageblock ID , now after we need to include table sorter script as i added that script from 57 to 61 line , you can get the script from the below code as well by opening the link in a new page.

That’s it all steps have been covered there are many additional functionality available for this script like you can also disable the sorting for the first column for that you need add few more lines in your script and this functionality added in lines 11 to 23 in my code which disable the first header. You can take a look of the demo from the below button.

This is done using table sorter jQuery script there are many more functionality available you can play with it to learn more about the script functionality take a look at the below link.

i hope you like my this post if you have any query related to this you can do comment below in the comment section and don’t forget to subscribe to my blog and social networking pages and you can also look at my other post related to salesforce from below.