tp5的ajax分页实现

2021-07-13 02:07

阅读：680

标签：实现 for 取数技术分享 page limit document ima --

最近都在基于tp5的框架做项目，tp5里有现成的分页，可以直接用，但是要刷新页面的翻页，客户不愿意，所以要用ajax技术来实现页面的无刷新分页，下面开始通过贴代码来说明，由于是直接从项目里拿出来的，不明白的地方我尽量用注释解释明白。

HTML部分有两部分组成：内容部分和页码部分。

 1 div class="info-list">
 2       ul id="ul_list_b">
 3             
 4       ul>
 5 
 6       nav aria-label="..." class="pg-pager">
 7       ul class="pagination" id="page" style="min-width: 300px">
 8           li id="pre_b" style="display: block;">span aria-hidden="true">>li>
 9           li id="page--" style="display: none;">span aria-hidden="true">...span>li>
10           li id="page-4" style="display: none;">span aria-hidden="true">span>li>
11           li id="page-3" style="display: none;">span aria-hidden="true">span>li>
12           li id="page-2" style="display: none;">span aria-hidden="true">span>li>
13           li id="page-1" style="display: none;">span aria-hidden="true">span>li>
14           li id="page-0" style="display: none;">span aria-hidden="true">span>li>
15           li id="pagep1" style="display: none;">span aria-hidden="true">span>li>
16           li id="pagep2" style="display: none;">span aria-hidden="true">span>li>
17           li id="pagep3" style="display: none;">span aria-hidden="true">span>li>
18           li id="pagep4" style="display: none;">span aria-hidden="true">span>li>
19           li id="pagepp" style="display: none;">span aria-hidden="true">...span>li>
20           li id="next_b" style="display: block;">span aria-hidden="true">>span>li>
21         ul>
22       nav>
23     div>

js部分

‘+title+‘

‘+content+‘...

‘).appendTo($(‘#ul_list_b‘)); } //以下是页码的生成 if(max_cur == 1){ $(‘#page‘).html(‘‘); } if(max_cur ){ noneall(); changeinner(‘page-0‘,page_cur); for(var i=page_cur-1; i>0; i--){ changeinner(‘page-‘+i, page_cur-i); } for(var i=1; i){ changeinner(‘pagep‘+i, page_cur+i); } }else{ noneall(); if(page_cur>3) changeinner(‘page--‘,‘...‘); if(page_cur); if(page_cur){ for(var i=page_cur-1; i>0; i--){ changeinner(‘page-‘+i, page_cur-i); } for(var i=1; i){ changeinner(‘pagep‘+i, page_cur+i); } }else if(page_cur+2>max_cur){ for(var i=max_cur-page_cur; i>0; i--){ changeinner(‘pagep‘+i, page_cur+i); } for(var i=1; i){ changeinner(‘page-‘+i, page_cur-i); } }else{ changeinner(‘page-1‘, page_cur-1); changeinner(‘page-2‘, page_cur-2); changeinner(‘pagep1‘, page_cur+1); changeinner(‘pagep2‘, page_cur+2); } changeinner(‘page-0‘,page_cur); } }, error: function() { console.log("chucuo"); //alert("数据加载失败1"); } }) return page_cur; }; function changeinner(idname,content) { var obj = document.getElementById(idname); obj.style.display= "block"; obj.innerHTML= ‘‘; } function noneinner(idname,content) { var obj = document.getElementById(idname); obj.style.display= "none"; obj.innerHTML= ‘‘; } function noneall() { for(var i=1;i){ noneinner(‘page-‘+i,‘‘); noneinner(‘pagep‘+i,‘‘); } noneinner(‘page-0‘,‘‘); noneinner(‘page--‘,‘‘); noneinner(‘pagepp‘,‘‘); } page_cur = showContent(); max_cur = Math.ceil(parseInt({$count}) / parseInt({$size})); page_size = {$size}; console.log(page_cur, max_cur, page_size); $(‘#pre_b‘).on(‘click‘, function() { if(page_cur !=1) { page_cur--; showContent(page_cur); } }); $(‘#next_b‘).on(‘click‘, function() { if(page_cur !=max_cur) { page_cur++; showContent(page_cur); } }); $(‘#page-1‘).on(‘click‘, function() { page_cur-=1; showContent(page_cur); }); $(‘#page-2‘).on(‘click‘, function() { page_cur-=2; showContent(page_cur); }); $(‘#page-3‘).on(‘click‘, function() { page_cur-=3; showContent(page_cur); }); $(‘#page-4‘).on(‘click‘, function() { page_cur-=4; showContent(page_cur); }); $(‘#pagep1‘).on(‘click‘, function() { page_cur+=1; showContent(page_cur); }); $(‘#pagep2‘).on(‘click‘, function() { page_cur+=2; showContent(page_cur); }); $(‘#pagep3‘).on(‘click‘, function() { page_cur+=3; showContent(page_cur); }); $(‘#pagep4‘).on(‘click‘, function() { page_cur+=4; showContent(page_cur); }); $(‘#page--‘).on(‘click‘, function() { page_cur=1; showContent(page_cur); }); $(‘#pagepp‘).on(‘click‘, function() { page_cur=max_cur; showContent(page_cur); });

PHP部分：

public function invests()
    {
        
        $size = 4;//每页显示数量
        $invests = Db::table(‘sri_investment)->where(‘status‘,1)->order(‘id‘)->limit(($page-1)*$size, $size)->select();
        $count = Db::table(‘sri_investment)->where(‘status‘,1)->order(‘id‘)->count();
        
        foreach ($invests as $k => $v) {
            $day = date(‘d‘, $v[‘create_time‘]);
            $yearmonth = date(‘Y-m‘, $v[‘create_time‘]);
            $sub_content = $v[‘content‘];

            $arr[‘list‘][] = array(‘id‘ =>$v[‘id‘], 
                                    ‘path‘ =>$v[‘path‘],
                                    ‘day‘ =>$day,
                                    ‘yearmonth‘ =>$yearmonth,
                                    ‘title‘ =>$v[‘title‘],
                                    ‘content‘ =>$sub_content,
                                     );
        }
        $arr[‘page‘] = $page;
        $arr[‘count‘] = $count;
        echo json_encode($arr);
    }

下面是页码的样式，显示最多显示5个数字，省略号代表后面还有页码。（这个页码写了好久，主要是我的逻辑没缕清楚，加上熬夜，脑袋转不过来了，所以，大家还是少熬夜！）

技术分享

第一次写这个技术类型的，有什么说不清楚的，请留言问吧，我知道的一定说清楚。

tp5的ajax分页实现

标签：实现 for 取数技术分享 page limit document ima --

原文地址：http://www.cnblogs.com/aiyaxiaohong/p/7079627.html

上一篇：js格式化时间

下一篇：js 之闭包

文章来自：搜素材网的编程语言模块，转载请注明文章出处。
文章标题：tp5的ajax分页实现
文章链接：http://soscw.com/essay/104437.html

亲，登录后才可以留言！

tp5的ajax分页实现

‘+title+‘

评论

热门文章

推荐文章

最新文章

置顶文章