html分页表格.docx
《html分页表格.docx》由会员分享，可在线阅读，更多相关《html分页表格.docx（17页珍藏版）》请在冰豆网上搜索。
html分页表格
竭诚为您提供优质文档/双击可除
html,分页表格
篇一：
使用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.//注意：
一定要进行格式检查，防止sq（html,分页表格）l注入
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）
zendFramework的开发人员确实很认真，返回的参数非常充分，不需要任何的补充。
顺便提一下以上代码中未体现的细节，当使用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内容。
带有两个参数，
篇二：
7、分页显示数据页
分页显示数据、批量删除目录1．预备知识.......................................................................................................1
（1）bootstraptable插件.............................................................................1
（2）bootstraptable使用方法.....................................................................1
2．建立显示详细信息的三个相关文件...........................................................2
3．编写list1.html...............................................................................................2
（1）引入js和css........................................................................................3
（2）引入导航..............................................................................................3
（3）显示数据的table及删除按钮............................................................3
4．编写list1.js....................................................................................................4
5．编写分页显示及批量删除功能的后台代码...............................................6
（1）idal项目的iadmin.cs里增加getlist和deletelist方法的定义....6
（2）sqlserverdal项目的admin.cs里增加getlist和deletelist方法的实
现............................................................................................................................6
（3）bll项目的admin.cs里增加getlist和deletelist方法....................6
（4）编辑web项目里的list1.ashx............................................................7
1．预备知识
（1）bootstraptable插件
bootstraptable是简洁扁平的表格，支持分页。
bootstrap-table-develop.zip是本插件的资源包。
使用时也需要用到bootstrap的资源文件，即js和css。
（2）bootstraptable使用方法
1）在html页面的head标签中引入bootstrap库（假如你的项目还没使用）和bootstrap-table.css。
2）在head标签或者在body标签闭合前（比较推荐）引入jquery库和bootstrap库（假如你的项目还没使用）和bootstrap-table.js。
若需要支持中文需要加入
3）指定数据源，这里有两种方式
a）通过data属性标签
在一个普通的表格中设置data-toggle="table"可以在不写javascript的情况下启用bootstraptable。
...
b）通过javascript设置数据源
通过javascript来启用带有id属性的table。
$（#table）.bootstraptable（{
url:
data.json
}）;
2．建立显示详细信息的三个相关文件
新建list1.html、list1.js、list1.ashx三个文件
3．编写list1.html
type="text/javascript">
scrolling="no">
用bootstraptable显示数据列表
编号
登录名
真实姓名 data-formatter="sexFormatter">性别
data-formatter="editFormatter">操作
（1）引入js和css
type="text/javascript">
注意：
jquery-1.10.2.min.js、bootstrap.min.js、bootstrap-table.js、
bootstrap-table-zh-cn.min.js放在web项目下的scripts文件夹里
bootstrap.min.css、bootstrap-table.css放在web项目下的content文件夹里
（2）引入导航
scrolling="no">
（3）显示数据的table及删除按钮
编号
登录名
真实姓名 data-formatter="sexFormatter">性别
data-formatter="editFormatter">操作
注意：
标题行里的第一列：
表示的是多选框。
第二列：
编号data-field="adminid"这个属性的值要对应json数据里的数据行里的属性名。
注意不要写错，最后两列：
性别
data-formatter="editFormatter">操作
data-formatter="sexFormatter"、data-formatter="editFormatter"，这个属性里的对应js的一个方法，用来处理原始的数据的。
4．编写list1.js
$（document）.ready（function（）{
$.ajax（{
type:
"post",
url:
"ashx/list1.ashx",
//方法传参的写法一定要对，str为形参的名字,str2为第二个形参的名字data:
{"action":
"show"},
datatype:
"json",
success:
function（data）{
//vartbody=$（#showlist）;
//用json返回数据行时
if（jquery.isemptyobject（data））{//判断是否登录
alert（"请先登录"）;
window.location.href="login.html";
}
else{
$（#table）.bootstraptable（{
data:
data.admin,//数据源
pagination:
true,//是否分页
search:
true,//显示搜索框
pagesize:
5,//每页的行数
pagelist:
[5,10,20],
pagenumber:
1,//显示的页数
showRefresh:
true,//刷新
striped:
true,//条纹
sortname:
adminid,
sortorder:
desc,
}）;
}
},
error:
function（err）{
alert（err）;
}
}）;
//删除按钮
$（"#btndel"）.click（function（）{
vardelnums=getcheck（）;//获取选中行的人的编号
//alert（delnums）;
//判断是否为空。
。
前面是否有多余的逗号.（如果是全选，前面会多个，）if（delnums.charat（0）==","）{delnums=delnums.substring
（1）;}
if（delnums==""）{alert（"请选择额要删除的数据"）;}
else
{
$.ajax（{
type:
"post",
url:
"ashx/li
升级会员 