0
回答
一个页面中切换表格时分页栏对应其表格的数据
华为云实践训练营,热门技术免费实践!>>>   

jsp页面有未读反馈和已读反馈 两个表格,现在切换表格时,下面的分页栏只对未读反馈起效果,当表格切换到已读反馈时,分页栏还是作用于未读反馈表格.求帮忙解决!!!

页面代码如下:

<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<link rel="stylesheet" type="text/css" href="${ctx}/static/css/feedback/feedback.css">

<div class="appMain">
<div class="appLeft">
<!-- 主要内容区域 -->
    <div class="mainContent">
<div class="feedback">
<div class="feedbackMain">
<ul>
<li onclick="tab('tab1')" class="navCurrent" id="navli0">未读反馈</li>
<li onclick="tab('tab2')" id="navli1">已读反馈</li>
</ul>
<div class="tabList">
<div>
<ol id="tab1" style="display: block;">
<%-- <li>
<div clsass="feedbackTop">
<h2></h2>
<p></p>
</div>
<div class="feedMain">
<p></p>
</div>
<img src="${ctx}/static/images/gray.png" class="hideImg">
</li> --%>
</ol>
</div>

<div>
<ol id="tab2" style="display: none;">
<%-- <li>
<div class="feedbackTop">
<h2></h2>
<p></p>
</div>
<div class="feedMain">
<p></p>
</div>
<img src="${ctx}/static/images/gray.png" class="hideImg">
</li> --%>
</ol>
</div>

</div>
</div>
</div>
</div>

<br><div id="pageFooter"></div> 

<!-- 主要内容区域结束 -->

    </div>
        
    <!-- 右边搜索栏 -->
<div class="appRight" id="feedBakForm">
<div class="rightMain">
    <ul>
    <li>
    <h2>搜索</h2>
    </li>
    <li>
    <h3>关键字搜索:</h3>
    <input type="text" name="keywords" placeholder="请输入关键字" />
    </li>
    <li>
    <h3>时间范围:</h3>
    <input type="text" readonly name="startTime" onclick="laydate()" placeholder="开始时间"/>
    <input type="text" readonly name="endTime" onclick="laydate()" placeholder="结束时间"  />
    </li>
    <li>
    <h3>邮箱账号搜索:</h3>
    <input type="text"  name="email" placeholder="请输入邮箱账号" />
    </li>
    </ul>
    <a class="btn" style="margin-left: 10px;" id="feedBackSearch">确认搜索</a>
    </div>
   
    <%-- <div class="rightMain">
    <ul class="detail">
    <li>
    <h2>批量处理</h2>
    </li>
    <li>
    <h3 class="showImg">批量处理</h3>
    </li>
    <li>
    <a data-type="read" class="editFeedback" href="${ctx}/admin/feedback/list" data-id="">标记为已处理</a>
    </li>
    <li>
    <a data-type="del" class="delFeedback" href="${ctx}/admin/feedback/list" data-id="">删除</a>
    </li>
    </ul>
    </div> --%>
    </div>
   
</div>





