I have been working on a project requiring the use of jQuery Datatables. This jQuery plugin creates a table layout of data that can be sorted, filtered and dynamically updated. It is capable of getting data via AJAX which makes it very usable in a WordPress site. I am using datatables as part of a plugin. The actual UI is generated by a shortcode. So the first step in the process is to register and then enqueue the scripts and styles I will need:

//register the scripts for shortcodes
function register_script_for_shortcodes() {
wp_register_script('datatables', plugins_url('/js/jquery.dataTables.min.js', __FILE__),  array( 'jquery' ) );
wp_register_script('datatablesreload', plugins_url('/js/jquery.datatables.reload.js', __FILE__),  array( 'jquery' ) );
wp_register_script('rotarydatatables', plugins_url('/js/rotary.datatables.js', __FILE__),  array( 'jquery' ) );
'rotary-datatables',plugins_url('/css/rotarydatatables.css', __FILE__), false, 0.1);
//the scripts included here are need for the shortcodes
function enqueue_scripts_for_shortcodes() {
wp_enqueue_script(array('datatables','datatablesreload', 'rotarydatatables', 'jquery-ui-dialog'));
wp_localize_script( 'rotarydatatables', 'rotarydatatables', array('ajaxURL' => array('ajaxURL' => admin_url('admin-ajax.php'), 'tableNonce' => wp_create_nonce( 'rotary-table-nonce' )) );

Notice how the code calls wp_localize_script to build variables that we can use with datatables so it knows where to make the AJAX call for its data source. The code snippet for this is:

rotaryTable = $('#rotarymembers').dataTable( {
				'bProcessing': true,
				'bServerSide': false,
				'sAjaxSource': rotarydatatables.ajaxURL+'?action=rotarymembers'

And remember, you will need to tell WordPress about your AJAX calls:

add_action( 'wp_ajax_nopriv_rotarymembers', array($this, 'rotary_get_members' ));
add_action( 'wp_ajax_rotarymembers', array($this, 'rotary_get_members' ));

So, what do we do in the rotary_get_members function?
First, we need to provide the data in a format that is expected by datatables. This includes the columns we will have and an array of data fields. The aaData array will have rows of data that appear in the table.

$output = array(
        	'sColumns' => 'Name, Classification, Cell/Home Phone, Business Phone, Email',
			'sEcho' => intval($_GET['sEcho']),
			'iTotalRecords' => count($rotaryclubmembers->MEMBER),
			'iTotalDisplayRecords' =>10,
			'aaData' => array()

Each row of data is placed in the $output variable as follows:

$output['aaData'][] = $row;

And we call json_encode on the $output variable to feed it back to datatables.

The resulting UI looks like this:

JQuery Datatables UI