layui分页完整示例c# MVC
程序员文章站
2022-03-21 21:45:14
...
1.前台视图所有代码
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>table模块快速使用</title>
<link href="~/Scripts/jsTools/layui/css/layui.css" rel="stylesheet" media="all" />
</head>
<body>
<table id="demo" lay-filter="test"></table>
<script src="~/Scripts/jsTools/layui/layui.js"></script>
<script>
layui.use('table', function () {
var table = layui.table;
//第一个实例
table.render({
elem: '#demo'
, height: 312
, url: '/Home/GetTestJson/' //数据接口
, page: true //开启分页
, cols: [[ //表头
{ field: 'id', title: 'ID', width: 80, sort: true, fixed: 'left' }
, { field: 'username', title: '用户名', width: 80 }
, { field: 'sex', title: '性别', width: 80, sort: true }
, { field: 'city', title: '城市', width: 80 }
, { field: 'sign', title: '签名', width: 177 }
, { field: 'experience', title: '积分', width: 80, sort: true }
, { field: 'score', title: '评分', width: 80, sort: true }
, { field: 'classify', title: '职业', width: 80 }
, { field: 'wealth', title: '财富', width: 135, sort: true }
]]
});
});
</script>
</body>
</html>2.后台控制器代码
public class HomeController : Controller
{
public ActionResult RightDefalt()
{
return View();
}
/// <summary>
/// 此模式走不通
/// </summary>
/// <returns></returns>
[HttpPost]
public JsonResult PxbmbDataPaging(int page, int limit, int pxid)
{
//此处用匿名类 等同于实体类
var resut = new { code = 0, count = 2,
data =new []{
new {id=10000,username="user - 0",sex="女",city="城市 - 0",sign="签名 - 0",experience=255,logins=24,wealth=82830700,classify="作家",score=57},
new {id=10002,username="user - 0",sex="女",city="城市 - 0",sign="签名 - 0",experience=255,logins=24,wealth=82830700,classify="作家",score=57},
},
msg = "Get Data Success！" };
return Json(resut);
}
/// <summary>
/// 正确的
/// </summary>
/// <param name="page">页码</param>
/// <param name="limit">每页显示的条数</param>
/// <returns></returns>
public string GetTestJson(int page, int limit) {
//此处用匿名类 等同于实体类
var resut = new { code = 0, count = 2,
data =new []{
new {id=10000,username="user - 0",sex="女",city="城市 - 0",sign="签名 - 0",experience=255,logins=24,wealth=82830700,classify="作家",score=57},
new {id=10002,username="user - 0",sex="女",city="城市 - 0",sign="签名 - 0",experience=255,logins=24,wealth=82830700,classify="作家",score=57},
},
msg = "Get Data Success！" };
//核心点Newtonsoft.Json.JsonConvert.SerializeObject 用mvc自带的json不行
return Newtonsoft.Json.JsonConvert.SerializeObject(resut);
}
}3.运行效果
4.易出现错误处
核心点Newtonsoft.Json.JsonConvert.SerializeObject 用mvc自带的json不行
如果此条博客帮助到了你请伸出你的小手点个赞不要积分。
上一篇： Vim 80列布局问题
下一篇： H5移动端弹幕动画实现