网站开发之php+jq分页动态获取数据

　　需求场景在不需要刷新页面的情况下获取数据，能带来更好的用户交互体验

　　第一步、通过ajax获取数据并更新页面内容

　　functionget_search(page=1，parm=[]){

　　$.post('/search/ajax'，{

　　page：page，

　　parm：JSON.stringify(parm)

　　}，function(result){

　　html=template('tpl-list'，result);

　　$('#list-box').html(html)

　　});

　　}

　　这里用到了art-template插件来重新渲染数据，如果用原生的话，加载会比较慢这个插件类似于vue

　　{{#page}}分页代码通过加#来解析html代码

　　scriptid=tpl-listtype=text/template

　　{{iftotal==0}}

　　pstyle=width：100%;

　　text-align：center;

　　min-height：300px;

　　margin-top：150px;

　　color：#F0679A;Norelevantinformationfound/

　　{{/if}}

　　pclass=category13-br

　　{{eachlist}}

　　ahref=/Search/info.html？id={{$value.id}}

　　pclass=category13-brb

　　pclass=category13-brb1{{$value.code}}/

　　pclass=category13-brb2

　　pclass=category13-brb2a

　　pcode=JME.classarchive=JME.jarclass=p-3width=300height=250

　　paramname=optionsvalue=depict，useopenchemlib

　　paramname=smilesvalue={{$value.smiles}}

　　/

　　！--imgsrc=/static/svgs/

　　1.svgclass=img-fluidmx-autobtncenter-block/--

　　！--buttonclass=btnbtn-primarytype=buttondata-bs-toggle=collapsedata-bs-target=#tdaria-expanded=falsearia-controls=td

　　3Dstructure

　　/button--

　　/

　　pclass=category13-brb2b

　　pclass=category13-brb2b2CASNumber/

　　pclass=category13-brb2b1{{$value.inventor}}/

　　pclass=category13-brb2b2Chemicalformula/

　　pclass=category13-brb2b1{{$value.chemical_formula}}/

　　pclass=category13-brb2b2Molecularweight/

　　pclass=category13-brb2b1{{$value.molecular_weight}}/

　　pclass=category13-brb2b2UV/

　　pclass=category13-brb2b1{{$value.absorption}}/

　　pclass=category13-brb2b2FL/

　　pclass=category13-brb2b1{{$value.emission_sol}}/

　　pclass=category13-brb2b2Reference/

　　pclass=category13-brb2b1{{$value.Reference}}/

　　/

　　/

　　pclass=category13-brb3ReportingApplication/

　　pclass=category13-brb4

　　pclass=category13-brb4a{{$value.application1}}/

　　pclass=category13-brb4a{{$value.application2}}/

　　pclass=category13-brb4a{{$value.application3}}/

　　pclass=category13-brb4a{{$value.application4}}/

　　/

　　/

　　/a

　　{{/each}}

　　/

　　pclass=fenlei

　　{{#page}}

　　/

　　/script

　　第二步、后台返回分页和其他数据

　　构建分页

　　functionbulid_page($total，$page=1，$page_size='')

　　{

　　//$total：总数

　　//$page：传递过来的当前页的值，第八页$page=8;

　　//$page_size：每页显示的数据的数目

　　//$url：传递的地址，默认为当前页面

　　//$max_length：分页代码时候，中间的分页数的一半

　　$page=($page1)？1：$page;

　　$page_size=$page_size？$page_size：10;

　　$url=$url？$url：$_SERVER['PHP_SELF'];

　　//$url=str_replace('.html'，''，$url);

　　$max_length=5;

　　$start=$page？($page-1)*$page_size：0;

　　$total_page=ceil($total/$page_size);

　　$page_table='';

　　//awaysinthepages

　　$page_table='pclass=fenlei-b';

　　if($total0){

　　//显示第一页

　　if($page1){

　　$page_table.='pclass=fenlei-caonclick=get_search('.($page-1).')class=fenlei-aa/a/p';

　　}

　　if($page==1)

　　{

　　$page_table.='pclass=fenlei-caonclick=get_search(1)class=fenlei-aaon1/a/p';

　　}

　　else

　　{

　　$page_table.='pclass=fenlei-caonclick=get_search(1)class=fenlei-aa1/a/p';

　　}

　　//循环中间页码

　　if($total_page2)

　　{

　　$loop_start=2;

　　$loop_end=$total_page-1;

　　}

　　else

　　{

　　$loop_start=$page-$max_length;

　　$loop_start=($loop_start2)？2：$loop_start;

　　$loop_end=$page+$max_length;

　　$loop_end=($loop_end$max_length)？$max_length：$loop_end;

　　$loop_end=($loop_end$total_page)？$total_page-1：$loop_end;

　　}

　　//...link

　　$link_start=(($loop_start-$max_length)2)？2：$loop_start-$max_length;

　　$link_end=(($loop_end+$max_length)$total_page)？$total_page：$loop_end+$max_length;

　　if($loop_start2)

　　{

　　$page_table.='pclass=fenlei-caonclick=get_search('.$link_start.')class=fenlei-aa.../a/p';

　　}

　　//中间链接

　　for($i=$loop_start;$i=$loop_end;$i++)

　　{

　　if($page==$i)

　　{

　　$page_table.='pclass=fenlei-caonclick=get_search('.$i.')class=fenlei-aaon'.$i.'/a/p';

　　}

　　else

　　{

　　if($i$total_page){//i不等于总页数最新修改最新修改最新修改最新修改最新修改最新修改最新修改最新修改最新修改最新修改最新修改最新修改最新修改最新修改最新修改

　　$page_table.='pclass=fenlei-caonclick=get_search('.$i.')class=fenlei-aa'.$i.'/a/p';

　　}

　　}

　　}

　　if($loop_end$total_page-1)

　　{

　　$page_table.='pclass=fenlei-caonclick=get_search('.$loop_end.')class=fenlei-aa.../a/p';

　　}

　　//末页链接

　　if($total_page！=1)

　　{

　　if($page==$total_page)

　　{

　　$page_table.='pclass=fenlei-caonclick=get_search('.$loop_end.')class=fenlei-aaon'.$i.'/a/p';

　　}

　　else

　　{

　　$page_table.='pclass=fenlei-caonclick=get_search('.$total_page.')class=fenlei-aa'.$total_page.'/a/p';

　　}

　　}

　　}

　　//输出分页代码

　　if($total_page$page){

　　$page_table.='

　　pclass=fenlei-caonclick=get_search('.($page+1).')class=fenlei-aa/a/

　　';

　　}else{

　　$page_table.='';

　　}

　　$page_table.='/p';

　　return$page_table;

　　}

　　传递数据给前端

　　functionajax(){

　　if($this-request-isPost()){

　　$model=newProducts();

　　$parm=$this-request-param();

　　$post=objtoarr(json_decode($parm['parm']));

　　//dump($post);exit;

　　$data=$model-search($post，$parm['page']);

　　//生成查询结果和分页

　　returnjson($data);

　　}

　　}