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);
                }
                
        }

  • 相关阅读:
    iframe的边框如何去掉
    vue-computed计算属性用法
    Vue-input框checkbox强制刷新
    TED 积极心理学感悟(二)
    路由器使用子网掩码进行分组转发的过程
    DHCP 服务器和 DHCP 客户端的交互过程
    IPv4 协议中的 NAT 协议和 CIDR 协议
    IPv6 是解决 IPv4 地址耗尽问题的根本途径
    TED 积极心理学感悟
    初级错误之 for 中的局部变量
  • 原文地址:https://www.cnblogs.com/legend-song/p/4233554.html
Copyright © 2011-2022 走看看