<!DOCTYPE html>

<html ><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>预约列表</title>

<link rel="stylesheet" href="./static/pagination.css">

<script type="text/javascript" src="./static/jquery.min.js"></script>

<script type="text/javascript" src="./static/jquery.pagination.js"></script>

<script type="text/javascript">

$(function(){

    var num_entries = 10;//先写10，ajax请求后后更新为 16 测试ajax更新页码用

    var initPagination = function() {

        // 创建分页

        $("#Pagination").pagination(num_entries, {

            num_edge_entries: 1, //边缘页数

            num_display_entries: 4, //主体页数

            callback: pageselectCallback,

            items_per_page: 1, //每页显示1项

            prev_text: "前一页",

            next_text: "后一页"

        });

     };

    function pageselectCallback(page_index, jq){

        page_index++;

        var html='';

        $.ajax({

          url: "data.php",

          type: 'post',

          dataType: 'json',

          async : false,

          data:{page:page_index},

          success: function (data, status) {

            count = data.list.length;

            html += "<table><th>title</th><th>content</th>";

            if(count>0){

                for(i=0;i<count;i++){

                    html += "<tr><td>"+data['list'][i].title+"</td><td>"+data['list'][i].content+"</td></tr>";

                }

            }

            html += "</table>";

          }

        });

        $("#Searchresult").html(html);

        return false;

    }

    initPagination();

});

</script>

</head>

<body>

<h1>预约列表</h1>

<div id="Pagination" class="pagination"></div>

<div id="Searchresult">

</div>

</body></html>

php

<?php

$data = array(

'1'=>array('list'=>array(array("title"=>'111title',"content"=>'1111content'),array("title"=>'111title',"content"=>'1111content'),array("title"=>'111title',"content"=>'1111content')),'page' => 12),

'2'=>array('list'=>array(array("title"=>'111title',"content"=>'1111content'),array("title"=>'111title',"content"=>'1111content'),array("title"=>'111title',"content"=>'1111content')),'page' => 12),

'3'=>array('list'=>array(array("title"=>'111title',"content"=>'1111content')),'page' => 16),

'4'=>array('list'=>array(array("title"=>'111title',"content"=>'1111content')),'page' => 16),

'5'=>array('list'=>array(array("title"=>'111title',"content"=>'1111content')),'page' => 16),

'6'=>array('list'=>array(array("title"=>'111title',"content"=>'1111content')),'page' => 16),

'7'=>array('list'=>array(array("title"=>'111title',"content"=>'1111content')),'page' => 16),

'8'=>array('list'=>array(array("title"=>'111title',"content"=>'1111content')),'page' => 16),

'9'=>array('list'=>array(array("title"=>'111title',"content"=>'1111content')),'page' => 16),

'10'=>array('list'=>array(array("title"=>'111title',"content"=>'1111content')),'page' => 16),

'11'=>array('list'=>array(array("title"=>'111title',"content"=>'1111content')),'page' => 16),

'12'=>array('list'=>array(array("title"=>'111title',"content"=>'1111content')),'page' => 16),

);

echo json_encode($data[$_POST['page']]);

//echo time();

?>

　　

代码下载

jquery+jquery.pagination+php+ajax 无刷新分页的更多相关文章

  1. thinkphp ajax 无刷新分页效果的实现

    思路:先做出传统分页效果,然后重新复制一份Page.class.php类,对它进行修改,把js中的函数传到page类中,把上一页.下一页.首页.尾页.链接页中的url地址改成js控制的函数,模板页面中 ...

  2. thinkphp下实现ajax无刷新分页

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

  3. ajax 无刷新分页

    //ajax 无刷新分页1.前台要做的 滑动时 当前page+1,通过page ajax请求后台接口获取数据将数据进行拼装;2.后台要做的 做分页接口返回json数据前台判断触发请求条件: var p ...

  4. 关于Ajax无刷新分页技术的一些研究 c#

    关于Ajax无刷新分页技术的一些研究 c# 小弟新手,求大神有更好的解决方案,指教下~ 以前做项目,用过GridView的刷新分页,也用过EasyUI的封装好的分页技术,最近在老项目的基础上加新功能, ...

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

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

  6. 学习笔记之AJAX无刷新分页

    利用AJAX实现无刷新分页技术原理: 其主要是利用AJAX的异步处理机制,实现数据的异步传递,它隐藏了客户端向服务端请求数据的状态,在客户端表现为无刷新的显示状态. 实现分页的步骤: 1.客服端点击页 ...

  7. Ajax无刷新分页

    前台代码: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="AjaxPage ...

  8. ajax分页2：jquery.pagination +JSON 动态无刷新分页

    静态页面: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w ...

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

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

随机推荐

  1. Shell 编程（函数）

    声明函数 demoFun(){ echo "这是我的第一个 shell 函数!" } 函数名(){ ...函数体 } 在Shell中,调用函数时可以向其传递参数.在函数体内部,通过 ...

  2. Valgrind简单用法 (转)

    转自 http://www.cnblogs.com/sunyubo/archive/2010/05/05/2282170.html Valgrind的主要作者Julian Seward刚获得了今年的G ...

  3. webstorm上svn的安装使用

    1.首先要下载SlikSvn网址为:https://sliksvn.com/download/  进入该网站可以根据需要下载32位的或者64位的svn.下图为要下载的图标样式 点击下载即可. 2.在w ...

  4. android的体系结构

    android 体系结构:采用软件堆层的架构 ,四层1应用程序“: 提供一系列的核心应用程序 2应用程序框架 :提供安卓平台基本的管理功能和组件重用机制activityManager 管理应用程序的生 ...

  5. Windows下如何查看某个端口被谁占用

    开发时经常遇到端口被占用的情况,这个时候总是很令人抓狂,知道被哪个进程占用还好,结束就是了,要是不知道我们该怎么办呢? 我告诉大家一个方法,^_^. 1. 开始—->运行—->cmd,或者 ...

  6. Future Clalback使用案例

    目前知道可以实现线程按照顺序的java原生方法有 join(),CountDownLatch,Executors.newSingleThreadExecutor(),FutureTask.. Futu ...

  7. Redis学习笔记一（Redis的详细安装及Linux环境变量配置和启动）

     Redis Redis是一个开源的使用ANSI C语言编写.支持网络.可基于内存亦可持久化的日志型.Key-Value数据库,并提供多种语言的API. 我使用的是下面这个版本: 若没有资源的话,我在 ...

  8. 1：python 简介与基础

    什么是python? 1.python是一种面向对象的解释型语言,它继承了传统编译语言的通用性和强大性,同时也借鉴了简单脚本和解释语言的易用性. 2.python 在自动化测试.人工智能.数据分析等方 ...

  9. 使用karma做多浏览器的UI测试

    avalon1.6开发得差不多,这次使用先进的开发理念进行开发,比如模块化,单元测试什么... ui测试是重要的一环,之前用阿里的totoro,但打开浏览器不方便.于是从webdrieverio, n ...

  10. python实现排序算法二：归并排序

    ##归并排序 ##基本思想:对于两个排好序的数组A和B,逐一比较A和B的元素,将较小值放入数组C中,当A或者B数组元素查询完后,将A或者B剩余的元素直接添加到C数组中,此时C数组即为有序数组,这就是归 ...