使用KendoUI的Listview控件进行服务器端分页

时间:2014-04-17 14:40:09

标签: javascript jquery angularjs kendo-ui kendo-listview

我正在尝试使用KendoUI的ListView控件进行服务器端分页。但问题是寻呼机控件没有显示页面的链接。这是我的代码:

var dataSource = new kendo.data.DataSource({
                serverPaging: true,
                pageSize: 2,

                schema: {
                    id: "Id",
                    data: "Results",
                    total: "total"                            
                    }
                },

                transport: {
                    read: function (options) {
                        oThis.GetDataFromServer(options);
                    }
                }
            });

$('#listcontent').kendoListView({
                template: kendo.template('<div><table > \
                                          <tr><td style = "\\padding:8px;" ><b>#:data.Name#</b></td ></tr> \
                                          <tr><td style="\\padding:8px;">#:data.Description#</td > \
                                         <td><a href="#:data.productdetailurl(data.SourceProductVersionId,"catalogueitem")#">View Detail</a ></td> \
                                          </tr></table></div>'),
                dataSource: dataSource,
                selectable: true
            });

            //render kendo listview pager
            $('#listpager').kendoPager({
                datasource: dataSource 
            });

总字段包含正确的记录数。这与Grid工作正常,因此不确定Listview的问题是什么。

1 个答案:

答案 0 :(得分:2)

我认为你遗漏了pageable: true

$('#listcontent').kendoListView({
            template: kendo.template('<div><table > \
                                      <tr><td style = "\\padding:8px;" ><b>#:data.Name#</b></td ></tr> \
                                      <tr><td style="\\padding:8px;">#:data.Description#</td > \
                                     <td><a href="#:data.productdetailurl(data.SourceProductVersionId,"catalogueitem")#">View Detail</a ></td> \
                                      </tr></table></div>'),
            dataSource: dataSource,
            selectable: true,
            pageable: true
        });