jquery+jquery.pagination+php+ajax 无刷新分页

<!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();
?>

  

代码下载

时间: 2024-10-05 07:18:07

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

Ajax无刷新分页

<!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> <title></title> <sc

javascript;Jquery;获取JSON对象,无刷新分页实例。

js: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head id="Head1" runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>&

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

aspx 页面: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="SqlPage.aspx.cs" Inherits="SqlPage" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xh

ajax无刷新分页类

<?php  class Page {   // 分页栏每页显示的页数 public $rollPage = 10; // 页数跳转时要带的参数 public $parameter; // 默认列表每页显示行数 public $listRows = 20; // 起始行数 public $firstRow; // 分页总页面数 protected $totalPages; // 总行数 protected $totalRows; // 当前页数 protected $nowPage; // 分页

ThinkPhp 3.2 ajax无刷新分页(未完全改完,临时凑合着用)

临时更改后的page类(很多地方没修改...因为笔者PHP没学好..)如下: <?phpnamespace Fenye\libs; /**  file: page.class.php   完美分页类 Page  */ class Page {  private $total;          //数据表中总记录数  private $listRows;       //每页显示行数  private $limit;          //SQL语句使用limit从句,限制获取记录个数  pri

SUI分页组件和avalon搞定ajax无刷新分页

<div ms-controller="main"> <h2 class="pagination-centered">{{ title }}</h2> <form method="get" action="" class="sui-form" style="margin-bottom:5px;"> 重量:<input class=&q

Ajax实现无刷新分页

注:本文中使用到的一些类库在前面文章都能找到源代码,我会在文中指明链接所在,为了缩短文章篇幅,由此带来的阅读不便,敬请谅解. 本文讲解 Ajax 实现无刷新分页.实现原理.代码展示.代码下载. 这里需要说明一些知识: 1.Ajax 无刷新页面的好处:提供良好的客户体验,通过 Ajax 在后台从数据库中取得数据并展示,取缔了等待加载页面而出现的空白状态: 2.那么,Ajax 无刷新页面是运行在动态页面(.PHP)?还是静态页面(.html/.htm/.shtml)?答案是:静态页面: 3.实现原理

在Thinkphp中使用AJAX实现无刷新分页

在Thinkphp目录的Lib\ORG\Util\目录里新建AjaxPage.class.php,写入一下内容: <?php // +---------------------------------------------------------------------- // | ThinkPHP [ WE CAN DO IT JUST THINK IT ] // +---------------------------------------------------------------

TinkPHP_无刷新分页_未带搜索条件

1)前台显示模板: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Ajax 实现无刷新页面</title> <meta http-equiv="Content-Type" conte