javascript 分页剑道网格客户端
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20818402/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Paging kendo grid client side
提问by amp
I want to use a MVC helper to build a grid on the server side but after I want to add and remove rows on the client side.
我想使用 MVC 帮助程序在服务器端构建网格，但是在我想在客户端添加和删除行之后。
So I use the following wrapper:
所以我使用以下包装器：
@(Html.Kendo().Grid<SIGEPos.Models.MyGridViewModel>()
.Name("Grid")
.Columns(columns =>
{
columns.Bound(p => p.id).Hidden();
columns.Bound(p => p.name).Title("Name").Width(130);
columns.Bound(p => p.quantity).Title("Quantity").Width(130);
})
.Pageable()
.Scrollable(scr=>scr.Height(430))
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(20)
.ServerOperation(false)
)
)
And the following markup is generated (only script part shown):
并生成以下标记（仅显示脚本部分）：
<script>
jQuery(function () {
jQuery("#Grid").kendoGrid({
"columns": [{
"title": "id",
"hidden": true,
"field": "id",
"filterable": {},
"encoded": true
}, {
"title": "Name",
"width": "130px",
"field": "name",
"filterable": {},
"encoded": true
}, {
"title": "Quantity",
"width": "130px",
"field": "quantity",
"filterable": {},
"encoded": true
}],
"pageable": {
"buttonCount": 10
},
"dataSource": {
"transport": {
"prefix": "",
"read": {
"url": ""
}
},
"pageSize": 20,
"page": 1,
"total": 0,
"type": "aspnetmvc-ajax",
"schema": {
"data": "Data",
"total": "Total",
"errors": "Errors",
"model": {
"fields": {
"id": {
"type": "number"
},
"quantity": {
"type": "number"
},
"name": {
"type": "string"
}
}
}
}
}
});
});
</script>
With that I'm not able to paging the grid on client side. I can add items but the grid.dataSource.total()is always 0so paging don't work...
这样我就无法在客户端对网格进行分页。我可以添加项目，但grid.dataSource.total()总是0如此分页不起作用......
I have checked this demoand the generated code is a little different:
我检查了这个演示，生成的代码有点不同：
$(document).ready(function() {
$("#grid").kendoGrid({
dataSource: {
data: products,
schema: {
model: {
fields: {
ProductName: { type: "string" },
UnitPrice: { type: "number" },
UnitsInStock: { type: "number" },
Discontinued: { type: "boolean" }
}
}
},
pageSize: 20
},
height: 430,
scrollable: true,
sortable: true,
filterable: true,
pageable: {
input: true,
numeric: false
},
columns: [
"ProductName",
{ field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: "130px" },
{ field: "UnitsInStock", title: "Units In Stock", width: "130px" },
{ field: "Discontinued", width: "130px" }
]
});
});
It seems that the dataSourceconfiguration is different... How can I handle this?
好像dataSource配置不一样了。。。怎么处理？
回答by Filippo Carraro
You have to set serverPaging: falseunder filterableproperty. The datasource of kendo grid is a json where you have to specify the numbers of rows and of course data matching columns declaration.
你必须serverPaging: false在filterable属性下设置 。剑道网格的数据源是一个 json，您必须在其中指定行数，当然还有数据匹配列声明。
