layui应用之表格篇
前言：个人转码小说网站：友书-绿色、纯净、无广告，欢迎广大小说阅读爱好者同行来本网站看小说，书友交流群：580462139（群主及管理均为资深90后程序猿哦）
正文：先来张效果图镇楼
如图，利用layui前端框架我们可以很简单的做出带分页的数据表格，并且表格支持表格内排序
前端代码：
ID
类别
作者
书名
简介
字数
点击量
下载量
完结状态
是否上架
操作
Ps:表格请求数据方式为ajax-post请求 url："GetBookList" 表示所请求ajax的后台方法，page：true表示开启分页
后台控制器方法：
[HttpPost]
public ActionResult GetBookList()
{
try
{
//接收前端传来的分页参数
PageIndex = Convert.ToInt32(Request.Form["page"]);
PageSize = Convert.ToInt32(Request.Form["limit"]);
var SearchText = Request.Form["data"] == null ? "" : Request.Form["data"];
var resData = new BookBLL().GetBookListPage(PageIndex, PageSize, SearchText);
BookRes result = new BookRes();
result.code = 0;
result.msg = "";
result.count = resData.count;
result.data = resData.data;
return Json(result, JsonRequestBehavior.AllowGet);
}
catch (Exception ex)
{
BookRes result = new BookRes();
result.code = 404;
result.msg = "Error";
result.count = 0;
result.data = null;
return Json(result, JsonRequestBehavior.AllowGet);
}
} 参阅layui官方文档，前端需要的返回值为：
code：状态码
msg：返回消息
count：数据总行数（分页用）
data：返回的数据list集合数据查询BLL层代码：
（Ps:本人一直做asp.net开发，故mvc、linq相关技能很差，仅处于满足功能阶段，一下代码仅供参考，以下代码仅供参考，写的很烂，不喜勿喷）
///
/// 分页获取图书列表
///
/// GetBookListPage(int PageIndex, int PageSize, string SearchText)
{
BookRes res = new BookRes();
using (FriendBook2Entities db = new FriendBook2Entities())
{
var book = db.Book;
var type = db.Book_Type;
var auther = db.Book_Author;
var list = from bk in book
join tp in type on bk.TypeId equals tp.TypeId
join au in auther on bk.AuthorId equals au.AuthorId
select new VM_Book()
{
BookId = bk.BookId,
BookName = bk.BookName,
BookNo = bk.BookNo,
TypeName = tp.TypeName,
TypeId = tp.TypeId + "",
AuthorName = au.AuthorName,
Intro = bk.Intro,
Cover = bk.Cover,
IsFree = bk.IsFree,
IsFinish = bk.IsFinish == true ? "已完结" : "连载中",
WordCount = bk.WordCount,
ClickCount = bk.ClickCount,
DownloadCount = bk.DownloadCount,
CreateTime = bk.CreateTime,
UpdateTime = bk.UpdateTime,
IsDelete = bk.IsDelete,
};
//拼接查询条件
if (SearchText.Trim() != string.Empty)
{
if (SearchText.IndexOf("cted:") > 0)
{
var types = SearchText.Substring(SearchText.IndexOf("selected:") + 9);
SearchText = SearchText.Substring(0, SearchText.IndexOf("selected"));
if (SearchText != null && SearchText != "")
{
list = list.Where(p => p.BookName.Contains(SearchText) && p.TypeId == types);
}
else
{
list = list.Where(p => p.TypeId == types);
}
}
else
{
list = list.Where(p => p.BookName.Contains(SearchText) || p.AuthorName.Contains(SearchText) || p.Intro.Contains(SearchText) || p.TypeName.Contains(SearchText));
}
}
//获取总数据条数
res.count = list.Count();
//分页
list = list.OrderByDescending(p => p.CreateTime).Skip(PageSize * (PageIndex - 1)).Take(PageSize);
List result = new List();
result = list.Select(p => new VM_Book()
{
BookId = p.BookId,
BookName = p.BookName,
BookNo = p.BookNo,
TypeName = p.TypeName,
TypeId = p.TypeId,
AuthorName = p.AuthorName,
Intro = p.Intro,
Cover = p.Cover,
IsFree = p.IsFree,
IsFinish = p.IsFinish,
WordCount = p.WordCount,
ClickCount = p.ClickCount,
DownloadCount = p.DownloadCount,
CreateTime = p.CreateTime,
UpdateTime = p.UpdateTime,
IsDelete = p.IsDelete,
}).ToList();
res.data = result;
}
return res;
} Model层代码：
（Ps:个人觉得其实model层没必要贴出来，太基础）
namespace FriendBook2._0.Admin.Models
{
public class BookRes
{
public int code { get; set; }
public string msg { get; set; }
public int count { get; set; }
public List data { get; set; }
}
public class VM_Book
{
//SELECT TOP(5) BookNo,BookId,TypeId,BookName,AuthorId,Intro,Cover,IsFree,IsFinish,WordCount,ClickCount,DownloadCount,CreateTime,UpdateTime,IsDelete,* FROM dbo.Book
///
/// 图书ID
///
public Guid BookId { get; set; }
///
/// 图书编号
///
public int BookNo { get; set; }
///
/// 类别ID
///
public string TypeId { get; set; }
///
/// 类别名称
///
public string TypeName { get; set; }
///
/// 作者ID
///
public string AuthorId { get; set; }
///
/// 作者名称
///
public string AuthorName { get; set; }
///
/// 书名
///
public string BookName { get; set; }
///
/// 简介
///
public string Intro { get; set; }
///
/// 封面图片
///
public string Cover { get; set; }
///
/// 是否免费
///
public bool IsFree { get; set; }
///
/// 是否已完结
///
public string IsFinish { get; set; }
///
/// 总字数
///
public int WordCount { get; set; }
///
/// 点击量
///
public int ClickCount { get; set; }
///
/// 下载量
///
public int DownloadCount { get; set; }
///
/// 创建时间
///
public DateTime CreateTime { get; set; }
///
/// 修改时间
///
public Nullable UpdateTime { get; set; }
///
/// 是否删除
///
public bool IsDelete { get; set; }
}
以上，为layui表格使用一个简单demo
联系方式：
wechat&QQ&Tel：13501715983（如查不到请加QQ：631931078或352167311）
个人邮箱：[email protected]
如有问题或改进地方请多多指点，本文为个人原创，转载请加以说明