【Layui__分页和模板】分页和模板的整合使用

整合

 <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>layui分页和模板的整合使用</title>
    <link href="../lib/layui/css/layui.css" rel="stylesheet" />
</head>
<body>
    <div id="view"></div>
    <div id="pagingId"></div>
 
    <script src="../lib/layui/layui.js"></script>
    <script id="laytplId" type="text/html">
        <h3>{{ d.title }}</h3>
        <ul>
            {{#  layui.each(d.list, function(index, item){ }}
            <li>
                <span>{{ item.modname }}</span>
                <span>{{ item.alias }}：</span>
                <span>{{ item.site || '' }}</span>
            </li>
            {{#  }); }}
            {{#  if(d.list.length === 0){ }}
            无数据
            {{#  } }}
        </ul>
    </script>
    <script>
        var data = { //数据
            "title": "Layui常用模块"
            , "list": [{ "modname": "弹层", "alias": "layer", "site": "layer.layui.com" }, { "modname": "表单", "alias": "form" }]
        }
        layui.use(['laypage', 'laytpl'], function () {
            var laypage = layui.laypage;
            var laytpl = layui.laytpl;
            laypage.render({
                elem: 'pagingId'
                , count: 100 //数据总数，从服务端得到
                , jump: function (obj, first) {
                    //console.log(obj);
                    var getTpl = laytplId.innerHTML;
                    var view = document.getElementById('view');
                    data.title = "常用模块" + obj.curr; //模拟动态从服务器调取数据（常用模块+当前页数字）
                    laytpl(getTpl).render(data, function (html) {
                        view.innerHTML = html;
                    });
                }
            });
        });
    </script>
</body>
</html>

实际项目例子

     $(function () {
        initLayPage();
    });
 
    function initLayPage(pageConf) {
        //如果不是点击页数，则给默认分页参数，pageConf用于请求接口数据
        if (!pageConf) {
            pageConf = {};
            pageConf.pageSize = 10;
            pageConf.currentPage = 1;
            pageConf.state = $("#state").val();
            pageConf.selectText = $("#selectText").val();
        }
        //根据参数，1 请求接口，2 添加监听，3 渲染分页组件，4 填充数据
        $.post("/Manager/Messages/Search2", pageConf, function (data) {
            layui.use(['laypage', 'layer', 'laytpl', 'form'], function () {
                var laypage = layui.laypage;
                var laytpl = layui.laytpl;
                var form = layui.form;
                var layer = layui.layer;
 
                form.on('submit(search)', function (data) {
                    initLayPage();
                    return false;
                });
 
                laypage.render({    //渲染分页
                    elem: 'pagingId',
                    count: data.data.total,
                    curr: pageConf.currentPage,
                    limit: pageConf.pageSize,
                    first: "首页",
                    last: "尾页",
                    layout: ['count', 'prev', 'page', 'next', 'limit', 'skip'],
                    jump: function (obj, first) {
                        console.log("=========" + first + "=========" + obj.curr);
                        if (!first) {   //首次不执行，点击页数执行
                            pageConf.currentPage = obj.curr;
                            pageConf.pageSize = obj.limit;
                            pageConf.state = $("#state").val();
                            pageConf.selectText = $("#selectText").val();
                            initLayPage(pageConf);
                        }
                    }
                });
 
                var getTpl = laytplId.innerHTML;
                var view = document.getElementById('contentTbody');
                laytpl(getTpl).render(data, function (html) {   //填充数据
                    view.innerHTML = html;
                });
            })
        });
    }

posted @ 2020-05-04 13:21 一只桔子2233 阅读(753) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

阅读排行：
· 全程不用写代码，我用AI程序员写了一个飞机大战
· DeepSeek 开源周回顾「GitHub 热点速览」
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· 白话解读 Dapr 1.15：你的「微服务管家」又秀新绝活了

公告

昵称：一只桔子2233
园龄： 8年2个月
粉丝： 16
关注： 18

+加关注

2025年3月

日

一

二

三

四

五

六

Kikyo

纸上得来终觉浅，绝知此事要躬行。

【Layui__分页和模板】分页和模板的整合使用

整合

实际项目例子

公告

搜索

我的标签

随笔分类

随笔档案

阅读排行榜

最新评论

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8" />
	<title>layui分页和模板的整合使用</title>
	<link href="../lib/layui/css/layui.css" rel="stylesheet" />
	</head>
	<body>
	<div id="view"></div>
	<div id="pagingId"></div>

	<script src="../lib/layui/layui.js"></script>
	<script id="laytplId" type="text/html">
	<h3>{{ d.title }}</h3>
	<ul>
	{{# layui.each(d.list, function(index, item){ }}
	<li>
	<span>{{ item.modname }}</span>
	<span>{{ item.alias }}：</span>
	<span>{{ item.site \|\| '' }}</span>
	</li>
	{{# }); }}
	{{# if(d.list.length === 0){ }}
	无数据
	{{# } }}
	</ul>
	</script>
	<script>
	var data = { //数据
	"title": "Layui常用模块"
	, "list": [{ "modname": "弹层", "alias": "layer", "site": "layer.layui.com" }, { "modname": "表单", "alias": "form" }]
	}
	layui.use(['laypage', 'laytpl'], function () {
	var laypage = layui.laypage;
	var laytpl = layui.laytpl;
	laypage.render({
	elem: 'pagingId'
	, count: 100 //数据总数，从服务端得到
	, jump: function (obj, first) {
	//console.log(obj);
	var getTpl = laytplId.innerHTML;
	var view = document.getElementById('view');
	data.title = "常用模块" + obj.curr; //模拟动态从服务器调取数据（常用模块+当前页数字）
	laytpl(getTpl).render(data, function (html) {
	view.innerHTML = html;
	});
	}
	});
	});
	</script>
	</body>
	</html>

	$(function () {
	initLayPage();
	});

	function initLayPage(pageConf) {
	//如果不是点击页数，则给默认分页参数，pageConf用于请求接口数据
	if (!pageConf) {
	pageConf = {};
	pageConf.pageSize = 10;
	pageConf.currentPage = 1;
	pageConf.state = $("#state").val();
	pageConf.selectText = $("#selectText").val();
	}
	//根据参数，1 请求接口，2 添加监听，3 渲染分页组件，4 填充数据
	$.post("/Manager/Messages/Search2", pageConf, function (data) {
	layui.use(['laypage', 'layer', 'laytpl', 'form'], function () {
	var laypage = layui.laypage;
	var laytpl = layui.laytpl;
	var form = layui.form;
	var layer = layui.layer;

	form.on('submit(search)', function (data) {
	initLayPage();
	return false;
	});

	laypage.render({ //渲染分页
	elem: 'pagingId',
	count: data.data.total,
	curr: pageConf.currentPage,
	limit: pageConf.pageSize,
	first: "首页",
	last: "尾页",
	layout: ['count', 'prev', 'page', 'next', 'limit', 'skip'],
	jump: function (obj, first) {
	console.log("=========" + first + "=========" + obj.curr);
	if (!first) { //首次不执行，点击页数执行
	pageConf.currentPage = obj.curr;
	pageConf.pageSize = obj.limit;
	pageConf.state = $("#state").val();
	pageConf.selectText = $("#selectText").val();
	initLayPage(pageConf);
	}
	}
	});

	var getTpl = laytplId.innerHTML;
	var view = document.getElementById('contentTbody');
	laytpl(getTpl).render(data, function (html) { //填充数据
	view.innerHTML = html;
	});
	})
	});
	}