引用easyui

<link rel="stylesheet" type="text/css" href="../themes/default/easyui.css"> 
<link rel="stylesheet" type="text/css" href="../themes/icon.css"> 
<link rel="stylesheet" type="text/css" href="demo.css"> 
<script type="text/javascript" src="../jquery-1.7.2.min.js"></script> 
<script type="text/javascript" src="../jquery.easyui.min.js"></script> 

javascript代码

$(function(){  
    $('#tt').datagrid({  
        url:'datagrid_data2.json',  
        columns:[[  
            {   field:'productid',  
                title:'Product ID',  
                width:120  
                //rowspan:2  
                //colspan:2  
                //align:'center'  
                //sortable:true  
                //resizable:true  
                //hidden:true  
                //checkbox:true  
                //formatter:function(value,row,index){}  
                //styler:function(value,row,index){}  
                //sorter:function(a,b){ }  
                //editor:string,object  
 
            },  
              
            {field:'listprice',title:'List Price',width:80,align:'right'},  
            {field:'unitcost',title:'Unit Cost',width:80,align:'right'},  
            {field:'attr1',title:'Attribute',width:250},  
            {field:'status',title:'Status',width:60,align:'center'}  
        ]],  
        frozenColumns:[[  
               {field:'ck',checkbox:true},  
               {field:'itemid',title:'Item ID',width:80,sortable:true}  
        ]],  
        //fitColumns:false,//true会导致列错位  
        //autoRowHeight:true,  
        toolbar:[{  
            iconCls: 'icon-edit',  
            text:'编辑',  
            handler: function(){alert('edit')}  
        },'-',{  
            iconCls: 'icon-help',  
            text:'帮助',  
            handler: function(){alert('help')}  
        }],  
        //striped:true,//条纹行，以区分行  
        //method:'post',  
        //nowrap:true,//false设置数据自动换行  
        //idField:'itemid',  
        loadMsg:'请稍候...',  
        pagination:true,//分页栏  
        rownumbers:true,//第一列显示自增序列  
        singleSelect:true 
        //checkOnSelect:true,  
        //selectOnCheck:true,  
        //pagePosition:'both',  
        //pageNumber:1,  
        //pageSize:10,  
        //pageList:[10,20,30,40,50],  
        //queryParams: {  
        //  name: 'easyui',  
        //  subject: 'datagrid'  
        //},  
        //sortName:'itemid',  
        //sortOrder:'desc',  
        //remoteSort:false,//true发送命令到服务器请求排序数据，false本地自己排序  
        //showHeader:true,  
        //showFooter:true,  
        //scrollbarSize:18,  
        //rowStyler:function(index,row,css){}  
        //loader:'json loader',  
        //loadFilter:function(data){}  
        //editors:'predefined editors',  
        //view:'default view'  
    });  
    //设置分页控件     
    $('#tt').datagrid('getPager').pagination({     
        pageSize: 10,//每页显示的记录条数，默认为10     
        pageList: [5,10,15],//可以设置每页记录条数的列表     
        beforePageText: '第',//页数文本框前显示的汉字     
        afterPageText: '页    共 {pages} 页',     
        displayMsg: '当前显示 {from} - {to} 条记录   共 {total} 条记录'   
        /*onBeforeRefresh:function(){    
            $(this).pagination('loading');    
            alert('before refresh');    
            $(this).pagination('loaded');    
        }*/    
    });   
}); 

html代码

<table id="tt"></table>