jquery打印html表格自动分页.docx

jquery打印html表格自动分页.docx

《jquery打印html表格自动分页.docx》由会员分享，可在线阅读，更多相关《jquery打印html表格自动分页.docx（10页珍藏版）》请在冰豆网上搜索。

jquery打印html表格自动分页

竭诚为您提供优质文档/双击可除

jquery打印html表格自动分页

　　篇一：

html表格及分页

　　html表格及分页

　　1.html

　　　　transitional//en""http:

//www.w3.org/tR/xhtml1/dtd/xhtml1-transitional.dtd">

　　系统事件

　　操作进行中,请耐心等待...

　　■

　　系统事件

　　--%>

　　事件类型:

　　所有事件--%>

　　系统事件

　　操作日志事件

　　事件描述:

　　时间范围:

　　～

　　　　"onclick="queryclick（）"class="mbtn"/>

　　　　"onclick="exoprtascsv（histevent）"class="mbtn"/>

　　时间事件类型事件描述

　　总共0条第

　　/0页

　　　　"onclick="pagerjump（）"class="pagerctrl"id="jumpbtn"/>

　　　　"onclick="pagerfirst（）"class="pagerctrl"id="firstbtn"/>

　　　　"onclick="pagerperv（）"class="pagerctrl"id="prevbtn"/>

　　　　"onclick="pagernext（）"class="pagerctrl"id="nextbtn"/>

　　　　"onclick="pagerlast（）"class="pagerctrl"id="lastbtn"/>

　　$（".timepicker"）.datetimepicker（）.attr（"readonly","readonly"）;$（".pagerctrl"）.attr（"disabled","disabled"）;

　　$（"#waiting"）.hide（）;

　　daystring（）;

　　2..histeventpage.js

　　///

　　vareventtype="";

　　vardescription="";

　　varstarttime="";

　　varendtime="";

　　//查询按钮,查询分页信息并查出第一页内容

