表格显示初始化

[html] view plain copy

print ?

<**table id=”dg”></table**>

[javascript] view plain copy

print ?

我们还可以手动设置分页控件的显示样式，例如：

[javascript] view plain copy

print ?

var p = $(‘#dg’).datagrid(‘getPager’);
$(p).pagination({
beforePageText: ‘第’,//页数文本框前显示的汉字
afterPageText: ‘页共 {pages} 页’,
displayMsg: ‘第{from}到{to}条，共{total}条’,
});

原版显示效果如下：

 ![20160814111950542][]

如上图所示，数据表格和分页已经显示出来了。

假分页实现

假分页就是将所有要显示的数据全部查询出来后，进行前台的分页，适合数据量较小的Web项目。

实现代码：

[javascript] view plain copy

print ?

后台代码仅仅是将从数据库里查询到的数据转化未Json字符串类型传到前台就可以了。例：

[csharp] view plain copy

print ?

public ActionResult test()
{
IBasicOrganizationBll CollegeBll = SpringHelper.GetObject(“BasicOrganizationBll”);
List college = CollegeBll.QueryCollege();//查询后台数据方法
return Json(college, JsonRequestBehavior.AllowGet);
}

显示效果：

20160814112912452

真分页

真分页相对假分页来说麻烦了一些，但是对于数据量大的系统来说，可以很好的，快速的查询数据。要想实现分页，我们就得先知道分页的原理，首先我们需要将[第几页](pageIndex)和[一页多少数据](pageSize)传递给后台，以便查询，EasyUI非常方便的给我们提供了自动将这两个参数传到后台的事件，当我们刚开始加载数据的时候，我们可以看到如图，

20160814113535747

当我选择每页显示10条数据的时候。

20160814113540408

当我点击下一页的时候，

20160814113544220

是不是非常清楚原理了，我们现在要做的就是在后台接收这些数据，当然需要注意的是：后台需要返回总数据条数（total）以便前台显示。

[javascript] view plain copy

print ?

后台代码接收：

[csharp] view plain copy

print ?

public ActionResult test()
{
int pageIndex, pageSize;
pageIndex = int.Parse(Request[“page”]); //第几页的数据
pageSize = int.Parse(Request[“rows”]); //每页多少条数据
int total=0; //返回数据条数总值
IBasicOrganizationBll CollegeBll = SpringHelper.GetObject(“BasicOrganizationBll”);
List major = CollegeBll.test(pageIndex,pageSize,out total);
var data = new
{
total, //将数据total加载到data中，返回到前台。
rows = major
};
return Json(data, JsonRequestBehavior.AllowGet);
}

接口代码：

[csharp] view plain copy

print ?

List test(int pageIndex, int pageSize, out int total);

查数据代码（我这里使用的封装好的D层，仅供参考，具体查询方法，请自己书写SQL语句）：

[csharp] view plain copy

print ?

public List test(int pageIndex, int pageSize,out int total)
{
List major = new List();
major = this.BasicOrganizationCurrentDal.LoadPageItems(pageSize, pageIndex, out total, u => u.OrganizationCode, true).ToList(); //分页数据查询
return ConvertListToList, List>.ListInputToOutput(major); //返回查询到的泛型集合。
}