layui数据表格之运用laypage分页的前端代码

最新推荐文章于 2023-09-06 16:27:45 发布
AdolfQiu
最新推荐文章于 2023-09-06 16:27:45 发布
阅读量343
点赞数 1
文章标签： jquery html5
本文链接：https://blog.csdn.net/AdolfQiu/article/details/109319159
版权
js 专栏收录该内容
8 篇文章 1 订阅
订阅专栏
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html>
<html>
<head>
    <title>图片浏览</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="shortcut icon" href="${contextPath}/p2029/resource/images/favicon.ico">
    <link rel="stylesheet" href="${contextPath}/external/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="${contextPath}/resource/css/layui-dreamweb.css">
    <link rel="stylesheet" href="${contextPath}/resource/css/layui-list.css" media="all">
    <link rel="stylesheet" href="${contextPath}/resource/css/layui-list-${portal_skin}.css" media="all">
    <link rel="stylesheet" href="${contextPath}/external/menu-font/iconfont.css">
    <link rel="stylesheet" href="${contextPath}/resource/css/layui-card.css" media="all">
    <link rel="stylesheet" href="${contextPath}/resource/css/layui-card-blue.css" media="all">
    <script type="text/javascript" src="${contextPath}/external/jquery-1.12.4.min.js" charset="utf-8"></script>
    <script type="text/javascript" src="${contextPath}/external/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="${contextPath}/external/underscore/underscore-min.js" charset="utf-8"></script>
    <script type="text/javascript" src="${contextPath}/ctrl/xform/xform-init-script"></script>
    <script type="text/javascript" src="${contextPath}/resource/js/dreamweb-core.js" charset="utf-8"></script>
    <script type="text/javascript" src="${contextPath}/resource/js/validators.js"></script>
    <script type="text/javascript" src="${contextPath}/resource/js/public.js"></script>
    <script type="text/javascript" src="${contextPath}/external/jquery-slimScroll/jquery.slimscroll.js"
            charset="utf-8"></script>
    <script type="text/javascript" src="${contextPath}/external/tablednd/jquery.tablednd.js"></script>
    <script type="text/javascript" src="${contextPath}/resource/js/module/datagrid-base.js" charset="utf-8"></script>
    <script type="text/javascript" src="${contextPath}/resource/js/business-common.js" charset="utf-8"></script>
    <script type="text/javascript" src="${contextPath}/p2047/200703094408ImByb7RQyTbqUXQQ9g9/js/echarts/echarts.min.js"
            charset="utf-8"></script>


</head>
<body style="background-color: #fff">
<%--查询表单--%>
<form class="layui-form" lay-filter="datagrid-form" id="query_form" onsubmit="return false;">
    <div class="list-title datagrid-search">
        <div class="list-left">
            <div class="layui-inline"><input class="layui-input search-input" name="_content" placeholder="请输入检索内容"
                                             value="" autocomplete="off"><span class="search-span"><i
                    class="icon icon-search"></i></span></div>
            <button class="layui-btn list-btn layui-btn-default query-btn" type="button">检索</button>
            <button class="layui-btn list-btn layui-btn-primary query-clear" type="button">重置</button>
        </div>
        <div class="list-right">
            <i class="icon icon-set datagrid-op" op="customFields" title="自定义显示列"></i></div>
    </div>
    <div class="filter-item-list">
        <div class="list-screen filter-list">
            <div class="list-screen-show layui-form">
                <div class="layui-row">
                    <div class="layui-col-xl4 layui-col-ll4 layui-col-filter" cols="4">
                        <div class="layui-form-item"><label class="layui-form-label" title="活动类型">活动类型</label>
                            <div class="layui-input-block">
                            <select name="query_outType">
                                <option value = "" >请选择</option>
                                <option value="10" >调研</option>
                                <option value="20" >接待</option>
                                <option value="30" >会见</option>
                            </select>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-xl4 layui-col-ll4 layui-col-filter" cols="4">
                        <div class="layui-form-item"><label class="layui-form-label" title="主题">主题</label>
                            <div class="layui-input-block"><input type="text" name="query_bt" value=""
                                                                  control="controlTextarea" placeholder="主题"
                                                                  autocomplete="off"
                                                                  class="layui-input text-input"><span
                                    class="search-span-text hide"><i class="icon icon-clear"></i></span></div>
                        </div>
                    </div>
                    <div class="layui-col-xl4 layui-col-ll4 layui-col-filter" cols="4">
                        <div class="layui-form-item"><label class="layui-form-label" title="活动类型">活动日期</label>
                            <div class="layui-input-block">
                             <select name="query_startTime">
                                <option value="">请选择</option>
                            </select>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-xl4 layui-col-ll4 layui-col-filter" cols="4">
                        <div class="layui-form-item"><label class="layui-form-label" title="地点">地点</label>
                            <div class="layui-input-block"><input type="text" name="query_place" value=""
                                                                  control="controlTextarea" placeholder="地点"
                                                                  autocomplete="off"
                                                                  class="layui-input text-input"><span
                                    class="search-span-text hide"><i class="icon icon-clear"></i></span></div>
                        </div>
                    </div>
                    <div class="layui-col-xl4 layui-col-ll4 layui-col-filter" cols="4">
                        <div class="layui-form-item"><label class="layui-form-label" title="出席领导">出席领导</label>
                            <div class="layui-input-block"><input type="text" name="query_outUserName" value=""
                                                                  control="controlTextarea" placeholder="出席领导"
                                                                  autocomplete="off"
                                                                  class="layui-input text-input"><span
                                    class="search-span-text hide"><i class="icon icon-clear"></i></span></div>
                        </div>
                    </div>
                    <div class="layui-col-xl4 layui-col-ll4 layui-col-filter" cols="4">
                        <div class="layui-form-item"><label class="layui-form-label" title="图片名称">图片名称</label>
                            <div class="layui-input-block"><input type="text" name="query_picName" value=""
                                                                  control="controlTextarea" placeholder="图片名称"
                                                                  autocomplete="off"
                                                                  class="layui-input text-input"><span
                                    class="search-span-text hide"><i class="icon icon-clear"></i></span></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>
    </div>