　　functionqueryclick（）{

　　//获取查询条件

　　eventtype=$（"#eventtype"）.val（）;

　　description=$（"#description"）.val（）;

　　篇二：

使用php和jquery制作分页和表格

　　使用php和jquery制作分页和表格

　　如果您已经下载了本站提供的baseproject项目源码，后台中列表页面均可作为示例，其中文章列表页面的功能最为丰富。

如果您没有下载该源码，相关的js文件可以从获得，示例页面为页面。

以下是后台文章列表页面的截图。

　　分页和表格功能实例截图分页功能详解

　　分页功能用于当目标数据过多时，为提高页面展示速度采用的一种手段。

本文中的分页功能借用了zendFramework中的zend_paginator对象，分页适配器为

　　zend_paginator_adapter_null。

该适配器也是最简单易用的一个。

工作原理

　　在php端，分页功能的基本参数为记录总数（$countRows）、每页显示的记录数

　　（$rowsperpage）、当前页码（$page默认值为1），页码数量（$items指每次在页面上显示多少个页码，建议为单数）。

其他参数可以通过计算得到：

　　1.页码合计（$countpages）取不小于$countRows/$rowsperpage的整数；

　　2.起始页码和结束页码的计算方式太长不写了；

　　3.页码列表：

从起始页码到结束页码的页码组成的数组，如array（4,5,6,7,8）

　　在html端，必要的参数为php端计算得出的数据，同时需要指定一个用于显示分页信息的html元素。

然后使用jquery根据参数动态生成html并将其插入到指定的html元素中

　　就行了。

　　php示例代码详解1.

　　2.publicfunctionarticlesaction（）{$pagenumber=$this->getRequest（）->getparam（page,1）;//获取当前页码，如果未指定则设为1

　　3.$sortby=$this->getRequest（）->getparam（sortby）;//获取sortby设置

　　4.if（empty（$sortby）||!

preg_match（/^[a-z0-9_-]+（asc|desc）$/i,$sortby））{

　　5.//如果sortby为空或者不符合格式要求则使用以下的排序方式

　　6.//注意：

一定要进行格式检查，防止sql注入

　　7.$sortby=project_table:

:

getFullycolumnname（article,id）.desc;

　　8.}

　　9.$marticle=newmodel_article（）;

　　10./*这部分是处理where子句的，和本文关系不大，略过*/

　　11.$wherearray=array（

　　12.`article`.`article_category_id`

　　=>$this->getRequest（）->getparam（project_table:

:

getFullycolumnname（article,

　　article_category_id））,

　　13.`article`.`article_status_id`

　　=>$this->getRequest（）->getparam（project_table:

:

getFullycolumnname（article,

　　article_status_id））,

　　14.）;

　　15.$wherestring=;

　　16.foreach（$wherearrayas$key=>$value）{

　　17.if（!

empty（$value））{

　　18.if（$key==`article`.`article_category_id`-1）{

　　19.$wherestring.="and{$key}isnull";

　　20.}else{

　　21.$wherestring.="and{$key}={$value}";

　　22.}

　　23.}

　　24.}

　　25.if（!

empty（$wherestring））{

　　26.$wherestring=substr（$wherestring,strlen（and））;

　　27.}else{

　　28.$wherestring=null;

　　29.}

　　30./*以上是处理where子句的*/

　　31.$maxgetRows=project_config:

:

paginatoR_item_count_peR_page;//设置每页显示的记录数量

　　32.$articles=$marticle->getarticles（$wherestring,$sortby,$maxgetRows,（$pagenumber-1）*$maxgetRows）;//从数据库中读取数据

　　33.$countarticles=project_table:

:

getlastFoundRows（）;//获得符合条件的数据总数

　　35.//如果没有取到任何记录，而且记录总数不为空，说明当前页码超出范围了，所以处理一下

　　36.$articles=$marticle->getarticles（$wherestring,$sortby,$maxgetRows,null）;

　　37.$pagenumber=1;

　　38.}

　　39.$pdate=project_datetime:

:

getinstance（）;//时间处理工具，和本文无关

　　40.foreach（$articlesas$key=>$article）{

　　41.$articles[$key][project_table:

:

getFullycolumnname（article,modified）]=$pdate->getusertimeFromtime（$article[project_table:

:

getFullycolumnname（article,modified）],true）;//把时间戳转换为用户的当地时间，和本文无关

　　42.}

　　$paginator=zend_paginator:

:

factory（$countarticles,null）;//调用zend提供

　　的分页适配器，参数1是总记录数，参数2是适配器的名字

　　44.$paginator->setcurrentpagenumber（$pagenumber）;//告诉分页器当前页码

　　45.$pages=$paginator->getpages（）;//得到了前面提到的所有参数，后面我会打印它，这样你会直观的看到其内容

　　46.$this->view->articles=$articles;

　　47.$this->view->pages=$pages;43.

　　48.//以下处理是为了页面中的下拉选单提供选项数据，和本文关系不大

　　49.if（!

$this->getRequest（）->ispost（））{

　　50.$mparticle=newmapper_article（）;

　　51.$this->view->elementarticlestatusid=

　　$mparticle->getelement（article_status_id,array（project_mapper:

:

options_nullable=>true,project_mapper:

:

options_deFault=>））;

　　52.$_categories=$marticle->getallowappendarticlearticlecategories（null,null,null,null,true）;

　　53.$categories=array（

　　54.$this->view->translate（model_article:

:

no_categoRy）=>-1,

　　55.）;

　　56.foreach（$_categoriesas$key=>$row）{

　　57.

　　$categories[$row[project_table:

:

getFullycolumnname（article_category,name）]]=$row[project_table:

:

getFullycolumnname（article_category,id）];

　　58.}

　　59.$mparticle=newmapper_article（）;

　　60.$this->view->elementarticlecategories=

　　$mparticle->getelement（article_category_id,array（project_mapper:

:

options_in_aRRay=>$categories,project_mapper:

:

options_nullable=>true））;

　　61.}

　　62.}

　　$pages中的内容我打印了一下，这样更直观。

如下。

　　63.stdclassobject

　　65.

　　66.

　　67.

　　68.

　　69.

　　70.

　　71.

　　72.

　　73.

　　74.

　　75.

　　76.

　　77.

　　78.

　　79.

　　80.

　　81.

　　82.

　　83.

　　84.

　　85.[pagecount]=>3[itemcountperpage]=>10[first]=>1[current]=>2[last]=>3[previous]=>1[next]=>3[pagesinRange]=>array（[1]=>1[2]=>2[3]=>3）[firstpageinRange]=>1[lastpageinRange]=>3[currentitemcount]=>10[totalitemcount]=>21[firstitemnumber]=>11[lastitemnumber]=>20）

　　z　　

endFramework的开发人员确实很认真，返回的参数非常充分，不需要任何的补充。

　　顺便提一下以上代码中未体现的细节，当使用post方式访问该页面时会得到json数据而不是html。

这个细节写在init（）方法中，代码如下：

　　1.publicfunctioninit（）{

　　2.if（$this->getRequest（）->ispost（））{

　　3.$this->_helper

　　4.->contextswitch（）

　　5.

　　6.

　　7.

　　8.

　　9.

　　10.

　　11.

　　}}->addactioncontext（articles,json）//就是这里咯->addactioncontext（trashcategory,json）->addactioncontext（trasharticle,json）->addactioncontext（movecategory,json）->initcontext（json）;

　　html示例代码详解

　　这次只贴出关键的内容哦。

　　1.url（）>"onsubmit="

　　2.try{

　　returnpbase.submitForm（this,true,null,loadarticlesgrid）;//使用ajax提交表

　　单，回调函数为loadarticlesgrid

　　4.}catch（e）{

　　5.alert（e.message）;

　　6.returnfalse;

　　7.};">

