利用html5 Api 实现分页


//htmlapi.php

<?php

//header("content-type:text/html;charset=utf-8");

$dsn=‘mysql:host=127.0.0.1;dbname=edusoho‘;

$db=new PDO($dsn,‘root‘,‘root‘);

$page=isset($_GET[‘p‘])?$_GET[‘p‘]:‘1‘;

$pagesize=‘10‘;

$limit=($page-1)*$pagesize;

$sql=‘select count(*) as num  from course_lesson_text‘;

$rs=$db->query($sql);

$ar=$rs->fetch();

$count=$ar[‘num‘];

$pagecount=ceil($count/$pagesize);

$sql="select id,title from course_lesson_text limit $limit,$pagesize";

$rs=$db->query($sql);

$arr=$rs->fetchAll();

$next=$page+1>$pagecount?$pagecount:$page+1;

$up=$page-1<1?1:$page-1;

$pagea="<a class=‘pa‘ href=‘?p=1‘>首页</a><a class=‘pa‘ href=‘?p=$up‘>上一页</a><a class=‘pa‘ href=‘?p=$next‘>下一页</a><a class=‘pa‘ href=‘?p=$pagecount‘>尾页</a>";

$exit[‘arr‘]=$arr;

$exit[‘page‘]=$pagea;

exit(json_encode($exit));

?>

//index.php

<?php

header("content-type:text/html;charset=utf-8");

$dsn=‘mysql:host=127.0.0.1;dbname=edusoho‘;

$db=new PDO($dsn,‘root‘,‘root‘);

$page=isset($_GET[‘p‘])?$_GET[‘p‘]:‘1‘;

//$page=1;

$pagesize=‘10‘;

$limit=($page-1)*$pagesize;

$sql=‘select count(*) as num  from course_lesson_text‘;

$rs=$db->query($sql);

$ar=$rs->fetch();

$count=$ar[‘num‘];

$pagecount=ceil($count/$pagesize);

$sql="select id,title from course_lesson_text limit $limit,$pagesize";

$rs=$db->query($sql);

$arr=$rs->fetchAll();

?>

<meta charset=‘utf-8‘/>

<ul class="list">

<?php foreach ($arr as $key => $value) {

?>

<li><?php echo $value[‘title‘] ?></li>

<?php

} ?>

</ul>

<?php

$next=$page+1>$pagecount?$pagecount:$page+1;

$up=$page-1<1?1:$page-1;

?>

<div id="pagea">

<a class=‘pa‘ href="?p=1">首页</a>

<a class=‘pa‘ href="?p=<?php echo $up ?>">上一页</a>

<a class=‘pa‘ href="?p=<?php echo $next ?>">下一页</a>

<?php

/*for($i=1;$i<$pagecount;$i++){

echo"<a class=‘pa‘ href=‘?p=$i‘>$i</a>";

}*/

?>

<a class=‘pa‘ href="?p=<?php echo $pagecount ?>">尾页</a>

</div>

<script src=‘./jquery-1.8.0.js‘ ></script>

<script>

$(function(){

var ajax,

currentState;

$(".pa").live("click",function(e){

e.preventDefault();

var target = e.target,

url = $(target).attr("href");

!$(this).hasClass("current") && $(this).addClass("current").siblings().removeClass("current");

if(ajax == undefined) {

currentState = {

url: document.location.href,

title: document.title,

html: $(".list").html()

};

}

ajax = $.ajax({

type:"get",

url: ‘htmlapi.php‘+url,

dataType:"json",

success: function(data){

var html = "";

if(data[‘arr‘].length > 0) {

$.each(data[‘arr‘],function(k,v){

html += "<li>"+v.title+"</li>"

})

$(".list").html(html);

}

var state = {

url: url,

title: document.title,

html: $(".list").html()

};

$("#pagea").html(data[‘page‘]);

history.pushState(state,null,url);

}

});

});

window.addEventListener("popstate",function(event){

if(ajax == null){

return;

}else if(event && event.state){

document.title = event.state.title;

$(".list").html(event.state.html);

}else{

document.title = currentState.title;

$(".list").html(currentState.html);

}

});

});

