I have a VF page that creates a datatable using jQuery datatables plugin. I followed the example below. http://www.verticalcoder.com/2014/11/21/datatables-in-visualforce-part-1/ . I'm trying to create a refresh button to reload the datatable. What is the best approach for creating such a refresh button in Visualforce? Thanks!

<apex:page Controller="DataTableExampleController" readOnly="true">
        <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 contactTable = j$('[id$="contacttable"]').DataTable({
                    order: [[2, 'asc']],

                    initComplete: function() {
                        var api = this.api();
                        var select = j$('[id$=accountSelect]');
                        api.column(0).data().unique().sort().each( function ( d, j ) {
                            select.append( '<option value="'+d+'">'+d+'</option>' )
                        } );   

                j$('[id$=accountSelect]').change(function() {
                    var val = j$.fn.dataTable.util.escapeRegex(
                        .search( val == 'All' ? '' : '^'+val+'$', true, false )
        <select id="accountSelect"><option value="All">All</option></select>

        <table id="contacttable" class="display">
                    <th>First Name</th>
                    <th>Last Name</th>
                <apex:repeat value="{!contactList}" var="contact">

1 Answer 1


What I do, may or may not be best practice is to create a function that draws the table:

    function drawTables(){
            "language": {
                          "emptyTable": "No Opportunities Found",
                          "zeroRecords": "No opportunities match your filter criteria"
            "destroy" : true,
            "autoWidth" : false,
            "columnDefs": [
                            "targets": [ 7,8 ],
                            "visible": false,
                            "searchable": true
                            "width": "12%", 
                            "targets": [3,4] 
                            "width": "5%", 
                            "targets": [2,5,6] 

                    "footerCallback": totalCallBack


The KEY part is the destroy: true

Destroy any existing table matching the selector and replace with the new options

Then I have a button or actionFunction that calls that method and the rerender is set to the output panel that wraps the table(s)

On page load I also call the same function in the document ready block

  • Thanks for this. I managed to get it to work. But my refresh button works only the first time and doesn't work after that unless i do a full page refresh. Did you encounter this?
    – user988
    Commented Nov 6, 2015 at 19:31

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .