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

Question

我正在尝试使用 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 有什么问题。

Answer 1

我认为你遗漏了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
        });