Using the Kendo pager anywhere within a page.

The kendoPager is a beautiful widget that typically allows the user to navigate through a Kendo grid. It has fast forward and forward buttons to go to the first item and the previous item, displays the current page, which you can click to select another page, and forward and fast forward buttons to select the next and the last grid page. It is an intuitive control that is adaptive and themable.
Although there is no official documentation on this, we can also use this control in anypage. You're notlimited to only using this in the grid!
I'll show you my approach. You can see this Kendo pager in action by scrolling to the very bottom of this pagebelow.

First create an element for the pager.
2) Create the datasource. Provide the URL in the pagerUrl element, and the page number.
3) Instantiate the pager control, and provide a change method. We will pass the complete datasource to the change method that we will invoke next.
4) Read the datasource to populate the kendoPager control.
5) Invoke the onPagerChange method, extract the values from the passed datasource, and redirect the user using javascript.

Here is the code:

<div id="pager" data-role="pager" class="k-pager-wrap k-widget k-floatwrap k-pager-lg">
 <script>
	// Create the datasource with the URL and page number.
	var pagerDataSource = new kendo.data.DataSource({
		data: [
			{ pagerUrl: "&startRow=0&page=1", page: "1" },
			{ pagerUrl: "&startRow=10&page=2", page: "2" },
			{ pagerUrl: "&startRow=20&page=3", page: "3" },
			{ pagerUrl: "&startRow=30&page=4", page: "4" }
		],
		pageSize: 1,// Leave this at 1.
		page: 4 // Specify the currently selected page using a server side language.
	});

	var pager = $("#pager").kendoPager({
		dataSource: pagerDataSource,
		// Pass the datasource to an onChange method outside of this function.
		change: function() {
			onPagerChange(this.dataSource.data());
		}
	}).data("kendoPager");
	
	// Read the datasource. 
	pagerDataSource.read();

	// Extract passed data from the datasource and redirect the user.
	function onPagerChange(data){
		// Get the current page of the pager. The method to extract the current page is 'page()'.
		var currentPage = pager.page();
		// We are going to get the data item held in the datasource using its zero index array, but first we need to subtract 1 from the page value.
		var index = currentPage-1;
		// Get the url that is stored in the datsource using our new index.
		var pagerUrl = "?" + data[index].pagerUrl;
		// Open the page.
		window.location.href = pagerUrl;
	}
</div>