Java后台实现同一个页面实现多个分页效果(经验之谈)

╰半橙微兮° 2021-12-10 00:59 513阅读 0赞

### 同一个加载页实现多个分页功能 ###

*  页面效果如图
 *   *   *  页面设计
         *   *  查看详情点击按钮
             *  按钮触发事件
     *  内容显示DIV
 *  引入最为关键的JS

# 页面效果如图 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lpaHVhaXlhbg_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lpaHVhaXlhbg_size_16_color_FFFFFF_t_70 1]  
整体的分页效果如图所示,大的分页效果这里就不给与实现的讲解过程了,在这里我来讲解第二个隐藏的DIV的分页实现  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lpaHVhaXlhbg_size_16_color_FFFFFF_t_70 2]

### 页面设计 ###

#### 查看详情点击按钮 ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lpaHVhaXlhbg_size_16_color_FFFFFF_t_70 3]

#### 按钮触发事件 ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lpaHVhaXlhbg_size_16_color_FFFFFF_t_70 4]  
隐藏代码DIV

## 查看详情的弹窗
    <div id="see_detail">
        <div class="see_detail_content">
            <div class="close_details" onclick="close_seesetail()"> [关闭]</div>
            <div style="margin: 20px; height: 500px;overflow: auto;">
                <table id="contenttext" cellpadding="0" cellspacing="0" border="0" class="stdtable" id="dyntable" style="width: 100%;text-align: center;">
    
                </table>
                <ul id="jqPaginator" class="pagination" align ="right"></ul>
            </div>
        </div>
    </div>

JS代码实现

## 内容显示DIV ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lpaHVhaXlhbg_size_16_color_FFFFFF_t_70 5]

## 查看详情的弹窗
    <div id="see_detail">
        <div class="see_detail_content">
            <div class="close_details" onclick="close_seesetail()"> [关闭]</div>
            <div style="margin: 20px; height: 500px;overflow: auto;">
                <table id="contenttext" cellpadding="0" cellspacing="0" border="0" class="stdtable" id="dyntable" style="width: 100%;text-align: center;">
                </table>
                <ul id="jqPaginator" class="pagination" align="right"></ul>
            </div>
        </div>
    </div>

# 引入最为关键的JS #

链接：[https://pan.baidu.com/s/1aThHabE6Hel-dslViygpVQ][https_pan.baidu.com_s_1aThHabE6Hel-dslViygpVQ]  
提取码：7p29

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lpaHVhaXlhbg_size_16_color_FFFFFF_t_70]: /images/20211209/893bc5bfa2994a839ddc905ee3f97834.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lpaHVhaXlhbg_size_16_color_FFFFFF_t_70 1]: /images/20211209/53b3d8ed91a74f4c96cd79d61134eee5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lpaHVhaXlhbg_size_16_color_FFFFFF_t_70 2]: /images/20211209/854d1d90edc34622ab98fb793f43c907.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lpaHVhaXlhbg_size_16_color_FFFFFF_t_70 3]: /images/20211209/b38196ce6f014da1af999b35b5212b02.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lpaHVhaXlhbg_size_16_color_FFFFFF_t_70 4]: /images/20211209/be7b344feac24ef4b53e72e03936dda5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lpaHVhaXlhbg_size_16_color_FFFFFF_t_70 5]: /images/20211209/ff91a04687c9461ca07491ea36a5e9a0.png
[https_pan.baidu.com_s_1aThHabE6Hel-dslViygpVQ]: https://pan.baidu.com/s/1aThHabE6Hel-dslViygpVQ