静态页面：

<!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. php笔记[2]

    strlen()函数获得字符窜的长度 读取文件:fgets(),fgetss()和fgetcsv() 读取整个文件:readfile(),fpassthru()和file() 读取一个字符:fgetc ...

  2. iOS - UIPickerView

    前言 NS_CLASS_AVAILABLE_IOS(2_0) __TVOS_PROHIBITED @interface UIPickerView : UIView <NSCoding, UITa ...

  3. 构件工具Maven----坐标、依赖、仓库、生命周期的简单学习

    这篇文章对Maven中几个比较重要的概念坐标.依赖.仓库.生命周期做一个简单的介绍. 1.关于Maven坐标 用来区别Maven世界中任何一个构件,Maven坐标的元素包括groupId.artifa ...

  4. Oracle Regexp_substr

    Oracle中REGEXP_SUBSTR函数   Oracle中REGEXP_SUBSTR函数的使用说明:   题目如下: 在oracle中,使用一条语句实现将'17,20,23'拆分成'17','2 ...

  5. Java编程思想学习笔记_5(IO流)

    一.用DataInputStream读取字符 可以使用available方法查看还有多少可供存取的字符.示例如下: public class Test1 { public static void ma ...

  6. web前端学习(一） html+js实现文本框背景及只读属性修改

    因为工作需求接触了html+javascript,对于从事嵌入式开发,一直接触c和汇编的我,感觉这种语言是一个的全新的领域,宽松的语法要求,等同于文本逻辑的输出,当然我并不认为它简单,错误检查的缺少让 ...

  7. HBase 的存储结构

    HBase 的存储结构 2016-10-17 杜亦舒 HBase 中的表常常是超级大表,这么大的表,在 HBase 中是如何存储的呢?HBase 会对表按行进行切分,划分为多个区域块儿,每个块儿名为  ...

  8. 转！ java 中“==” 与“ .equals ”比较

    在java程序设计中,经常需要比较两个变量值是否相等.例如1.简单数据类型比较a = 10;b = 10;if(a == b){//写要执行的代码}2.引用数据类型比较ClassA a = new C ...

  9. html5常用API之Full Screen

    所谓Full Screen API,就是全屏API,在html5中,该API允许开发者以编程方式将Web应用程序全屏运行,使Web应用程序更像本地应用程序.这款API十分简单有用,是html5初学者必 ...

  10. ios开发中的toll-free bridged

    所谓的Toll-free bridging是说您可以在某个框架的方法或函数 同时使用Core Foundatio和Foundation 框架中的某些类型. 很多数据类型支持这一特性,其中包括群体和字符 ...