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}", width: "130px" }, { field: "UnitsInStock", title: "Units In Stock", width: "130px" }, { field: "Discontinued", width: "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
},