Loading rows

This page shows two examples, the first completely replaces the current table rows with the newly supplied ones while the second appends the new rows to current ones.

The main method demonstrated in these examples is the FooTable.Rows#load(array, bool) method and it's extension method found directly on the plugin instance FooTable.Table#loadRows(array, bool).

Notes

We make use of five static files (columns.json, rows-1.json, rows-2.json, rows-3.json, rows-4.json) to supply our data. How you retrieve your data is completely up to you but for this example we make a simple jQuery.get call.
Using the paging component drastically improves the performance of the plugin on large numbers of rows.

This first example shows how to completely replace the current table rows with new ones retrieved from an ajax call to the server.

<button class="load-rows" type="button" data-url="../../content/rows-1.json">Load rows 1-2500</button>
<button class="load-rows" type="button" data-url="../../content/rows-2.json">Load rows 2501-5000</button>
<button class="load-rows" type="button" data-url="../../content/rows-3.json">Load rows 5001-7500</button>
<button class="load-rows" type="button" data-url="../../content/rows-4.json">Load rows 7501-10000</button>

<table id="load-example" class="table" data-paging="true" data-sorting="true" data-filtering="true"></table>

jQuery(function($) {
	// init the plugin and hold a reference to the instance
	var ft = FooTable.init('#load-example', {
		// we only load the column definitions as the row data is loaded through the button clicks
		"columns": $.get('../../content/columns.json')
	});

	// bind the buttons to load the rows
	$('.load-rows').on('click', function (e) {
		e.preventDefault();
		// get the url to load off the button
		var url = $(this).data('url');
		// ajax fetch the rows
		$.get(url).then(function (rows) {
			// and then load them using either
			ft.rows.load(rows);
			// or
			// ft.loadRows(rows);
		});
	});
});

This second example shows how to append new data to the current table rows. Here you can only load each set of rows a single time as once each is done there is no need to load them again, they are already in the table. If you were to load a set again it would cause duplicates to appear in the table.

<button class="append-rows" type="button" data-url="../../content/rows-1.json">Append rows 1-2500</button>
<button class="append-rows" type="button" data-url="../../content/rows-2.json">Append rows 2501-5000</button>
<button class="append-rows" type="button" data-url="../../content/rows-3.json">Append rows 5001-7500</button>
<button class="append-rows" type="button" data-url="../../content/rows-4.json">Append rows 7501-10000</button>

<table id="append-example" class="table" data-paging="true" data-sorting="true" data-filtering="true"></table>

jQuery(function($){
	// init the plugin and hold a reference to the instance
	var ft = FooTable.init('#append-example', {
		// we only load the column definitions as the row data is loaded through the button clicks
		"columns": $.get('../../content/columns.json')
	});

	// bind the buttons to load and then append the rows
	$('.append-rows').on('click', function(e){
		e.preventDefault();
		// hold a reference to the button, disable it and update the text to indicate loading
		var $this = $(this).prop('disabled', true).text('Loading'),
			// get the url to load off the button
			url = $this.data('url');
		// ajax fetch the rows
		$.get(url).then(function(rows){
			// and then append them using either
			ft.rows.load(rows, true);
			// or
			// ft.loadRows(rows, true);

			// set the button text to loaded
			$this.text('Appended');
		});
	});
});

How to load table rows after the plugin has been initialized.

Notes