<script type="text/javascript" src="${ctx}/static/js/laydate/laydate.js"></script>
<script type="text/javascript" src="${ctx}/static/js/laypage/laypage.js"></script>
<script type="text/javascript">
    var pageSign = true;
    var FeedBackService = {
   
        init: function (pageIndex) {
            var me = this;
            var params = ServiceUtils.getInputDomain('feedBakForm');
            params.pageIndex = pageIndex || 1;
            ServiceHttp.execute('${ctx}/admin/feedback/list?_=' + new Date().getTime(), params, function (cb) {
                if (cb.success) {
                    me.setData(cb.result.data || []);
                    me.setPage(cb.result.totalPages);
                } else {
                    bootbox.alert(cb.message);
                }
            })
        },
        setData: function (data) {
            var me = this;
            $('#tab1').html('');
            var html = '';
            $.each(data, function (index, value) {
                html += '<li>';
                html += '<div class="feedbackTop">';
                html += '<h2>' + (value.email || '') + '</h2>';
                html += '<p>' + (value.createTime || '') + '</p>';
                html += '</div>';
                html += '<div class="feedMain">';
                html += '<p>' + (value.content || '') + '</p>';
                html += '</div>';
                html += '<img src="${ctx}/static/images/gray.png" class="hideImg">';
                html += '</li>';
            });
            
            $('#tab1').html(html);
           
        },
        
         setPage: function (pages) {
            var me = this;
            if (pageSign) {
                laypage({
                    cont: 'pageFooter',
                    pages: pages || 0,
                    skip: true,
                    groups: 3,
                    jump: function (obj, first) {
                        if (!first) {
                            me.init(obj.curr);
                        }
                    }
                });
            }
            pageSign = false;
        } ,
        
        reload:function(){
            pageSign=true;
            FeedBackService.init(1);
        }
        
    }
    
    var FeedBack2Service = {
            init: function (pageIndex) {
                var me = this;
                var params = ServiceUtils.getInputDomain('feedBakForm');
                params.pageIndex = pageIndex || 1;
                ServiceHttp.execute('${ctx}/admin/feedback/list2?_=' + new Date().getTime(), params, function (cb) {
                    if (cb.success) {
                        me.setData(cb.result.data || []);
                        me.setPage(cb.result.totalPages);
                    } else {
                        bootbox.alert(cb.message);
                    }
                })
            },
            setData: function (data) {
                var me = this;
                $('#tab2').html('');
                var html = '';
                $.each(data, function (index, value) {
                    html += '<li>';
                    html += '<div class="feedbackTop">';
                    html += '<h2>' + (value.email || '') + '</h2>';
                    html += '<p>' + (value.createTime || '') + '</p>';
                    html += '</div>';
                    html += '<div class="feedMain">';
                    html += '<p>' + (value.content || '') + '</p>';
                    html += '</div>';
                    html += '<img src="${ctx}/static/images/gray.png" class="hideImg">';
                    html += '</li>';
                });
                $('#tab2').html(html);
                
            },
            
             setPage: function (pages) {alert(111)
                var me = this;
                if (pageSign) {
                    laypage({
                        cont: 'pageFooter',
                        pages: pages || 0,
                        skip: true,
                        groups: 3,
                        jump: function (obj, first) {
                            if (!first) {
                                me.init(obj.curr);
                            }
                        }
                    });
                }
                pageSign = false;
            }, 
            
            reload:function(){
                pageSign=true;
                FeedBack2Service.init(1);
            }
            
        }
    
    
      $(function () {
        // FeedBackService.init(1);


        $('#feedBackSearch').on('click', function () {
            pageSign = true;
            FeedBackService.init(1);
            FeedBack2Service.init(1);
        })
    })  
    
    
</script>
<script type="text/javascript" src="${ctx}/static/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript">
function tab(pid) {
        var tabs = ["tab1", "tab2"];
        for (var i = 0; i < 7; i++) {
            if (tabs[i] == pid) {
                document.getElementById(tabs[i]).style.display = "block";
                $('#navli'+i).eq(0).addClass("navCurrent");
                 if(tabs[i]=='tab1'){
                FeedBackService.init(1);
                }else{
                FeedBack2Service.init(1);
                } 
            } else {
                document.getElementById(tabs[i]).style.display = "none";
                $('#navli'+i).eq(0).removeClass("navCurrent");
            }
        }
    };
    
    /*  laydate({
    elem: '#hello', //目标元素。由于laydate.js封装了一个轻量级的选择器引擎,因此elem还允许你传入class、tag但必须按照这种方式 '#id .class'
    event: 'focus', //响应事件。如果没有传入event,则按照默认的click
    festival: true //显示节日
});  */
</script> 






举报
顶部