0

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">
    <head>
        <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" />
        <script>
            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(
                        j$(this).val()
                    );
                    contactTable.column(0)
                        .search( val == 'All' ? '' : '^'+val+'$', true, false )
                        .draw();
                });
            });
        </script>
    </head>
    <body>
        <select id="accountSelect"><option value="All">All</option></select>

        <table id="contacttable" class="display">
            <thead>
                <tr>
                    <th>Account</th>
                    <th>First Name</th>
                    <th>Last Name</th>
                    <th>Phone</th>
                </tr>
            </thead>
            <tbody>
                <apex:repeat value="{!contactList}" var="contact">
                    <tr>
                        <td>{!contact.Account.Name}</td>
                        <td>{!contact.FirstName}</td>
                        <td>{!contact.LastName}</td>
                        <td>{!contact.Phone}</td>
                    </tr>
                </apex:repeat>
            </tbody>
        </table>
    </body>
</apex:page>

1 Answer 1

2

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

    function drawTables(){
        $('[id$=cnb-table]').DataTable({
            "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

1
  • 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 .