学习记录---easyUI数据表格加载json文件实现分页功能

easyUI数据表格请求json文件的分页功能实现

@yy_huandehuanshi

因为之前没有接触过前端，所以难免会在自学的过程中遇到大大小小的麻烦，此篇文章只用来记录自己在学习过程遇到的问题和解决的办法。同时以供和我一样刚学习前端的小白参考。

easyUI
此篇文章用到的是easyUI框架，需要引入的一些js和css都可以在下面网站链接中下载EasyUI中文网。

首先是创建数据表格，easyui提供了多种方法以供选择，在这里我是使用的是JavaScript的方法。

 $("#dg").datagrid({//dg为table标签的id
                        width: 890,
                        height:380,
                        rownumbers: true,//显示行号栏                    
                        pagination: true, //显示分页栏
                        pageSize: 10,//分页条件
                        pageList:[10,20,50], 
                        columns: [[
                            {field: 'phone', title: '号码', width: 98, editor: 'numberbox', align: 'center'},
                            {field: 'name', title: '姓名', width: 70, editor: 'text', align: 'center'},
                            {field: 'age',title: '年龄',width: 80,editor: 'text',align: 'center'},
                            {field: 'address', title: '地址', width: 60, editor: 'text', align: 'center'}
                            ]]              	
                                       	            
  });

这样的话就初始化好了一个长宽固定的数据表格，然后就是加载json文件的数据。我这里是通过点击一个按钮，绑定onclick事件，然后通过ajax进行加载。

function show(){
        $.ajax({
        url:'../data/page.json',
        type:'get',
        dataType:'json',
        success:function(data){
        $("#dg").datagrid('loadData',data);
        $("#dg").datagrid("loadData", data.slice(0, 10));
        var pager = $("#dg").datagrid("getPager");//分页代码块
                 pager.pagination({
                 total: data.length,                        
                 onSelectPage: function (pageNo, pageSize) {
                          var start = (pageNo - 1) * pageSize;
                          var end = start + pageSize;
              $("#dg").datagrid("loadData",data.slice(start, end));
                     pager.pagination('refresh', {
                     total: data.length,
                     pageNumber: pageNo
                                        });
                                    }
                                });
                    		},
                    	err:function(xhr){
                    		alert(xhr.status);
                    	}
                    });
                 }

当点击按钮加载数据后，表格会先显示前十条数据，点击表格下方的分页栏可以实现分页展示。

最后本篇博客只是用来学习中记录问题，或许包含多多少少的错误，还请大家多帮忙指出~~