ajax分页2:jquery.pagination +JSON 动态无刷新分页
静态页面:
<!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 动态无刷新分页的更多相关文章
- jquery.pagination +JSON 动态无刷新分页
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="SqlPage.aspx.cs& ...
- Bootstrap Paginator分页插件+ajax 实现动态无刷新分页
之前做分页想过做淘宝的那个,但是因为是后台要求不高,就Bootstrap Paginator插件感觉还蛮容易上手,所以就选了它. Bootstrap Paginator分页插件下载地址: Downlo ...
- asp.net中利用Jquery+Ajax+Json实现无刷新分页(二)
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="PageTest.aspx.cs ...
- jquery.pagination.js数据无刷新真分页
定义一个全局的分页加载变量,并设置为true: var __isReSearch=true; 定义分页的一些数据: var __PageSize = 10; var __SearchCondition ...
- 无刷新分页 jquery.pagination.js
无刷新分页 jquery.pagination.js 采用Jquery无刷新分页插件jquery.pagination.js实现无刷新分页效果 1.插件参数列表 http://www.dtan.so ...
- 自己动手用Javascript写一个无刷新分页控件
.NET技术交流群:337901356 ,欢迎您的加入! 对 于一个用户体验好的网站来说,无刷新技术是很重要的,无刷新,顾名思义,就是局部刷新数据,有用过Asp.net Web Form技术开发网页的 ...
- jquery ajax php+mysql 无刷新分页 详细实例
最近在接触jquery和ajax,当前项目也会用到分页,为了用户体验更好一些,就准备用无刷新分页,这个demo很适合新手学习查看,写的比较清晰,话不多说,直接上代码吧. 首先是html页面,index ...
- javascript;Jquery;获取JSON对象,无刷新分页,异步加载,异步删除,实例。
AjaxNewsList: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> < ...
- TP2.0或3.1 或者 3.2 下使用ajax+php做无刷新分页(转+自创)
1.前言 作为一名php程序员,我们开发网站主要就是为了客户从客户端进行体验,在这里,thinkphp框架自带的分页类是每次翻页都要刷新一下整个页面,这种翻页的用户体验显然是不太理想的,我们希望每次翻 ...
随机推荐
- MIRO发票校验BAPI_INCOMINGINVOICE_CREATE (2013-01-23 10:01:29)
form frm_invoice_create2 . data: str type string. data: ls_headerdata like bapi_incinv_creat ...
- spring事务知识
事务的传播行为? 在Spring 的事务中, _可以通过 propagation 来定义事务的传播行为_: PROPAGATION_required:如果当前没有事务,就新建一个事务,如果已经存在一个 ...
- apt-get下载的文件
1. http://kurenai.elastos.org/2013/05/02/ubuntu-apt-get%E5%B7%A5%E4%BD%9C%E5%8E%9F%E7%90%86/ http:// ...
- linux下的挂载点和分区是什么关系
Linux 使用字母和数字的组合来指代磁盘分区.这可能有些使人迷惑不解,特别是如果你以前使用“C 驱动器”这种方法来指代硬盘及它们的分区.在 DOS/Windows 的世界里,分区是用下列方法命名的: ...
- Velocity教程 (zhuan)
http://blog.csdn.net/qq_25237663/article/details/52262532 ****************************************** ...
- 深入理解JVM虚拟机-2自动内存管理机制
java虚拟机所管理的内存将会包括一下几个运行时数据区域. 程序计数器: 程序计数器是一块较小的内存空间.字节码解析式工作时就是通过改变这个计数器的值来选取下一条需要执行的字节码指令,分支.循环.跳转 ...
- ajax再接触
贴三个目前写的已经工作了的ajax,并且给出备注: 1.这是第一个ajax以及它的接口文档,需要注意的是1.因为返回数据是xml所以多加了contentType:"application/x ...
- vb 和vb.net的区别
vb 和vb.net的区别 源地址:http://blog.csdn.net/xjc1278003262/article/details/8805324 在随着VB.NET的 发展,大部分人都放弃使用 ...
- DOM中元素节点、属性节点、文本节点
DOM中有12中节点,但最常用到的是元素节点,属性节点,文本节点. 元素节点的节点类型(nodeType)是1: 属性节点的节点类型(nodeType)是2: 文本节点的节点类型(nodeType)是 ...
- Python顺序集合之 List
Python内置的一种数据类型是列表:list.list是一种有序的集合,可以随时添加和删除其中的元素. 比如,列出班里所有同学的名字,就可以用一个list表示: >>> ['Jen ...