AJAX support

You can fetch data by AJAX. In most simple case, you should set the groups array and the URL to which the request for group items will be sent:

$('#target').monolistAjax({
	group: {
		url: '/ajax/items/'
	},
	groups: ['0-9', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'T']
});

You can change data to be sent to the server, operate with data returned from the server before it will be passed to plugin, and assign a function to be called if the request fails.

group: {
	url: '/ajax/items/',
	data: function (group, page) {
		return {
			group: group,
			page: page
		};
	},
	success: function (data) {
		return data;
	},
	error: function (xhr, status, error) { }
}

Also, you can fetch a list of groups by AJAX. In this case, you should set groups as an object with URL to which the request for groups array will be sent:

groups: {
	url: '/ajax/groups/',
	data: function () {
		return {};
	},
	success: function (data) {
		return data;
	},
	error: function (xhr, status, error) { }
}

By default, navigation buttons will be placed in a div before the list. You can place them wherever you want by creating your own container for buttons and passing it to the buttonsContainer option.
if you're using pagination, it will be placed in a div after the list. You can place it wherever you want by creating your own container for pagination and passing it to the paginationContainer option.
After plugin initialization no navigation button will be selected. You can preselect any button with initLetter option. And you can assign onClick callback, which will be fired after the navigation button click.

You can use whatever markup you want and return any set of information from a server. It is not necessarily should be a list.
For example, you can return an array of objects and use this markup within the item option:

item: function (item) {
	return $('<div class="col-sm-6 col-md-4"><div class="thumbnail"><div class="caption"><h4>' +
				item.name + ' (' + item.year + ')</h4>' +
				'<p><button type="button" class="btn btn-primary btn-sm btn-block">Action</button></p>' +
			'</div></div></div>');
}