怎样在html里面制作表格然后打印时候自动分页

页面在初始化加载数据较多时会非常耗时，如果只加载表格，用户再根据自己的需要通过条件查询数据，就会节约一些时间，提高用户体验，所以在初始化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)){

jQuery.messager.alert("系统提示", "系统错误，请联系技术人员！")

return

}

//默认属性

var defaultOpt= {

"url": null,

"method": 'POST', //请求方式

"columns": column,

"width": document.body.clientWidth < 756 ? 756 - 18 : document.body.clientWidth - 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 (result.code == "100") {

//解析json结果集，返回给datagrid

var obj =

{

"total": result.data.totalDataCount,

"rows": result.data.list,

"footer": result.data.properties.footer

}

return obj

} else {

jQuery.messager.alert("系统提示", result.msg)

return false

}

}

}

if(!isEmpty(opt)){

//替换自定义属性

$.extend(defaultOpt, opt)

}

//把属性与事件放到表格中，进行初始化

$("#" + id).datagrid(defaultOpt)

$("#" + id).datagrid('loadData', initData)

}

说明：1.设置URL为null后，则每次调用此方法都只会加载表格，不加载数据，调用此方法时就不需要再调用此方法之前设置URL了；

2.pageSize的参数不在pageList之中时，页面分页会默认取pageList中的第一个参数，此时pageSize设置无效。

3.loadFilter方法是为了处理后台返回的结果，并自动传给datagrid进行处理然后展示在页面

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 = document.getElementById("blocks")

preSpan = document.getElementById("spanPre")

firstSpan = document.getElementById("spanFirst")

nextSpan = document.getElementById("spanNext")

lastSpan = document.getElementById("spanLast")

pageNumSpan = document.getElementById("spanTotalPage")

currPageSpan = document.getElementById("spanPageNum")

numCount = document.getElementById("blocks").rows.length - 1//取table的行数作为数据总数量(减去标题行1)

alert(numCount)

columnsCounts = blockTable.rows[0].cells.length

pageCount = 5

pageNum = parseInt(numCount/pageCount)

if(0 != numCount%pageCount){

pageNum += 1

}

firstPage()

}

如果数据库中有几千甚至几万条数据，一下子显示出来也是不现实的，立马就想要了分页。查看TWaver的API，并没有发现表格中提供了分页的功能。算了，还是自己来扩展，想想TWaverJava中分页的功能，HTML5实现起来应该也不算太难，我们需要定义一个PagedTablePane，panel中包含表格和分页栏，分页栏参考了TWaver Java的那种：

仔细看看上面的分页条，其实也不是那么复杂，几个分页按钮加上分页的信息，于是很快就模仿了一个类似的分页栏，先上图：

界面实现起来还是比较容易的，主要的是按钮的 *** 作和分页信息的显示，我们需要定义几个变量：currentPage（当前页）、countPerPage（每页的条数）、pageCount（页数）、count（总数），定义了这几个变量就可以将上图中分页的信息表示出来

---