Jquery分页自行总结篇

缺乏、安全感 2022-04-25 04:24 125阅读 0赞

前语：

针对目前分页插件众多：不知哪一个实用或者哪一个容易上手，先整理一篇关于我的理解的分页，改方法由自己实验验证而来，不一定十分正确！

实现前提：需要分页的数据由<tr><td><td><tr>标签绘画出来的！暂时未验证由<ul><li><li><li><ul>标签绘画出的页面，可自行验证哦！

实现方法：（动态加载完页面后通过标签实现分页）

1.例如我又如下页面：我们需要将<tbody></tbody>标签中的内容进行分页，即安装如下步骤即可：

<table border="0" cellspacing="0" cellpadding="0">
    					<thead>
    						<tr>
    							<th>会员</th>
    							<th>手机号</th>
    							<th>车品牌型号</th>
    							<th>车牌号</th>
    							<th>预约时间</th>
    							<th>预约服务</th>
    						</tr>
    					</thead>
    					<tbody id="content_page">
    
    					 <tr>
                            <td>张三</td>
                            <td>1234567910</td>
                            <td>哈弗H6</td>
                            <td>湘AD81111</td>
                            <td>2019-04-19</td>
                            <td>美容冲洗</td>
                            </tr>
                            <tr>
                            <td>王五</td>
                            <td>15576655122</td
                            ><td>别克</td>
                            <td>湘AE11111</td>
                            <td>2019-05-14</td>
                            <td>维修保养</td>
                             </tr>
                           </tbody>
    				</table>

1.1在</table>便签下增加如下html代码：

<div id="wrap" class="page_btn clear"></div>
    			</div>
    			<div id="info_modal" class="tips_info"></div>
    		</div>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1OTgxOTk2_size_16_color_FFFFFF_t_70][]

1.2 将<tbody>标签的ID改为：content\_page 便于查询节点：（此处一定要修改哦）

![20190501113216581.png][]

1.3 在进行ajax请求动态加载数据渲染页面时，当成功回调后加载分页js：

$.getScript("js/page.js");

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1OTgxOTk2_size_16_color_FFFFFF_t_70 1][]

1.4导入 JS文件：（可在评论中留下邮箱 哦，或下载链接点击：[下载链接][Link 1]）

1.5可以在JS文件中修改需要分页的pagesize:

![20190501114136148.png][]

1.5最终实现效果如图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1OTgxOTk2_size_16_color_FFFFFF_t_70 2][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1OTgxOTk2_size_16_color_FFFFFF_t_70]: /images/20220210/936d7c1d942d41dd96629b018efa31bc.png
[20190501113216581.png]: /images/20220210/0105204f65af4dc0a863d4256e6b916e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1OTgxOTk2_size_16_color_FFFFFF_t_70 1]: /images/20220210/03a9c9e94e5545a5a4003bc95387f3c7.png
[Link 1]: https://download.csdn.net/download/qq_35981996/11155306
[20190501114136148.png]: /images/20220210/8df1e0ea62024d09b3e9098306baed0e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1OTgxOTk2_size_16_color_FFFFFF_t_70 2]: /images/20220210/c56c15d1066a436796b548f57e3a455f.png