需求场景在不需要刷新页面的情况下获取数据，能带来更好的用户交互体验
第一步、通过ajax获取数据并更新页面内容
function get_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代码
<script id="tpl-list" type="text/template">
{{ if total==0}}
<div style=" width: 100%;
text-align: center;
min-height: 300px;
margin-top: 150px;
color: #F0679A;">No relevant information found</div>
{{/if}}
<div class="category13-br">
{{each list }}
<a href="/Search/info.html?id={{ $value.id }}">
<div class="category13-brb">
<div class="category13-brb1">{{ $value.code }}</div>
<div class="category13-brb2">
<div class="category13-brb2a">
<div code="JME.class" archive="JME.jar" class="p-3" width=300 height=250>
<param name="options" value="depict,useopenchemlib">
<param name="smiles" value="{{ $value.smiles }}">
</div>
<!-- <img src=/static/svgs/1.svg class="img-fluid mx-auto btn center-block"/> -->
<!-- <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#td" aria-expanded="false" aria-controls="td">
3D structure
</button> -->
</div>
<div class="category13-brb2b">
<div class="category13-brb2b2">CAS Number </div>
<div class="category13-brb2b1">{{ $value.inventor }}</div>
<div class="category13-brb2b2">Chemical formula </div>
<div class="category13-brb2b1">{{ $value.chemical_formula }}</div>
<div class="category13-brb2b2">Molecular weight</div>
<div class="category13-brb2b1">{{ $value.molecular_weight }}</div>
<div class="category13-brb2b2">UV</div>
<div class="category13-brb2b1">{{ $value.absorption }}</div>
<div class="category13-brb2b2">FL </div>
<div class="category13-brb2b1">{{ $value.emission_sol }}</div>
<div class="category13-brb2b2">Reference </div>
<div class="category13-brb2b1">{{ $value.Reference }}</div>
</div>
</div>
<div class="category13-brb3">Reporting Application</div>
<div class="category13-brb4">
<div class="category13-brb4a">{{ $value.application1}}</div>
<div class="category13-brb4a">{{ $value.application2}}</div>
<div class="category13-brb4a">{{ $value.application3}}</div>
<div class="category13-brb4a">{{ $value.application4}}</div>
</div>
</div>
</a>
{{ /each }}
</div>
<div class="fenlei">
{{# page}}
</div>
</script>
第二步、后台返回分页和其他数据
构建分页
function bulid_page($total,$page=1,$page_size = '')
{
//$total :总数
//$page :传递过来的当前页的值,第八页$page = 8;
//$page_size :每页显示的数据的数目
//$url :传递的地址,默认为当前页面
//$max_length:分页代码时候,中间的分页数的一半
$page = ($page < 1) ? 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 = '';
//aways in the pages
$page_table = ' <div class="fenlei-b">';
if($total>0){
//显示第一页
if($page>1){
$page_table .='<div class="fenlei-c"> <a onclick="get_search('.($page-1).')" class="fenlei-aa" ><</a></div>';
}
if($page == 1 )
{
$page_table .= '<div class="fenlei-c"> <a onclick="get_search(1)" class="fenlei-aa on" >1</a></div>';
}
else
{
$page_table .= '<div class="fenlei-c"><a onclick="get_search(1)" class="fenlei-aa " >1</a></div>';
}
//循环中间页码
if($total_page < 2)
{
$loop_start = 2;
$loop_end = $total_page-1;
}
else
{
$loop_start = $page - $max_length;
$loop_start = ($loop_start <2) ? 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_start > 2)
{
$page_table .= '<div class="fenlei-c"><a onclick="get_search('.$link_start.')" class="fenlei-aa " >...</a></div>';
}
//中间链接
for($i = $loop_start ; $i <= $loop_end ; $i++)
{
if($page == $i)
{
$page_table .= ' <div class="fenlei-c"><a onclick="get_search('.$i.')" class="fenlei-aa on" >'.$i.'</a></div>';
}
else
{
if($i<>$total_page){ //i不等于总页数最新修改最新修改最新修改最新修改最新修改最新修改最新修改最新修改最新修改最新修改最新修改最新修改最新修改最新修改最新修改
$page_table .= '<div class="fenlei-c"><a onclick="get_search('.$i.')" class="fenlei-aa " >'.$i.'</a></div>';
}
}
}
if($loop_end < $total_page-1)
{
$page_table .= '<div class="fenlei-c"><a onclick="get_search('.$loop_end.')" class="fenlei-aa " >...</a></div>';
}
//末页链接
if($total_page!=1)
{
if($page == $total_page)
{
$page_table .= '<div class="fenlei-c"><a onclick="get_search('.$loop_end.')" class="fenlei-aa on" >'.$i.'</a></div>';
}
else
{
$page_table .= '<div class="fenlei-c"><a onclick="get_search('.$total_page.')" class="fenlei-aa" >'.$total_page.'</a></div>';
}
}
}
//输出分页代码
if($total_page>$page){
$page_table .= '
<div class="fenlei-c"><a onclick="get_search('.($page+1).')" class="fenlei-aa" >></a></div>
';
}else{
$page_table .= '';
}
$page_table.='</div>';
return $page_table;
}
传递数据给前端
function ajax(){
if( $this->request->isPost() ) {
$model= new Products();
$parm=$this->request->param();
$post= objtoarr(json_decode($parm['parm']));
//dump( $post);exit;
$data=$model->search($post,$parm['page']);
//生成查询结果和分页
return json($data);
}
}
