使用layUI分页ajax数据,way.js数据双向绑定

157 阅读 0 评论 104 点赞

我是靠谱客的博主顺心大神，最近开发中收集的这篇文章主要介绍使用layUI分页ajax数据,way.js数据双向绑定，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

way.js数据双向绑定
github

前端

<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="__STATIC__/layui23/css/layui.css">
<script type="text/javascript" src="__STATIC__/layui23/layui.js"></script>
<script type="text/javascript" src="__STATIC__/layui23/way.js"></script>
</head>
<body>
<div id="pagedata">
<div way-repeat="some_list">
$$key - <span way-data="cat_id"></span>
</div>
</div>
<div id="paginate">
</div>
<script>
layui.use(['laypage', 'jquery'], function() {
var laypage = layui.laypage;
//执行一个laypage实例
laypage.render({
elem: 'paginate',
count: "{$count}",
limit: 20,
limits: [10, 20, 30, 40, 50],
jump: function(obj, first) {
//obj包含了当前分页的所有参数，比如：
console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
console.log(obj.limit); //得到每页显示的条数
//首次不执行
if (!first) {
//do something
}
ajax_get_data(obj.curr, obj.limit);
}
});
function ajax_get_data(p, p_n) {
layui.$.ajax({ // 使用layui模块化加载jquery：layui.$.
url: "{:url('index_data')}",
type: 'POST',
dataType: 'json',
data: {
p: p,
p_n: p_n,
},
complete: function(xhr, textStatus) {
//called when complete
},
success: function(data, textStatus, xhr) {
way.set("some_list", data.data.list);
},
error: function(xhr, textStatus, errorThrown) {
//called when there is an error
}
});
}
});
</script>
</body>
</html>

后端


public function index()
{
$count = Db::table('tp_goods')->count();
$this->assign('count', $count);
return view();
}
public function index_data()
{
$p
= input('p') ?? 1;
$p_n
= input('p_n') ?? config('paginate.list_rows');
$list
= Db::table('tp_goods')->order('goods_id ASC')->limit(($p - 1) * $p_n, $p_n)->select();
$count
= Db::table('tp_goods')->count();
$all_page = ceil($count / $p_n);
$data
= [
'p'
=> $p,
'p_n'
=> $p_n,
'count'
=> $count,
'all_page' => $all_page,
'list'
=> $list,
];
return json(['code' => 0, 'msg' => '加载成功！', 'data' => $data]);
}