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">

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 Nov 6 '15 at 19:31

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.