html文件
<body> <div id="example"> <!-- 定义grid显示的元素范围 --> <div id="grid"></div> <script> var products = [{ ProductID: 1, ProductName: "Chai", SupplierID: 1, CategoryID: 1, QuantityPerUnit: "10 boxes x 20 bags", UnitPrice: 18.0000, UnitsInStock: 39, UnitsOnOrder: 0, ReorderLevel: 10, Discontinued: false, Category: { CategoryID: 1, CategoryName: "Beverages", Description: "Soft drinks, coffees, teas, beers, and ales" } }, { ProductID: 2, ProductName: "Chang", SupplierID: 1, CategoryID: 1, QuantityPerUnit: "24 - 12 oz bottles", UnitPrice: 19.0000, UnitsInStock: 17, UnitsOnOrder: 40, ReorderLevel: 25, Discontinued: false, Category: { CategoryID: 1, CategoryName: "Beverages", Description: "Soft drinks, coffees, teas, beers, and ales" } }, { ProductID: 3, ProductName: "Aniseed Syrup", SupplierID: 1, CategoryID: 2, QuantityPerUnit: "12 - 550 ml bottles", UnitPrice: 10.0000, UnitsInStock: 13, UnitsOnOrder: 70, ReorderLevel: 25, Discontinued: false, Category: { CategoryID: 2, CategoryName: "Condiments", Description: "Sweet and savory sauces, relishes, spreads, and seasonings" } }]; $(document).ready(function () { // 找到需要渲染的元素 $("#grid").kendoGrid({ dataSource: { // data是数据，作为数据源去渲染 data: products, // schema是定义数据的类型 schema: { model: { fields: { ProductName: { type: "string" }, UnitPrice: { type: "number" }, UnitsInStock: { type: "number" }, Discontinued: { type: "boolean" } } } }, // pageSize:分页所需字段，每页显示多少条数据 pageSize: 2 }, // 表格高度（不定义则根据表格内容自定义显示） height:150, // 支持排序 sortable: true, // 支持搜索 filterable: true, // 支持分页 pageable: true, // 表格显示列 columns: [ "ProductName", { field: "UnitPrice", title: "Unit Price", format: "{0:c}", "130px" }, { field: "UnitsInStock", title: "Units In Stock", "130px" }, { field: "Discontinued", "130px" } ] }); }); </script> </div> </body>
1、kendoGrid如果返回所有数据，在前端进行分页展示的话：只需要设置pageSize属性即可
2、若是需要请求接口去获取数据的话：需要替换DataSource里的data。
dataSource: {
// 定义的数据，作为数据源去渲染
read: {
url: "请求的接口路径",
dataType: "jsonp" --- 接口返回的格式（json）
},
// schema是定义数据的类型
schema: {
model: {
fields: {
ProductName: { type: "string" },
UnitPrice: { type: "number" },
UnitsInStock: { type: "number" },
Discontinued: { type: "boolean" }
}
}
},
// pageSize:分页所需字段，每页显示多少条数据
pageSize: 2
},