This recipe demonstrates the built-in paging feature of Kendo Grids.
Copy the following code into your new document:
<!DOCTYPE html>
<html>
<head>
<title>Kendo UI Grid How-to</title>
<link rel="stylesheet" type="text/css" href="kendo/styles/kendo.common.min.css">
<link rel="stylesheet" type="text/css" href="kendo/styles/kendo.default.min.css">
<script src="kendo/js/jquery.min.js"></script>
<script src="kendo/js/kendo.web.min.js"></script>
</head>
<body>
<h3 style="color:#4f90ea;">Exercise 3 - Using Built-in Paging</h3>
<p><a href="index.html">Home</a></p>
<script type="text/javascript">
$(document).ready(function(){
$("#myGrid").kendoGrid({
pageable: {
pageSize: 2,
previousNext: true, // default true
numeric: true, // default true
buttonCount: 2, // default 10, controls how many buttons are shown which represent pages of data
refresh: true, // default false
input: true, // default false
messages: {
display: "{0} - {1} of {2} records",
empty: "Nothing to display",
page: "Page",
of: "of {0}",
itemsPerPage: "records per page",
first: "Go to the first page",
previous: "Go to the previous page",
next: "Go to the next page",
last: "Go to the last page",
refresh: "Refresh"
}
}
});
});
</script>
<table id="myGrid">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Rank</th>
</tr>
</thead>
<tbody>
<tr>
<td>Jim</td>
<td>Kirk</td>
<td>Captain</td>
</tr>
<tr>
<td>Jim</td>
<td>Raynor</td>
<td>Captain</td>
</tr>
<tr>
<td>Sarah</td>
<td>Kerrigan</td>
<td>Ghost Recon</td>
</tr>
<tr>
<td>Jean-Luc</td>
<td>Picard</td>
<td>Captain</td>
</tr>
<tr>
<td>Steve</td>
<td>Rogers</td>
<td>Captain</td>
</tr>
</tbody>
</table>
</body>
</html>