前言:个人转码小说网站:友书-绿色、纯净、无广告,欢迎广大小说阅读爱好者同行来本网站看小说,书友交流群:580462139(群主及管理均为资深90后程序猿哦)
正文:先来张效果图镇楼
如图,利用layui前端框架我们可以很简单的做出带分页的数据表格,并且表格支持表格内排序
前端代码:
<table class="layui-table" lay-data="{url:'GetBookList', method: 'post', page:true, id:'idTest'}" lay-filter="demo">
<thead>
<tr>
<th lay-data="{ field:'BookNo', title: 'ID',sort: true, width: '6%', sort: true, fixed: 'left', align: 'center' }">ID</th>
<th lay-data="{field:'TypeName', width:'6%', sort: true,align: 'center'}">类别</th>
<th lay-data="{field:'AuthorName', width:'8%', sort: true, align: 'center'}">作者</th>
<th lay-data="{field:'BookName', width:'8%',sort: true, align: 'center'}">书名</th>
<th lay-data="{field:'Intro', width:'22%',sort: true, align: 'center'}">简介</th>
<th lay-data="{field:'WordCount', width:'6%', sort: true,align: 'center'}">字数</th>
<th lay-data="{field:'ClickCount', width:'6%',sort: true, align: 'center'}">点击量</th>
<th lay-data="{field:'DownloadCount', width:'6%',sort: true, align: 'center'}">下载量</th>
<th lay-data="{field:'IsFinish', width:'8%',sort: true, align: 'center'}">完结状态</th>
<th lay-data="{ field: 'IsDelete', title: '是否上架', width: '8%',sort: true, templet: '#checkboxTpl', unresize: true, align: 'center' }">是否上架</th>
<th lay-data="{fixed: 'right', width:'8%', align:'center', toolbar: '#barDemo'}">操作</th>
</tr>
</thead>
</table>
<script type="text/html" id="barDemo">
<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
</script>
<script>
layui.use('table', function () {
var table = layui.table
, form = layui.form;
//监听表格复选框选择
table.on('checkbox(demo)', function (obj) {
console.log(obj)
});
//监听工具条
table.on('tool(demo)', function (obj) {
var data = obj.data;
if (obj.event === 'detail') {
//layer.msg('ID:' + data.BookNo + ' 的查看操作');
layer.open({
title: ['查看图书', 'font-size:18px;'],//title
type: 2,//入场方式
area: ['80%', '80%'],//页面比列
content: 'ViewBookInfo?BookId=' + data.BookId
});
} else if (obj.event === 'del') {
layer.confirm('真的删除行么', function (index) {
obj.del();
layer.close(index);
});
} else if (obj.event === 'edit') {
//layer.alert('编辑行:<br>' + JSON.stringify(data))
layer.open({
title: ['编辑图书', 'font-size:18px;'],//title
type: 2,//入场方式
area: ['80%', '80%'],//页面比列
content: 'EditBookInfo?BookId=' + data.BookId
});
}
});
//监听上下架操作
form.on('checkbox(lockDemo)', function (obj) {
$.post("ChangeBookStatus", { BookId: obj.value }, null, "Json");
});
//监听是否免费操作
form.on('checkbox(ChkIsFree)', function (obj) {
$.post("ChangeIsFreeStatus", { BookId: obj.value }, null, "Json");
});
var $ = layui.$, active = {
reload: function () {
var demoReload = $('#demoReload').val();
var selected = $("#selectType").val();
if (selected != undefined && selected != null && selected != ""&&selected!=0) {
demoReload = demoReload + "selected:" + selected;
}
//执行重载
table.reload('idTest', {
url: 'GetBookList'
, where: {
data: demoReload
}
});
}
};
//监听搜索点击按钮
$('.demoTable .layui-btn').on('click', function () {
var type = $(this).data('type');
active[type] ? active[type].call(this) : '';
});
});
</script>
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<VM_Book> result = new BookRes<VM_Book>();
result.code = 0;
result.msg = "";
result.count = resData.count;
result.data = resData.data;
return Json(result, JsonRequestBehavior.AllowGet);
}
catch (Exception ex)
{
BookRes<VM_Book> result = new BookRes<VM_Book>();
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相关技能很差,仅处于满足功能阶段,一下代码仅供参考,以下代码仅供参考,写的很烂,不喜勿喷)
/// <summary>
/// 分页获取图书列表
/// </summary>
/// <returns></returns>
public BookRes<VM_Book> GetBookListPage(int PageIndex, int PageSize, string SearchText)
{
BookRes<VM_Book> res = new BookRes<VM_Book>();
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<VM_Book> result = new List<VM_Book>();
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<T>
{
public int code { get; set; }
public string msg { get; set; }
public int count { get; set; }
public List<T> 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
/// <summary>
/// 图书ID
/// </summary>
public Guid BookId { get; set; }
/// <summary>
/// 图书编号
/// </summary>
public int BookNo { get; set; }
/// <summary>
/// 类别ID
/// </summary>
public string TypeId { get; set; }
/// <summary>
/// 类别名称
/// </summary>
public string TypeName { get; set; }
/// <summary>
/// 作者ID
/// </summary>
public string AuthorId { get; set; }
/// <summary>
/// 作者名称
/// </summary>
public string AuthorName { get; set; }
/// <summary>
/// 书名
/// </summary>
public string BookName { get; set; }
/// <summary>
/// 简介
/// </summary>
public string Intro { get; set; }
/// <summary>
/// 封面图片
/// </summary>
public string Cover { get; set; }
/// <summary>
/// 是否免费
/// </summary>
public bool IsFree { get; set; }
/// <summary>
/// 是否已完结
/// </summary>
public string IsFinish { get; set; }
/// <summary>
/// 总字数
/// </summary>
public int WordCount { get; set; }
/// <summary>
/// 点击量
/// </summary>
public int ClickCount { get; set; }
/// <summary>
/// 下载量
/// </summary>
public int DownloadCount { get; set; }
/// <summary>
/// 创建时间
/// </summary>
public DateTime CreateTime { get; set; }
/// <summary>
/// 修改时间
/// </summary>
public Nullable<System.DateTime> UpdateTime { get; set; }
/// <summary>
/// 是否删除
/// </summary>
public bool IsDelete { get; set; }
}
以上,为layui表格使用一个简单demo
联系方式:
wechat&QQ&Tel:13501715983(如查不到请加QQ:631931078或352167311)
个人邮箱:13212644043@163.com
如有问题或改进地方请多多指点,本文为个人原创,转载请加以说明