时间: 2024-10-28 21:53:54

利用html5 Api 实现分页的相关文章

[HTML5_WebWorkers]利用HTML5的window.postMessage实现跨域通信

由于同源策略的限制,JavaScript跨域的问题,一直是一个颇为棘手的问题,为了解决js的跨域,web开发人员是煞费苦心,研究了各种跨域方案,如果有机会的话,明河以后会一一展示给各位,今天明河重点介绍下html5新引入的postMessage跨域方案. 1.哪些场景要考虑跨域问题? 明河这二周在处理淘宝添加收藏夹的重构,里面就有一个非常经典的跨域问题.添加收藏弹出层外层是淘宝商城页面域名是tmall.com,而弹出层内部的页面域名却是taobao.com,接下来的问题就是我现在希望弹出层内部的

利用html5 共享地理位置

该例子是演示利用HTML5实现地理定位.也就是获得本机IP地址,然后判断出所在位置,并且显示在Google地图上.. 实例效果图 该实例预览地址:http://html5demos.com/geo XML/HTML Code复制内容到剪贴板 <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv

利用HTML5定位功能,实现在百度地图上定位

利用HTML5定位功能,实现在百度地图上定位 代码如下: <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>HTML5定位</title>     <script type="text/javascript" src="http://lib.sinaapp

利用HTML5定位功能,实现在百度地图上定位(转)

原文:利用HTML5定位功能,实现在百度地图上定位 代码如下: 测试浏览器:ie11定位成功率100%,Safari定位成功率97%,(add by zhj :在手机上测试(用微信内置浏览器打开),无论使用WIFI还是移动4G联网, 定位精度都是蛮高的,误差在几十米内) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>

蓝牙利用协议栈API读取设备MAC地址

最近在移植QQ物联协议,需要读取设备mac地址. 读取CC2541设备MAC地址的方法,有直接读取mac寄存器,也可以调用协议栈API.这里采用的是调用API的形式. 1 /*利用协议栈API读取MAC地址*/ 2 static uint8 macaddr[B_ADDR_LEN]={0}; // mac 地址 3 uint8_t macstr[13] = {0}; 4 5 GAPRole_GetParameter(GAPROLE_BD_ADDR, macaddr); 6 sprintf((cha

一个利用HTML5 localStorage功能的todo应用(angularJs+Bootstrap)

今天在网上看到一个简单的todo应用,使用angularJs做前端数据绑定,利用localStorage来存储数据,觉得挺有意思的. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html ng-app="todoApp"> <head> <me

开源项目成熟度分析工具-利用github api获取代码库的信息

1.github api github api是http形式的api,功能还是比较丰富的,博主因为项目的原因主要用到的是提取project信息这项功能,返回的数据是JSON格式. api页:https://developer.github.com/v3/ Options: (H) means HTTP/HTTPS only, (F) means FTP only --anyauth Pick "any" authentication method (H) -a, --append Ap

[转载]你可能不知道的5个功能强大的 HTML5 API —— html5系列

HTML5 新增了许多重要的特性,像 video.audio 和 canvas 等等,这些特性使得能够很容易的网页中包含多媒体内容,而不需要任何的插件或者 API.而其它的新元素,例如 section.article.header 和 nav 等则是用来丰富网页内容.另外还有很多强大的 JavaScript API,下面这5个 HTML5 API 你可能不知道,通过今天这篇文章可以了解一下. Fullscreen API 这个 HTML5 全屏 API 让 Web 开发者可以通过编程控制页面的全

利用html5的本地存储写的一个购物车

好久没有写博客园了,很多知识没有记录下来:可惜: 这几天在开发微信,也写了一个订餐平台的微网站,里面需要写一个购物车: 这里主要是把商品的部分信息以json格式保存在sessionstorage中,还有商店信息也是: 以json格式保存有什么好处呢,轻量级的传输,大概是这样吧!另外,如果我们把商品信息分开存储,就会导致有多条的sessionstorage项,那以后实现在两家商店同时购物的话,就不可能区分每家商店的商品了: 如果代码是自己写的,就有版权,这么说.对吧,是在软件工程师书上看到的: 不