静态页面：

<!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{width: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="width: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);
            }
            
    }

ajax分页2：jquery.pagination +JSON 动态无刷新分页的更多相关文章

  1. jquery.pagination +JSON 动态无刷新分页

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="SqlPage.aspx.cs& ...

  2. Bootstrap Paginator分页插件+ajax 实现动态无刷新分页

    之前做分页想过做淘宝的那个,但是因为是后台要求不高,就Bootstrap Paginator插件感觉还蛮容易上手,所以就选了它. Bootstrap Paginator分页插件下载地址: Downlo ...

  3. asp.net中利用Jquery+Ajax+Json实现无刷新分页(二)

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="PageTest.aspx.cs ...

  4. jquery.pagination.js数据无刷新真分页

    定义一个全局的分页加载变量,并设置为true: var __isReSearch=true; 定义分页的一些数据: var __PageSize = 10; var __SearchCondition ...

  5. 无刷新分页 jquery.pagination.js

     无刷新分页 jquery.pagination.js 采用Jquery无刷新分页插件jquery.pagination.js实现无刷新分页效果 1.插件参数列表 http://www.dtan.so ...

  6. 自己动手用Javascript写一个无刷新分页控件

    .NET技术交流群:337901356 ,欢迎您的加入! 对 于一个用户体验好的网站来说,无刷新技术是很重要的,无刷新,顾名思义,就是局部刷新数据,有用过Asp.net Web Form技术开发网页的 ...

  7. jquery ajax php+mysql 无刷新分页 详细实例

    最近在接触jquery和ajax,当前项目也会用到分页,为了用户体验更好一些,就准备用无刷新分页,这个demo很适合新手学习查看,写的比较清晰,话不多说,直接上代码吧. 首先是html页面,index ...

  8. javascript;Jquery;获取JSON对象，无刷新分页，异步加载，异步删除，实例。

    AjaxNewsList: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> < ...

  9. TP2.0或3.1 或者 3.2 下使用ajax+php做无刷新分页（转+自创）

    1.前言 作为一名php程序员,我们开发网站主要就是为了客户从客户端进行体验,在这里,thinkphp框架自带的分页类是每次翻页都要刷新一下整个页面,这种翻页的用户体验显然是不太理想的,我们希望每次翻 ...

随机推荐

  1. 简明Vim练级攻略（转载）

    前言 今天看到这篇文章,共鸣点非常多.它把Vim使用分为4个级别,目前我自己是熟练运用前面三级的命令,在培养习惯使用第四级.完全就是我这一年来坚持使用Vim的过程.所以不管怎么我要转载这篇文章.翻译自 ...

  2. HTML <meta> 标签

    <meta> 元素可提供有关页面的元信息,元数据总是以名称/值的形式被成对传递的. <meta> 标签位于文档的头部,不包含任何内容. <meta> 标签的属性定义 ...

  3. linux之稀疏文件

    1. Sparse 文件是并不占用磁盘存储空间. 2. rm 某文件后, 文件占用的磁盘空间并不是立即释放, 而是其句柄没有被任意一个进程引用时才回收. 3. ls 的结果是 apparent siz ...

  4. iOS开发者帐号流程

    http://ask.dcloud.net.cn/article/152 iOS证书(.p12)和描述文件(.mobileprovision)申请 5+App开发 Apple证书 iOS证书 iOS有 ...

  5. [css]【转载】CSS样式分离之再分离

    原文链接:http://www.zhangxinxu.com/wordpress/2010/07/css%E6%A0%B7%E5%BC%8F%E5%88%86%E7%A6%BB%E4%B9%8B%E5 ...

  6. OpenCV3编程入门笔记（1）图像载入、显示、保存、变换灰度图

    图像载入.显示.保存函数: 1         图像载入函数:imread()   Mat imread(const string& filename, int flags=1); const ...

  7. wampserver2.5安装 redis缓存,igbinary, phalcon框架

    wampserver2.5安装 redis缓存,igbinary, phalcon框架 根据phalconphp说明文件,先将dll文件拖入到:安装盘:\wamp\bin\php\php5.5.12\ ...

  8. 调用webservice 417

    在调用webservice时有些服务器一直返回“远程服务器返回错误: (417) Expectation failed”  这个提示,解决方案: 在调用代码的最开始加入如下一句:System.Net. ...

  9. android上传文件到wamp服务器

    1.php server(wamp)部分 建立unload.php页面代码如下 <?php move_uploaded_file($_FILES["file1"][" ...

  10. IoC 之 2.3 IoC的配置使用（叁）

    2.3.1  XML配置的结构 一般配置文件结构如下: <beans> <import resource="resource1.xml"/> <bea ...