给你个测试页：
(在此之前建议楼主下载苏沈小雨的CSS样式表，如果楼主打算长期做网页的话)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 10 Transitional//EN" ">可使用占位符从数据集中的字段导入HTML以在分页报表中使用。
可使用占位符从数据集中的字段导入HTML以在分页报表中使用。默认情况下，占位符表示纯文本，因此需要将占位符的标记类型改为HTML。
分页是指在web页面有大量数据需要显示时，当一页的内容太多不利于阅读和不利于数据提取的情况下，可以分为多页进行显示。给你个实例看看吧：
<php
include("conn/connphp");
$pagesize=2;
$url=$_SERVER["REQUEST_URI"];
$url=parse_url($url);
$url=$url['path'];
$sql="select from tb_info ";
$query=mysql_query($sql);
//print_r($query);
$rows=mysql_num_rows($query);
$pageval=1;
$page=($pageval-1)$pagesize;
if(@$_GET['page']){
$pageval=$_GET['page'];
if ($pageval<=0){
$pageval=1;
}
$page=($pageval-1)$pagesize;
}
echo "共 $rows 条";
$pagenum=ceil($rows/$pagesize);
for($i=1;$i<=$pagenum;$i++){
if ($pageval==$i){
echo "<font color=#ff0000>"$i"</font> ";
}else{
echo "<a href=$urlpage="$i">$i</a> ";
}
}
if($rows>$pagesize){
if ($pageval==1){
echo "<a href=$urlpage="($pageval+1)">下一页</a>";
}else{
if ($pageval$pagesize>=$rows){
echo "<a href=$urlpage="($pageval-1)">上一页</a>";
}else{
echo "<a href=$urlpage="($pageval-1)">上一页</a> ""<a href=$urlpage="($pageval+1)">下一页</a>";
}
}
}
echo "<br>";
$sqli="select from tb_info limit $page,$pagesize";
$que=mysql_query($sqli);
while($row=mysql_fetch_array($que)){
echo $row['type']"<br>"$row['content']"<br>";
echo str_repeat("_",40)"<br>";
}
>如果单单是HTML静态页面，没有后台技术，那么每页显示就是你设计20就可以啦，我建议是可以在分页上加超链接或者在按钮上加上热点，锚点都可以，如果是结合后台技术实现的动态页面，那样子可以在后台查询数据中进行查询限制，那样子页面展示就可以控制，至于页面跳转做好点击事件就可以啦，希望可以帮到您html 前端分页代码怎么写,纯JavaScript实现的前端分页代码 转载
2021-06-19 11:07:20
守望之鹰
码龄3年
关注
最近我遇到问题，就是控制table表格的行不要太长，这里最简单方便的方法就是用前端分页，控制表格显示的行数，在网上找了一番，终于找到一个比较合适的前端分页代码。示例如下：
html代码：
//全局变量
var numCount; //数据总数量
var columnsCounts; //数据列数量
var pageCount; //每页显示的数量
var pageNum; //总页数
var currPageNum ; //当前页数
//页面标签变量
var blockTable;
var preSpan;
var firstSpan;
var nextSpan;
var lastSpan;
var pageNumSpan;
var currPageSpan;
windowοnlοad=function(){
//页面标签变量
blockTable = documentgetElementById("blocks");
preSpan = documentgetElementById("spanPre");
firstSpan = documentgetElementById("spanFirst");
nextSpan = documentgetElementById("spanNext");
lastSpan = documentgetElementById("spanLast");
pageNumSpan = documentgetElementById("spanTotalPage");
currPageSpan = documentgetElementById("spanPageNum");
numCount = documentgetElementById("blocks")rowslength - 1; //取table的行数作为数据总数量(减去标题行1)
alert(numCount);
columnsCounts = blockTablerows[0]cellslength;
pageCount = 5;
pageNum = parseInt(numCount/pageCount);
if(0 != numCount%pageCount){
pageNum += 1;
}
firstPage();
};数据分页，我以前有用过基于jquery的datatables对table列表进行分页, 效果还挺不错。
所以，要看你针对的元素，然后在github上搜索js pagination，会有很多不同用途的项目，选择适合自己的就行。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）