　　8.

　　9.3.

　　10.

　　11.pagination（$this->pages->current,articles）>

　　12.

　　13.

　　14.

　　15.search_select（$this->elementarticlestatusid,array（onchange=>"pbase.paginator（div.pagination[name=articles],goto,1）;"））;>

　　16.search_select（$this->elementarticlecategories,array（onchange=>"pbase.paginator（div.pagination[name=articles],goto,1）;"））;>

　　17.iconbutton（add,

　　$this->actiontitle（createarticle）,"window.open（{$this->url（array（action

　　=>editarticle））}）",!

project_session:

:

getinstance（）->isallow（editarticle））>

　　18.

　　19.

　　20.

　　21.

　　22.

　　23.

　　24.

　　25.

　　false）>

　　26.

　　27.

　　28.

　　29.

　　30.

　　31.…pagination（$this->pages->current,articles,$（document）.ready（function（）{//这句话就是调用js绘制分页的，第一个参数是目标容器，第二个参数是相关参数组成的json对象（就是$pages）啦）

　　32.pbase.paginator（div.pagination[name=articles],{$jsonpages}）;

　　33.}）;

　　34.functionloadarticlesgrid（response）{

　　35.//ajax回调，此时重绘分页

　　36.pbase.paginator（div.pagination[name=articles],response.pages）;

　　37.}

　　38.

　　里面用到了一个helper，因为这样可以避免反复去写类似的html内容。

带有两个参数，

　　篇三：

jquery合并html表格中相同文本的相邻单元格

　　jquery合并html表格中相同文本的相邻单元格

　　1、在html的head中引入jquery文件

　　2、添加合并单元格的函数

　　//函数说明：

合并指定表格（表格id为_w_table_id）指定列（列数为//参数说明：

_w_table_id为需要进行合并单元格的表格的id。

如在html中指定//参数说明：

_w_table_colnum为需要合并单元格的所在列。

为数字，从最左边第_w_table_colnum）的相同文本的相邻单元格表格id="data"，此参数应为#data一列为1开始算起。

　　function_w_table_rowspan（_w_table_id,_w_table_colnum）{

　　_w_table_currenttd="";_w_table_spannum=0;_w_table_firsttd="";

　　}_w_table_obj=$（_w_table_id+"trtd:

nth-child（"+_w_table_colnum+"）"）;_w_table_obj.each（function（i）{}}else{}_w_table_firsttd=$（this）;_w_table_spannum=1;_w_table_spannum++;_w_table_currenttd.hide（）;//remove（）;if（i==0）{_w_table_firsttd=$（this）;_w_table_currenttd=$（this）;_w_table_spannum=1;}else{if（_w_table_firsttd.text（）==_w_table_currenttd.text（））{_w_table_firsttd.attr（"rowspan",_w_table_spannum）;}）;

　　//函数说明：

合并指定表格（表格id为_w_table_id）指定行（行数为_w_table_rownum）的相同文本的相邻单元格

　　//参数说明：

_w_table_id为需要进行合并单元格的表格id。

如在html中指定表//参数说明：

_w_table_rownum为需要合并单元格的所在行。

其参数形式请参考//如果为数字，则从最左边第一行为1开始算起。

//"even"表示偶数行格id="data"，此参数应为#datajquery中nth-child的参数。

　　//"odd"表示奇数行//"3n+1"表示的行数为1、4、7、10.......//参数说明：

_w_table_maxcolnum为指定行中单元格对应的最大列数，列数大于//此参数可以为空，为空则指定行的所有单元格要进行比较合并。

functionif（_w_table_maxcolnum==void0）{}_w_table_firsttd="";_w_table_currenttd="";_w_table_spannum=0;$（_w_table_id+"tr:

nth-child（"+_w_table_rownum+_w_table_obj=$（this）.children（）;_w_table_obj.each（function（i）{_w_table_spannum++;if（i==0）{_w_table_firsttd=$（this）;_w_table_spannum=1;_w_table_maxcolnum=0;这个数值的单元格将不进行比较合并。

_w_table_colspan（_w_table_id,_w_table_rownum,_w_table_maxcolnum）{"）"）.each（function（i）{}elsereturn"";_w_table_currenttd=$（this）;if（（_w_table_maxcolnum>0）//remove（）;_w_table_firsttd.attr（"colspan",_w_table_spannum）;}_w_table_firsttd=$（this）;_w_table_spannum=1;}else{}）;}）;

　　3、在html的head中调用合并函数合并单元格

　　$（document）.ready（function（）{}）_w_table_rowspan（"#spdata",4）;_w_table_rowspan（"#spdata",3）;_w_table_rowspan（"#spdata",2）;_w_table_rowspan（"#spdata",1）;

　　用jquery合并表格中左侧表头同列相同文本的相邻单元格

（二）