ok-admin框架分页查询

效果图：

后台代码：

/// <summary>
/// 分页数据
/// </summary>
/// <param name="page"></param>
/// <param name="limit"></param>
/// <returns></returns>
public string LoadPageList(int page, int limit,SysUser where)
{
//实例化数据库上下文
YuanGongDb dbcontext = new YuanGongDb();
List<SysUser> data = null;
Expression<Func<SysUser, bool>> wherelambad = u => 1 == 1;//查询条件;
if (where.username != null && where.username != "")
{
//Contains模糊查找
wherelambad = wherelambad = u => u.username.Contains(where.username);
}
if (where.Realname != null && where.Realname != "")
{
wherelambad = wherelambad = u => u.Realname==where.Realname;
}
int count = 0;
data = dbcontext.SysUser.Where(wherelambad).OrderBy(o => o.createtime)
.Skip((page - 1) * limit).Take(limit).ToList();
count = dbcontext.SysUser.Where(wherelambad).Count();
var result = new
{
code = 0,
count = count,
data = data,
msg = ""
};
return JsonConvert.SerializeObject(result);
}

前端代码：

@{
ViewBag.Title = "员工列表";
Layout = null;
}

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>员工列表</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="/css/oksub.css">
<script type="text/javascript" src="/lib/loading/okLoading.js"></script>
</head>
<body>
<div class="ok-body">

<div class="layui-row">
<form class="layui-form layui-col-md12 ok-search">
<input class="layui-input" placeholder="用户名" autocomplete="off" name="username">

<input class="layui-input" placeholder="姓名" autocomplete="off" name="Realname">
<button class="layui-btn" lay-submit="" lay-filter="search">
<i class="layui-icon layui-icon-search"></i>
</button>
</form>
</div>

<table class="layui-hide" id="tableId_user" lay-filter="tableFilter"></table>
</div>

<script src="/lib/layui/layui.js"></script>
<script>
layui.use(["element", "table", "form", "laydate", "okLayer", "okUtils", "okMock"], function () {
let table = layui.table;
let form = layui.form;
let laydate = layui.laydate;
let okLayer = layui.okLayer;
let okUtils = layui.okUtils;
okLoading.close();
let userTable = table.render({
elem: "#tableId_user",
url: "/UserList/LoadPageList",
limit: 10,
page: true,
toolbar: "#toolbarTpl",
size: "sm",
cols: [[
{ type: "checkbox" },
{ field: "username", title: "用户名" },
{ field: "Realname", title: "姓名" },
{ field: "phone", title: "手机号码" },
{ field: "depart", title: "部门" },
{ field: "createtime", title: "创建时间", width: 150 },
{ title: "操作", width: 80, align: "center", templet: "#operationTpl" }
]],
done: function (res, curr, count) {
console.log(res, curr, count);
}
});

form.on("submit(search)", function (data) {

userTable.reload({
where: data.field,
page: { curr: 1 }
});
return false;
});

table.on("toolbar(tableFilter)", function (obj) {
switch (obj.event) {
case "add":
add();
break;
case "batchDel":
batchDel();
break;
}
});

table.on("tool(tableFilter)", function (obj) {
let data = obj.data;
switch (obj.event) {
case "edit":
edit(data.id);
break;
case "del":
del(data.id);
break;
}
});

function add() {
okLayer.open("添加用户", "/UserList/Add", "90%", "90%", null, function () {
userTable.reload();
})
}
function edit(id) {
okLayer.open("编辑用户", "/UserList/Update?id=" + id, "90%", "90%", null, function () {
userTable.reload();
})
}

function del(id) {
okLayer.confirm("确定要删除吗？", function () {
okUtils.ajax("/UserList/Delete", "post", { idsStr: id }, true).done(function (response) {
okUtils.tableSuccessMsg(response.msg);
}).fail(function (error) {
console.log(error)
});
})
}
})</script>

<script type="text/html" id="toolbarTpl">
<div class="layui-btn-container">
<div class="layui-inline" lay-event="add"><i class="layui-icon layui-icon-add-1"></i></div>
<div class="layui-inline" lay-event="batchDel"><i class="layui-icon layui-icon-delete"></i></div>
</div>
</script>

@*<script type="text/html" id="statusTpl">
{{# if(d.status == 0){ }}
<span class="layui-btn layui-btn-normal layui-btn-xs">启用</span>
{{# } else if(d.status == 1) { }}
<span class="layui-btn layui-btn-warm layui-btn-xs">停用</span>
{{# } else if(d.status == 2) { }}
<span class="layui-btn layui-btn-danger layui-btn-xs">删除</span>
{{# } }}
</script>*@

posted @ 2022-05-14 11:18 .net&new 阅读(158) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

ok-admin框架分页查询

公告