您的位置:首页 > 产品设计 > UI/UE

EasyUI实现分页、搜索、行按钮功能

2017-11-15 17:54 686 查看
1、html+js代码:

public class PageController : Controller
{
public ActionResult Index()
{
return View();
}

[HttpPost]
public ActionResult GetPageData()
{
int pageIndex = Convert.ToInt32(HttpContext.Request.Form["page"]);
int pageSize = Convert.ToInt32(HttpContext.Request.Form["rows"]);
var name = HttpContext.Request.Form["name"];
Dictionary<string, string> dic = new Dictionary<string, string>();
if(!string.IsNullOrEmpty(name))
{
dic.Add("Name",name);
}

int totalCount = 0;
List<UserInfo> list = GetData(dic,pageIndex, pageSize, out totalCount);

return Json(new { total = totalCount, rows = list }, JsonRequestBehavior.AllowGet);
}

private List<UserInfo> GetData(Dictionary<string, string> dic,int pageIndex,int pageSize,out int totalCount)
{
List<UserInfo> list = new List<UserInfo>();
UserInfo u = null;
for (int i = 0; i < 55; i++)
{
u = new UserInfo();
u.ID = 10000 + (i + 1);
u.Number = "ZH" + (i + 1).ToString();
u.Name = "Name" + (i + 1).ToString();
list.Add(u);
}

if (dic != null && dic.Count > 0)
{
list = list.Where(x => x.Name.Contains(dic["Name"])).ToList();
}

totalCount = list.Count;
list = list.Take(pageSize * pageIndex).Skip(pageSize * (pageIndex - 1)).ToList();
return list;
}

public class UserInfo
{
public int ID { get; set; }
public string Number { get; set; }
public string Name { get; set; }
}
}


后台代码
后台会传json到前台,json中有两个参数,total表示数据源总数量,rows表示当前页的数据。

3、先看效果图:

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: