剑道ui分页问题

时间:2013-08-30 08:06:15

标签: jquery kendo-ui

我正在使用kendo ui grid http://demos.kendoui.com/web/grid/index.html,我想一次只显示5条记录,并通过分页显示其他记录,所以我使用此代码

 $(document).ready(function() {
                $("#grid").kendoGrid({
                    dataSource: {
                        data: createRandomData(50),
                        pageSize: 5
                    },
                    groupable: true,
                    sortable: true,
                    pageable: {
                        refresh: true,
                        pageSizes: true
                    },
                    columns: [ {
                            field: "FirstName",
                    attributes:{"class": "table-cell"}        


                        } , {
                            field: "LastName",
                   attributes:{"class": "table-cell"}         
                        } , {
                            field: "City",
                   attributes:{"class": "table-cell"}           
                        } , {
                            field: "Title",
                   attributes:{"class": "table-cell"}           
                        } , {
                            field: "BirthDate",
                            template: '#= kendo.toString(BirthDate,"dd MMMM yyyy") #',
                   attributes:{"class": "table-cell"}           
                        } , {

                            field: "Age",
                   attributes:{"class": "table-cell"}       
                        }
                    ]
                });
            });
        </script>

第9行的分页可以启用分页,但它可以启用页脚栏中的所有内容,而且我不需要所有我只需要下一个和上一个按钮相互之间也是如此:)。我也读出了它的所有文件http://docs.kendoui.com/getting-started/using-kendo-with/aspnet-mvc/helpers/grid/configuration,但我找不到它的解决方案,或者我可能错过了它。

3 个答案:

答案 0 :(得分:1)

您是否尝试将Pager的信息设为false?也许这会有所帮助:

http://docs.kendoui.com/api/web/pager#configuration

答案 1 :(得分:0)

栈, 尝试此代码或将其作为分页的示例

<html>
<head>
    <title></title>
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://cdn.kendostatic.com/2013.2.716/js/kendo.all.min.js"></script>
</head>
<body>

<div id="grid"></div>
<script>
var dataSource = new kendo.data.DataSource({
  data: [
    { name: "Tea", category: "Beverages" },
    { name: "Coffee", category: "Beverages" },
    { name: "Ham", category: "Food" }
  ],
  page: 1,
  // a page of data contains two data items
  pageSize: 5
});
dataSource.fetch(function(){
  var view = dataSource.view();
  console.log(view.length); // displays "2"
  console.log(view[0].name); // displays "Tea"
  console.log(view[1].name); // displays "Coffee"
});
$("#grid").kendoGrid({
  pageable: {
        refresh: true
    },
  pageable:true,
    columns: [
        { field: "name", title: "Name", width: "100px" },
        { field: "category", title: "Category", width: "100px" },
    ],
    dataSource: dataSource
});
</script>
</body>
</html>

答案 2 :(得分:0)

您需要查看pager文档,其中显示了如何禁用默认启用的某些选项。例如,将numeric设置为false会隐藏数字按钮。