All Components

DataSource / Local data operations


Id First Name Last Name Title Age

HTML5/JavaScript 源码

<!DOCTYPE html>
  <title>Local data operations</title> 
  <meta charset="utf-8"> 
  <link href="../content/shared/styles/examples-offline.css" rel="stylesheet"> 
  <link href="../../styles/kendo.common.min.css" rel="stylesheet"> 
  <link href="../../styles/kendo.rtl.min.css" rel="stylesheet"> 
  <link href="../../styles/kendo.default.min.css" rel="stylesheet"> 
  <link href="../../styles/kendo.dataviz.min.css" rel="stylesheet"> 
  <link href="../../styles/kendo.dataviz.default.min.css" rel="stylesheet"> 
  <script src="../../js/jquery.min.js"></script> 
  <script src="../../js/kendo.all.min.js"></script> 
  <script src="../content/shared/js/console.js"></script> 
  <a class="offline-button" href="../index.html">Back</a> 
  <script src="../content/shared/js/people.js"></script> 
  <div id="example"> 
   <div class="box wide"> 
    <ul class="options"> 
     <li> <label for="page">Page:</label> <input type="text" value="1" id="page" class="k-textbox"> </li> 
     <li> <label for="order">Order by:</label> <select id="order"> <option value="Id">Id</option> <option value="FirstName">First Name</option> <option value="LastName">Last Name</option> <option value="Age">Age</option> </select> </li> 
     <li> <label for="dir">Direction:</label> <select id="dir"> <option value="asc">Ascending</option> <option value="desc">Descending</option> </select> </li> 
     <li> <button class="k-button" id="apply" style="margin-left: 74px;">Apply</button> </li> 
   <div class="demo-section k-content wide"> 
    <table id="people" class="metrotable"> 
       <th>First Name</th> 
       <th>Last Name</th> 
   <script id="template" type="text/x-kendo-template">
                    <td>#= Id #</td>
                    <td>#= FirstName #</td>
                    <td>#= LastName #</td>
                    <td>#= Title #</td>
                    <td>#= Age #</td>
                $(document).ready(function() {
                    // create a template using the above definition
                    var template = kendo.template($("#template").html());

                    var dataSource = new{
                        pageSize: 10,
                        data: createRandomData(500),
                        change: function() { // subscribe to the CHANGE event of the data source
                            // update the max attribute of the "page" input
                            $("#page").attr("max", this.totalPages());

                            $("#people tbody").html(kendo.render(template, this.view()));

                    // read the data

                    $("#apply").click(function() {
                        var page = parseInt($("#page").val(), 10);

                        // validate the page - it must be a number within the allowed range
                        if (isNaN(page) || page < 1 || page > dataSource.totalPages()) {
                            alert(kendo.format("Page must be a number between 1 and {0}", dataSource.totalPages()));

                        // query the remote service
                            page: page,
                            pageSize: 10,
                            sort: {
                                field: $("#order").val(),

                    //initialize dropdownlist components
                .demo-section {
                    overflow: auto;
                .options label {
                    display: inline-block;
                    width: 70px;
                .metrotable {
                	width: 100%;
                  border-collapse: collapse;

                table.metrotable > thead > tr > th
                    padding-top: 0;
                    font-size: 1.4em;