jQuery Data Tables in Visualforce Page

Here is an example of ‎jQuery Data tables using in Visualforce. It will give you the pagination and search functionality in Visualforce page. Here I’m displaying list of account records.

Apex Class:

public class SampleController{
    public List<Account> accList {get; set;}
    public SampleController(){
    accList = [SELECT Name, AccountNumber, Phone FROM Account LIMIT 10000];


Visualforce Page:

<apex:page Controller="SampleController" readOnly="true" tabStyle="Account" sidebar="false">
        <apex:includescript value="//code.jquery.com/jquery-1.11.1.min.js"/>
        <apex:includescript value="//cdn.datatables.net/1.10.4/js/jquery.dataTables.min.js"/>
        <apex:stylesheet value="//cdn.datatables.net/1.10.4/css/jquery.dataTables.css"/>
        j$ = jQuery.noConflict();
        j$(document).ready( function () {
            var accTable = j$('[id$="accTable"]').DataTable({
        <table id="accTable" class="display">
                    <th>Account Number</th>
                <apex:repeat value="{!accList}" var="acc">


  • Kiran

    why this code is not working on Communities?

  • Shahwaz Khan

    but i use this in wrapper class on chheckbox it doesnot work so what can i do ???