分类
Web 日记 笔记

JS分页与表生成

几年前有写过一个js分页插件传到github上,插件主要做了页码的生成。但实际开发中,其实还可以把表格生成一起做了,能减少很多重覆的工作。于是写了新的js分页插件,增加表格生成。

插件依赖jquery,表格需严格按规范,显示数据应该用tbody包含起来,变量声名如图:


使用方法:
html结构:

<form id="frm"></from>
<table id="tab">
<thead>
<tr class="text-c">
<th name="proposer">申请人</th>
<th name="merchant">商家</th>
<th name="merAgent">商家所属代理</th>
<th name="orderAmount">消费金额(元)</th>
<th name="downPayment">首付金额(元)</th>
<th name="installmentAmount">分期金额(元)</th>
<th name="installmentMonth">分期数</th>
<th name="orderStatus">订单状态</th>
<th name="verifyTime">审核日期</th>
<th name="opt">操作</th>
</tr>
</thead>
<tbody id="recorder">
</tbody>
</table>
<div id="paging"></div>

js调用:

var paging = new Paging("传入表单id", "表格id", "显示页码信息的div");
jquery.setQueryFun = function(page) {
// 查询实现
}
paging.query(); // 执行查询

该插件可以灵活扩展,自定义生成表格或样式。由于代码都有注释,这里只附上图简单说明:

可实现的效果:
基本的

自定义的

源码下载:paging

“JS分页与表生成”上的一条回复

paging样式:

.paging_panel {width: 100%; text-align: left;}
.paging_ul {list-style: none;font-size: 14px;border-radius: 5px;}
.paging_li {display: inline-block; margin-left: 5px; padding: 3px 10px 3px 10px; border: 1px solid #d0d0d0;border-radius: 5px;}
.paging_li_number {padding: 3px 10px 3px 10px; color: #000000; border: 1px solid #d0d0d0; background: #fff;border-radius: 5px;}
.paging_li_page {color: #fff; border: 1px solid #21a6a1; background: #21a6a1}
.paging_li_number_hover {cursor: pointer; color: #fff; border: 1px solid #21a6a1; background: #21a6a1}
.paging_li_start {color: #000000;border-radius: 5px;}
.paging_li_start_hover {cursor: pointer; color: #21a6a1}
.paging_li_end {color: #000000;border-radius: 5px;}
.paging_li_end_hover {cursor: pointer; color: #21a6a1};
.paging_li_total {padding: 0px 2px 0px 2px}
.paging_li_count {padding: 3px 10px 3px 10px; border: 1px solid #d0d0d0;border-radius: 5px;}
.paging_count {color: #21a6a1; font-weight: bold;}

发表评论

电子邮件地址不会被公开。