zoukankan      html  css  js  c++  java
  • ajax分页2:jquery.pagination +JSON 动态无刷新分页

    静态页面:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <style type="text/css">
    body{font-size:84%; color:#333333; line-height:1.4;}
    a{color:#34538b;}
    #Searchresult{300px; height:100px; padding:20px; background:#f0f3f9;}
    </style>

    <link rel="stylesheet" href="<?php echo base_url();?>static/pagination.css" />
    <script type="text/javascript" src="<?php echo base_url();?>static/jquery.js"></script>
    <script type="text/javascript" src="<?php echo base_url();?>static/jquery.pagination.js"></script>
    <script type="text/javascript">

        $(document).ready(function(){
           pageselectCallback(0);
           function pageselectCallback(page_index )
            {
                var limit = 5;
                var offset = page_index * limit;
                $.ajax({
                       url : '<?php echo site_url('test/ajax_page');?>',
                       async : false,
                       type : 'POST',
                       dataType : 'json',
                       data : "post_data=abc&limit="+ limit+"&offset="+offset,
                       beforeSend: function() {
                            $("#Searchresult").html("<p>Wait .......</p>");
                       },
                       success: function( data ){
                            var m_html = '';
                            if(data.ok == '1')
                                $(data.result).each(function(i,item){
                                    m_html +=  item.catalog+' == '+item.name+" <br>";
                                })
                            $("#Searchresult").html(m_html);
                       }
                 })
            }
               // 创建分页
               $("#Pagination").pagination( <?php echo $num;?>, {
                        num_edge_entries: 0,
                        num_display_entries: 6,
                        items_per_page: 5,
                        ellipse_text: " ",
                        link_to: '#&',
                        prev_text: '«PREV',
                        next_text: 'NEXT»',
                        callback: pageselectCallback
               });
        });  
           
    </script>
    </head>
    <body>
        <div id="Pagination" class="pagination"  style="960px; height: 200px;"><!-- 这里显示分页 --></div>
    <div id="Searchresult">分页初始化完成后这里的内容会被替换。</div>   
    </body>
    </html>

    php:

     public function ajax_page()
       {      
                $this->load->helper('url');
                 $this->load->database('abgent_product');
                $arrs = $this->db->select("count(*) as num ")->get('abgent_products')->row_array();
                $data['num'] = $arrs['num'];
                if( $this->input->post('post_data') )
                {
                      $limit = $this->input->post('limit');
                      $offset = $this->input->post('offset');
                      $arr = $this->db->select("catalog,name")->limit($limit)->offset($offset)->get('abgent_products')->result_array();
                      $data['result'] = $arr ;
                      $data['ok'] = 1;
                      echo json_encode($data);
                }else{
                     $this->load->view('welcome_message',$data);
                }
                
        }

  • 相关阅读:
    Splashtop :符合 HIPAA 标准的远程桌面软件
    学生如何在家中访问学校许可的软件
    Splashtop用于远程实验室的功能得到增强
    docker环境安装,镜像和容器常用命令
    vue-cli入门
    webpack快速入门
    Vue路由vue-router
    Vue组件化
    Vue指令
    Vue实例
  • 原文地址:https://www.cnblogs.com/legend-song/p/4233554.html
Copyright © 2011-2022 走看看