DataTables in Visualforce, part 2

In the last post, I showed how easy it is to turn a plain html table into a functional DataTable. In this post, I’ll show how you can build on that and and make the table even more dynamic. In this example, we’ll build a datatable that lists accounts that allows you to expand an account to see a list of contacts for the account.

First, instead of using a controller to return data for the table and build it using an <apex:repeat>, I am using Javascript Remote Objects to get 100 accounts. Note that the limit is 100 records at a time, so if you have lots of accounts, you may need to implement filtering or pagination (maybe a topic for a future post). The biggest benefit of Remote Objects  is that we don’t need a controller. We use the “ajax” option to specify the data for the table. The biggest issue I ran into with this was that it expects an object with a “data” property. You can’t just return the records from the remote object call.

In the columns option for the datatable, I have to specify where to pull each column from. This is done with { “data”: “_props.Phone”,
“defaultContent”: ” }. The defaultContent option tells the datatable to replace any undefined properties with a blank, preventing errors from being thrown.

Next, we have to handle the clicks to expand the row and display contacts. This code is fairly straightforward with another remote object query to get the list of contacts for the account. I then just build up a html table to append in the child section.

Here’s a screen shot of what it looks like when we are all done.

datatables ajax

And here is the entire page.

8 thoughts on “DataTables in Visualforce, part 2”

  1. Hi Daniel,

    I have similar requirement where I will have to show 1000+ users using Json as Apex:repeat does not support more than 1000 records. But using your example i can only show 100 records. I saw that you mention it may come in your next post but could you give an idea how to show 1000+ records using this method?

  2. Great post Daniel! I have been experimenting with the FixedColumns extension of DataTables and it allows the freezing of the left and right-most columns of a table which is great for tables with large amount of columns. Once issue I have been noticing, however, is that FixedColumns does not initialize all the time and the formatting of the Data Table is off once FixedColumns is initialized. Have you ever used the extension before and if so did you experience the same problems ?

    Thanks!

  3. Hi

    Did you ever have to deal with more than 1000 records with DML happening on them? I checked your code for 854 records and it seems fine. Please let me know.

Leave a Reply