2013-08-30 47 views
0

我在剑道UI电网http://demos.kendoui.com/web/grid/index.html工作,我想显示在同一时间只有5条记录,也表明人通过分页,所以我用这个代码剑道UI分页问题

$(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,但我发现它没有解决方案,或者我可能错过了它。

+0

我的问题是标记为负我的事情是一个有效的问题,我做了每一个thng,现在我不能从这个插件恢复,我搜索我的自己很多的解决方案 –

+0

为什么你不想要的页面和项目数? – timmy

回答

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> 
0

您需要检查pager文档它展示了如何禁用某些选项默认启用。例如,设置numericfalse将隐藏数字按钮。