表(table)单(list)等数据显示底部跳转到XX页和每页显示多少数据HTML代码
程序员文章站
2022-06-08 18:27:36
...
很多时候我们想要下面这种效果图,我在这里提供一种HTML的代码方式,由于大家的后端语言不同,我就不提供后台代码了。
<table align="center" cellspacing="0" cellpadding="0" border="0" width="100%">
<tbody><tr>
<td height="23" align="center" class="Space" colspan="18">
<table align="center" cellspacing="1" cellpadding="1" border="0" width="100%" style="Zt_Wdtdfy">
<tbody><tr>
<td align="right">
<div class="GD_PAGE_LIST">
<div class="GD_PAGES"><p>每页显示:</p>
<span class="on"> <a onclick="javascript:submitPageForm('queryDeliveryOrderBuyForm',0,10); return false;" href="javascript:;">10</a></span><span class="over"> <a onclick="javascript:submitPageForm('queryDeliveryOrderBuyForm',0,20); return false;" href="javascript:;">20</a></span><span class="over"> <a onclick="javascript:submitPageForm('queryDeliveryOrderBuyForm',0,30); return false;" href="javascript:;">30</a></span>
</div>
<div class="GD_PAGECOUNT">
<span>首页</span>
<span>上一页</span>
<span>下一页</span><span>尾页</span>
共0条记录
到第<input type="text" class="GD_PAGECOUNTtext" value="0" size="3" name="cur_page_no">页 <input type="button" class="GD_PAGECOUNTbt" size="3" value="确定" style="cursor:hand" onclick="javascript:submitPageForm('queryDeliveryOrderBuyForm',document.queryDeliveryOrderBuyForm.cur_page_no.value,10)">
</div>
</div>
</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
我解释一下吧:红色粗线的部分是一个table,和具体的数据表(马赛克所在的表)是并列在一个父级DIV里面;A,B部分是table的tr(td),里面又嵌套了一个div,里面就是点击事件了,然后往后台穿参数。