Paginator in Salesforce using Javascript remoting, JQuery Datatable 1.10.4. Inspired by https://github.com/Avinava/PageBlockTableEnhancerADV, https://yoafzal.wordpress.com/2013/02/04/sorting-pagination-in-visualforce-using-datatables-jquery-plug-in/. Data from the http://coenraets.org/blog/2015/01/belgian-beer-explorer-with-react-and-salesforce/.…

BeerPaginatorJSRemoting.cls

public with sharing class BeerPaginatorJSRemoting {
	public BeerPaginatorJSRemoting() {
			// Do nothing
	}

	@RemoteAction
	public static List<Beer__c> getBeerList(){
		List<Beer__c> beerList = [SELECT Id, Name, Tags__c, Alcohol__c, Brewery__r.Name FROM Beer__c LIMIT 1000];
		return beerList;
	}
}

BeerPaginatorJSRemoting.page

<apex:page showHeader="true" sidebar="true" docType="html-5.0" controller="BeerPaginatorJSRemoting">
	<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.4/css/jquery.dataTables.css"/>
    <script type="text/javascript" src="//code.jquery.com/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="//cdn.datatables.net/1.10.4/js/jquery.dataTables.js"></script>

	<apex:sectionHeader title="Beer sorting paginator" />
	<table id="beerTable">
		<thead>
			<th>Name</th>
			<th>Alcohol %</th>
			<th>Tags</th>
			<th>Brewery</th>
		</thead>
		<tbody></tbody>
	</table>

	<script type='text/javascript'>
	$(document).ready(function(){
		$('#beerTable').dataTable({
			"paging": true,
			"jQueryUI": true,
			"ajax": function(data, callback, settings){
				BeerPaginatorJSRemoting.getBeerList(function(result, event){
					if(event.type == 'exception')
						alert('Exception');
					else
						callback({'data':result})
				});
			},
			"columns": [
				{
					"data": "Name"
				},
				{
					"data": "Alcohol__c"
				},
				{
					"data": "Tags__c"
				},
				{
					"data": "Brewery__r.Name"
				}
			]
		});
	})
	</script>
</apex:page>