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="EB9781849699136_3.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>