Using built-in paging (Simple)

This recipe demonstrates the built-in paging feature of Kendo Grids.

Getting ready

Open 3-paging.html in your editor or create a new HTML file with the same name.

How to do it...

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>

How it works...

Like with the sorting feature, you can simply give the pageable parameter a value of true, but this code shows several examples of refining the paging feature of the grid.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset