Ajax tables

How to create tables that retrieve there columns and rows from a server.

General

Ajax tables provide the ability to asynchronously load your table data into the page to avoid long load times when using a large collection of rows.

To make use of this feature you will need to do some server side coding in the language of your choice to provide end points that supply the required data. While the plugin is loading the data from the server a simple spinner is displayed to the user to indicate that something is happening. As this is meant to be used in conjunction with a large number rows the below example loads ten thousand and makes use of the paging component to improve performance.

Notes

  • Any promise object can be supplied for the columns or rows options as long as when resolved it returns the correct data.
  • We make use of two static files (columns.json and rows.json) to supply our data and retrieve it in the same way you would call your own end point, using jQuery's ajax functionality, in this case the jQuery.get function.
  • In the below example we have placed a three second delay on the calls to the server so that you get a chance to see the loader before the data is returned.
  • Using the paging component drastically improves the performance of the plugin on large numbers of rows. 
<table class="table" data-paging="true"></table>
jQuery(function($){
	$('.table').footable({
		"columns": $.get('columns.json'),
		"rows": $.get('rows.json')
	});
});