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不行
如果此條博客幫助到了你請伸出你的小手點個贊不要積分。