</form>

<%--放置图片的table--%>
<table style="width: 100%;height: 80%;text-align:center;" id="imgTable"></table>

<%--分页插件位置--%>
<div id="laypage" class="pagestyle" style="text-align: center"></div>

<style>
    img.imgList {
        width: 150px;
        height: 130px;
    }

    p.title{
        text-decoration:underline;
        color: #0b78f0;
    }

</style>

<%--图片内容--%>
<script id="imgContent">
    {{#  layui.each(d, function(index, item){ }}
    {{#  if(index %3 ===0){ }}
     <tr>
     {{#  }}}
    <td>
    <img src="${contextPath}/ctrl/file/downloadImage?fileName={{item.filePath}}" onclick="openFile(this)" class="imgList"><br>
        <p class="title"><i>{{item.title}}</i></p>
    <p><i>地点：{{item.place}}</i></p>
    <p><i>出席领导: {{item.leader}}</i></p>
    </td>
    {{#  if(index %3 ===2){ }}
    </tr>
    {{#  }}}
    {{#  }); }}
</script>

<script>
    //初始化日期选择
    var years = JSON.parse('${year}');
    var startTimeContent = $("select[name='query_startTime']");
    for(var i=0;i<years.length;i++){
        var yearText = years[i];
        if (i == 0){
            startTimeContent.append('<option value="'+yearText.text+'" selected>'+yearText.text+'</option>');
         }else {
            startTimeContent.append('<option value="'+yearText.text+'" >'+yearText.text+'</option>');
        }
    };

    //初始化查询
    search();

    //执行查询的方法
    function search() {
        $("#imgTable").html("");
        var data = {
            "query_outType": $("select[name='query_outType']").val(),
            "query_bt": $("input[name='query_bt']").val(),
            "query_startTime": $("select[name='query_startTime']").val(),
            "query_place": $("input[name='query_place']").val(),
            "query_outUserName": $("input[name='query_outUserName']").val(),
            "query_picName": $("input[name='query_picName']").val()
        } || {};
        DSF.Utils.ajaxRequest("ctrl/oaOutManage/getActivityPic", data, function (result) {
            if(result.code == "200"){
                layui.use(['laytpl','laypage'], function(){
                    var data = result.data;
                    //渲染数据
                    //图片分页
                    layui.laypage.render({
                        elem: 'laypage'
                        ,count: data.length
                        ,limit:18
                        ,first: '首页'
                        ,last: '尾页'
                        ,prev: '<em>←</em>'
                        ,next: '<em>→</em>'
                        ,limits:[3,12,18,24]
                        ,layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip']
                        ,jump: function(obj, first){
                            var pictureHtml =data.slice(obj.curr*obj.limit - obj.limit, obj.curr*obj.limit);
                            layui.laytpl($("#imgContent").html()).render(pictureHtml, function (html) {
                                $("#imgTable").html(html);
                            });
                        }
                    });
                });
            }else {
                layuiError("查询活动图片失败");
            }
            layer.closeAll('loading');
        });
    }

    //点击查询按钮
    $(".query-btn").click(function () {
        search();
    });


    /**
     * 放大图片方法
     * @param e
     * @param photoimgId
     * @returns
     */
    function openFile(e){
        layer.open({
            type: 1,    
            title: false,
            closeBtn: 0,
            skin: 'layui-layer-nobg', //没有背景色
            shadeClose: true,
            content: '<img style="display: inline-block; width: 100%; height: 100%;" src="'+e.src+'">'
        });
    }

</script>


</body>
</html>