Easyui table分页

1、thead中列举表头

<table class="easyui-datagrid" id="list" style="width:100%;height:520px"
                               data-options="autoRowHeight:false,singleSelect:true,pagination:true,pageSize:10,striped:true,scrollbarSize:1,rownumbers:true">
   <thead>
      <tr>
        <th data-options="field:'createName',width:'20%',align:'center' ">修改人</th>
        <th data-options="field:'createAt',width:'20%',align:'center',formatter: commonTimestampToTime">修改时间</th>
      </tr>
   </thead>
</table>

设置rownumbers:true开启序号功能，pagination:true开启分页功能，js中代码：

//第一次加载表格时调用方法dynamicCreateListGrid()，无参，则第一页
function dynamicCreateListGrid(pageNo, pageSize) {
	var reqUrl = "接口路径";
	var options = $("#list").datagrid("getPager").pagination("options");
	if(!pageNo){
		pageNo = options.pageNumber;
	}
	if(!pageSize){
		pageSize = options.pageSize;
	}
	$.ajax({
		url:reqUrl,
		type:"GET",
		async:true,
		data: {
			pageNo: pageNo,
			pageSize: pageSize
		},
		beforeSend:function(){
			$("#list").datagrid('loading');
		},
		success:function(res){
			if(200 == res.code && "success" == res.data.message){
				var page = {};
				page.total = res.data.totalCount;
				page.rows  = res.data.list;
				$("#list").datagrid("loadData", page);
                //分页代码
				$("#list").datagrid("getPager").pagination({
					onSelectPage:function(pageNumber, pageSize){
                        //分页调加载表格接口方法
						dynamicCreateListGrid(pageNumber, pageSize);
					}
				});
			}else{
				$.messager.alert("提示",res.data.message,"info");
			}
		},
		error:function(XMLHttpRequest, textStatus, errorThrown){
			console.log(reqUrl+"接口请求error=="+textStatus+"=="+errorThrown);
		},
		complete: function(){
			$("#list").datagrid('loaded');
		}
	});
}

2、列在js中加载

html中只需要table标签

<table id="r_grid" style="width:100%;height:250px">
</table>

js代码，分开加载

//动态创建表格
function dynamicCreateGrid() {
    if($('#r_grid').hasClass("datagrid-f")) {
        return;
    }
    //渲染列设置pagination:true，rownumbers:true
    $('#r_grid').datagrid({      multipleSelect:false,pagination:true,pageSize:30,striped:true,scrollbarSize:1,rownumbers:true,autoRowHeight:false,
        columns:[[
            {field:'contactName',title:'联系人姓名',width:'10%',align:'center'},
            {field:'dailPhone',title:'电话号码',width:'9%',align:'center',formatter:phoneFormat}   
        ]]
    });
    /* 表格翻页初始化 */
    $("#r_grid").datagrid("getPager").pagination({
        onSelectPage:function(pageNumber, pageSize){
            loadInfo(pageNumber, pageSize);
        }
    });

    // 创建完datagrid，就立刻加载数据
    loadInfo();
}

//数据加载函数
function loadInfo(pageNo, pageSize) {
    var options = $("#r_grid").datagrid("getPager").pagination("options");
    if(!pageNo){
        pageNo = 1;
    }
    if(!pageSize){
        pageSize = options.pageSize;
    }
    $.ajax({
        url:"接口路径",
        type:"GET",
        data: {
            pageNo: pageNo,
            pageSize: pageSize
        },
        success:function(res) {
            if(200 == res.code && "success" == res.data.message){
                var page = {};
                page.total = res.data.totalCount;
                page.rows  = res.data.list;
                $("#r_grid").datagrid("loadData", page);
            } else {
                $.messager.alert("提示",res.data.message,"info");
            }
        },
        beforeSend:function(){
            $("#r_grid").datagrid("loading");
        },
        complete: function(){
            $("#r_grid").datagrid("loaded");
        }
    });
}

js代码，直接加载

function dynamicCreateGrid(pageNo, pageSize) {
	var dataArr = [];
	$('#list').datagrid({
		url:"url",
		fit:false,
		fitColumns:true,
		striped:true,
		rownumbers:true,
		border:false,
		singleSelect: true,
		loadMsg: "正在努力加载数据，请稍后...",
		queryParams: {"type":1},
		pagination:true,
		pageSize:20,
		pageList:[10,20,30,40,50],
		pageNumber:1,
		onBeforeLoad : function(param){ //转换分页参数
			var pageNo = param.page; //保存下值
			var pageSize = param.rows;
			delete param.page; //删掉
			delete param.rows; //删掉
			param.pageNo = pageNo; //重新命名将page改为pageNo
			param.pageSize = pageSize;
		},
		loadFilter: function(res) {//转换后台返回数据格式
			dataArr = res.data.list || [];
			var page = {};
			page.total = res.data.totalCount;
			page.rows  = dataArr;
			return page;
		},
		columns:[
			[
			{field:'id',title:'编号',width:'20%',checkbox:true},
			{field:'createName',title:'修改人',width:'20%'},
			{field:'createAt',title:'修改时间',width:'20%'}
			]
		]
	});
}

datagrid

1、要求后台返回格式数据中要有total和rows

后台返回数据中没有total和rows，会报cannot read property 'length' of undefined。如果后台格式统一无法实现，则datagrid使用loadFilter格式化后台数据

loadFilter:function(res) {
    //处理数据
    dataArr = res.data.list || [];
    var page = {};
    page.total = res.data.totalCount;
    page.rows = dataArr;
    return page;
}

2、分页时默认传递给接口的参数为page和rows

后台接口一般接收的是pageNo和pageSize，所以需要转换。

onBeforeLoad : function(param){ //这个param就是queryString
        var pageNo = param.page; //保存下值
        var pageSize = param.rows;
        delete param.page; //删掉
        delete param.rows; //删掉
        param.pageNo = pageNo; //这里就是重新命名了！！！ ,j将page 改为了 pages
        param.pageSize = pageSize;
}

3、除页码外的其他参数

queryParams: {"type",1}