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();
?>
jquery+jquery.pagination+php+ajax 无刷新分页的更多相关文章
- thinkphp ajax 无刷新分页效果的实现
思路:先做出传统分页效果,然后重新复制一份Page.class.php类,对它进行修改,把js中的函数传到page类中,把上一页.下一页.首页.尾页.链接页中的url地址改成js控制的函数,模板页面中 ...
- thinkphp下实现ajax无刷新分页
1.前言 作为一名php程序员,我们开发网站主要就是为了客户从客户端进行体验,在这里,thinkphp框架自带的分页类是每次翻页都要刷新一下整个页面,这种翻页的用户体验显然是不太理想的,我们希望每次翻 ...
- ajax 无刷新分页
//ajax 无刷新分页1.前台要做的 滑动时 当前page+1,通过page ajax请求后台接口获取数据将数据进行拼装;2.后台要做的 做分页接口返回json数据前台判断触发请求条件: var p ...
- 关于Ajax无刷新分页技术的一些研究 c#
关于Ajax无刷新分页技术的一些研究 c# 小弟新手,求大神有更好的解决方案,指教下~ 以前做项目,用过GridView的刷新分页,也用过EasyUI的封装好的分页技术,最近在老项目的基础上加新功能, ...
- javascript;Jquery;获取JSON对象，无刷新分页，异步加载，异步删除，实例。
AjaxNewsList: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> < ...
- 学习笔记之AJAX无刷新分页
利用AJAX实现无刷新分页技术原理: 其主要是利用AJAX的异步处理机制,实现数据的异步传递,它隐藏了客户端向服务端请求数据的状态,在客户端表现为无刷新的显示状态. 实现分页的步骤: 1.客服端点击页 ...
- Ajax无刷新分页
前台代码: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="AjaxPage ...
- ajax分页2：jquery.pagination +JSON 动态无刷新分页
静态页面: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w ...
- jquery.pagination +JSON 动态无刷新分页
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="SqlPage.aspx.cs& ...
随机推荐
- java 权重随机算法实现
import java.util.*; /** * 权重随机算法实现 * a b c d 对应权重范围 --- [0,1).[1,3).[3,6).[6,10) */ public class Ran ...
- zookeeper超时：Unable to connect to zookeeper server within timeout: 5000
解决措施: 1:检查 提供方和消费方的address是否正确 <dubbo:application name="dubboxdemo-servive"/> <du ...
- PHP + Nginx 在 Linux（centos7）系统下的环境搭建
( 选用的操作系统为 centos7 ) 01,安装 nginx => 请移步 https://www.cnblogs.com/lovling/p/9197572.html 02,下载 php ...
- beego注解路由 [自定义方法]
背景: beego生成的controller里面,默认get请求到由Get()方法处理:post请求由Post()方法处理 etc. 如果想自定义方法来处理请求,改怎么做? 直接拿beego的文档来说 ...
- [bcc32 Error] typeinfo.h(154): E2367 Can't inherit RTTI class from non-RTTI base 'exception'
[bcc32 Error] typeinfo.h(154): E2367 Can't inherit RTTI class from non-RTTI base 'exception' Full p ...
- WPF中TextBox文件拖放问题
在WPF中,当我们尝试向TextBox中拖放文件,从而获取其路径时,往往无法成功(拖放文字可以成功).造成这种原因关键是WPF的TextBox对拖放事件处理机制的不同,具体可参考这篇文章Textbox ...
- as2 删除层级影片问题
关键要将main的引用赋值,防止被误删,导致加载swf空白 /** * 删除所有对象 * @param standByRemoveMc 影片对象 * @param removeSelf 是否删除自身 ...
- npm run dev 报错：missing script:dev
一.问题: 今天在运行vue项目时,在mac终端输入npm run dev,结果报错: 翻译是: npm错误:缺少script:dev npm错误:完整路径见:users/mymac/ .npm/_l ...
- 如何使用JDBC删除一条记录
//根据学生id删除操作 public void deleteOne(int id) { Statement stmt=null; // 发送SQL语句,返回执行结果 ...
- ASP.NET 工作流：支持长时间运行操作的 Web 应用程序
ASP.NET 工作流 支持长时间运行操作的 Web 应用程序 Michael Kennedy 代码下载位置:MSDN 代码库 在线浏览代码 本文将介绍以下内容: 独立于进程的工作流 同步和异步活 ...