Modal

Notes

This example makes use of Bootstraps' modal component.
The base table in the example below is a clone of the showcase example to demonstrate that various table operations such as filtering, sorting, paging still function correctly.
Seeing as the modal is a lot smaller than the viewport and the columns.json file uses the default breakpoints, the below example makes use of the useParentWidth option so the columns collapse accordingly.

jQuery(function($){
	$('#modal-example-1').footable({
		"useParentWidth": true,
		"columns": $.get('columns.json'),
		"rows": $.get('rows.json')
	});
});

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
	Launch demo modal
</button>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
	<div class="modal-dialog" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
				<h4 class="modal-title" id="myModalLabel">Modal title</h4>
			</div>
			<div class="modal-body">
				<table id="modal-example-1" class="table" data-paging="true" data-filtering="true" data-sorting="true"></table>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
			</div>
		</div>
	</div>
</div>

Shows using FooTable with Bootstraps' modal component.

Notes