All Components

DataSource / Local data operations

Configure

Id First Name Last Name Title Age

HTML5/JavaScript 源码

<!DOCTYPE html>
<html>
 <head> 
  <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> 
  <script>
        
    </script> 
 </head> 
 <body> 
  <a class="offline-button" href="../index.html">Back</a> 
  <script src="../content/shared/js/people.js"></script> 
  <div id="example"> 
   <div class="box wide"> 
    <h4>Configure</h4> 
    <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> 
    </ul> 
   </div> 
   <div class="demo-section k-content wide"> 
    <table id="people" class="metrotable"> 
     <thead> 
      <tr>
       <th>Id</th> 
       <th>First Name</th> 
       <th>Last Name</th> 
       <th>Title</th> 
       <th>Age</th> 
      </tr>
     </thead> 
     <tbody> 
      <tr> 
       <td></td> 
       <td></td> 
       <td></td> 
       <td></td> 
       <td></td> 
      </tr> 
     </tbody> 
    </table> 
   </div> 
   <script id="template" type="text/x-kendo-template">
                <tr>
                    <td>#= Id #</td>
                    <td>#= FirstName #</td>
                    <td>#= LastName #</td>
                    <td>#= Title #</td>
                    <td>#= Age #</td>
                </tr>
            </script> 
   <script>
                $(document).ready(function() {
                    // create a template using the above definition
                    var template = kendo.template($("#template").html());

                    var dataSource = new kendo.data.DataSource({
                        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
                    dataSource.read();

                    $("#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()));
                            return;
                        }

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

                    //initialize dropdownlist components
                    $("#order").kendoDropDownList();
                    $("#dir").kendoDropDownList();
                });
            </script> 
   <style>
                .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;
                }
            </style> 
  </div>   
 </body>
</html>