如果单单是HTML静态页面，没有后台技术，那么每页显示就是你设计20就可以啦，我建议是可以在分页上加超链接或者在按钮上加上热点，锚点都可以，如果是结合后台技术实现的动态页面，那样子可以在后台查询数据中进行查询限制，那样子页面展示就可以控制，至于页面跳转做好点击事件就可以啦，希望可以帮到您
这个主要得通过JAVASCRIPT来实现了你看到过切换的效果吧可以用那个代码来代替的只不过容器中装的不是,而是表格而已
还有我估计你想实现的是通过AJAX局部刷新来实现的貌似静态的分页不过这是跟服务交互的前者是没有交互的
页面在初始化加载数据较多时会非常耗时，如果只加载表格，用户再根据自己的需要通过条件查询数据，就会节约一些时间，提高用户体验，所以在初始化datagrid时想只加载表格不加载数据，做到数据与表格加载分离的效果。
经过实验发现，使用datagrid（）方法时，参数中只要有URL存在，都会自动调用一次加载数据，可设置url参数为null，则加载表格时就不会向后台发出请求；但是此时如果用户想重置页面条件，重新加载页面时，由于没有请求后台，只加载表格，则会发生页面条件清空，表格数据还在或者表格数据为空分页展示的记录却不为0的现象，所以也需要重置数据和分页参数，具体代码如下：
[javascript] view plain copy
/
dataGrid初始化表格
@param id datagrid的id
@param column 展示的列名
@param opt 设置自定义datagrid属性
/
function commonInitDataGrid(id, column, opt){
var initData =
{
"code":100,
"msg":"",
"data":{"totalDataCount":0,"totalPageCount":0,"list":[],"properties":{"footer": []}}
};
//校验参数
if(isEmpty(id) || isEmpty(column)){
jQuerymessageralert("系统提示", "系统错误，请联系技术人员！");
return;
}
//默认属性
var defaultOpt= {
"url": null,
"method": 'POST', //请求方式
"columns": column,
"width": documentbodyclientWidth < 756 756 - 18 : documentbodyclientWidth - 18,
"remoteSort": false,
"rownumbers": true,
"pagination": true,
"showFooter": true,
"fitColumns": true,
"pageNumber": 1,
"pageSize": 20,
"pageList": [10, 20, 30, 50, 100],
"singleSelect": true,
"striped": true,
"loadFilter": function (result) {
if (resultcode == "100") {
//解析json结果集，返回给datagrid
var obj =
{
"total": resultdatatotalDataCount,
"rows": resultdatalist,
"footer": resultdatapropertiesfooter
};
return obj;
} else {
jQuerymessageralert("系统提示", resultmsg);
return false;
}
}
}
if(!isEmpty(opt)){
//替换自定义属性
$extend(defaultOpt, opt);
}
//把属性与事件放到表格中，进行初始化
$("#" + id)datagrid(defaultOpt);
$("#" + id)datagrid('loadData', initData);
}
说明：1设置URL为null后，则每次调用此方法都只会加载表格，不加载数据，调用此方法时就不需要再调用此方法之前设置URL了；
2pageSize的参数不在pageList之中时，页面分页会默认取pageList中的第一个参数，此时pageSize设置无效。
3loadFilter方法是为了处理后台返回的结果，并自动传给datagrid进行处理然后展示在页面
ajax异步刷新
这里需要说明一些知识：
1、Ajax 无刷新页面的好处：提供良好的客户体验，通过 Ajax 在后台从数据库中取得数据并展示，取缔了等待加载页面而出现的空白状态；
2、那么，Ajax 无刷新页面是运行在动态页面（php）？还是静态页面（html/htm/shtml）？答案是：静态页面；
3、实现原理：通过前端 JS 脚本程序与 Ajax 相结合取得从动态页面返回的数据，并显示。
好了，下面进行代码讲解：
既然，是运行在静态页面上，我们首先先创建一个静态 HTML 页面，indexhtml 的代码清单如下。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 401 Transitional//EN" ">
txt文件取出来的数据流是字符串，你得到总长度然后一页要显示多少长度的字符串然后用分页公式（当前页数 - 1 ）X 每页条数也就是totalPageNum = (totalPage - 1) / pageSize; 得到当前页要显示到多少字符为止
以上就是关于html页面怎么按照一定数量分页全部的内容，包括:html页面怎么按照一定数量分页、以HTML静态页显示分页,是怎么弄的、怎样在html里面制作表格然后打印时候自动分页等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）