jQuery EasyUI datagrid本地分頁

代碼以下:javascript

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="utf-8"/>  
    <title></title>  
    <link href="js/jquery-easyui-1.3.6/themes/default/easyui.css" rel="stylesheet"/>  
    <link href="js/jquery-easyui-1.3.6/themes/icon.css" rel="stylesheet"/>  
    <script type="text/javascript" src="js/jquery-easyui-1.3.6/jquery.min.js"></script>  
    <script type="text/javascript" src="js/jquery-easyui-1.3.6/jquery.easyui.min.js"></script>  
    <script type="text/javascript">  
  
        // 表格數據源  
        var data = [];  
        // 用代碼造30條數據  
        for (var i = 1; i < 31; ++i) {  
            data.push({  
                "id":i,  
                "name":"Student" + i  
            })  
        }  
  
        $(function () {  
  
            $("#dd").datagrid({  
                title:"測試本地分頁",  
                rownumbers:true,  
                fitColumns:true,  
                pagination:true,  
                data:data.slice(0,10),  
                columns:[  
                    [  
                        {field:'id', align:"center", title:"編號", width:100},  
                        {field:'name', align:"center", title:"姓名", width:100}  
                    ]  
                ]  
            });  
  
            var pager = $("#dd").datagrid("getPager");  
            pager.pagination({  
                total:data.length,  
                onSelectPage:function (pageNo, pageSize) {  
                    var start = (pageNo - 1) * pageSize;  
                    var end = start + pageSize;  
                    $("#dd").datagrid("loadData", data.slice(start, end));  
                    pager.pagination('refresh', {  
                        total:data.length,  
                        pageNumber:pageNo  
                    });  
                }  
            });  
  
        });  
  
    </script>  
</head>  
<body>  
<div id="dd"></div>  
</body>  
</html>
相關文章
相關標籤/搜索