Question

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

Answer 1

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