Ajax+smarty技术实现无刷新分页

这里运用Smarty模板,更简单

本文主要的技术:AJAX,PHP,Smarty,另外自己封装了一个很简单的类

类:

  (function(){
function $(id) {
return document.getElementById(id);
}
$.init=function() {
try{return new XMLHttpRequest();}catch(e){};
try{return new ActiveXObject('Microsoft.XMLHTTP');}catch(e){}
alert('请更换浏览器');
}
$.get=function (url,data,callback,type) {
var xhr = this.init();
url += '?' +new Date().getTime();
if(data!=null){
url += '&'+data;
}
xhr.open('get',url);
xhr.onreadystatechange = function () {
if(xhr.readyState == 4 && xhr.status == 200){
if(type==null){
callback(xhr.responseText);
}
if(type == 'text'){
callback(xhr.responseText);
}
if(type == 'xml'){
callback(xhr.responseXML);
}
if(type == 'json'){
callback(eval("("+xhr.responseText+")"));
}
}
}
xhr.send(null);
}

$.post = function (url,data,callback,type) {
var xhr = this.init();
xhr.open('post',url);
xhr.setRequestHeader('Content-Type','Application/x-www-form-urlencoded');
xhr.onreadystatechange = function () {
if(xhr.readyState == 4 && xhr.status == 200){
if(type==null){
callback(xhr.responseText);
}
if(type == 'text'){
callback(xhr.responseText);
}
if(type == 'xml'){
callback(xhr.responseXML);
}
if(type == 'json'){
callback(eval("("+xhr.responseText+")"));
}
}
};
xhr.send(data);
}

 类很简单,不介绍了

HTML:

  window.onload=function () {
init(2);
}
function del(id,p){
$.get('del.php','id='+id,function(msg){
if(msg==1){
init(p);
}
})
}
function init(p) {
$.get('page.php','page='+p,function(msg){
$('result').innerHTML=msg;
});
}

PHP:

<?php
header('content-type:text/html;charset=utf-8');
mysql_connect('localhost','root','root');
mysql_select_db('db2');
mysql_query('set names utf8');
$re=mysql_query('select count(*) as num from catgory');
$hang=mysql_fetch_assoc($re);
$row1=$hang['num'];
$page=isset($_GET['page'])? $_GET['page']:1;
$pagesize=2;
$total=ceil($row1/$pagesize);
$prev=$page-1;
$next=$page+1;
if($prev<1){$prev=1;}
if($next>$total){$next=$total;}
$offset = ($page-1)*$pagesize;
$result=mysql_query("select * from catgory limit ".$offset.','.$pagesize);
$ct=mysql_num_rows($result);
$data=array();
for($i=0;$i<$ct;$i++){
$r=mysql_fetch_assoc($result);
$data[]=$r;
}
include('libs/Smarty.class.php');
$Smarty=new Smarty();
$Smarty->assign('data',$data);
$Smarty->assign('page',$page);
$Smarty->assign('pagesize',$pagesize);
$Smarty->assign('total',$total);
$Smarty->assign('prev',$prev);
$Smarty->assign('next',$next);
$Smarty->assign('row1',$row1);
$str=$Smarty->fetch('page.html');
echo $str;

Smarty:

    <table border="1" rules="all" width="600">
<tr>
<td>编号</td>
<td>品牌</td>
<td>pid</td>
<td>删除</td>
</tr>
{foreach from=$data item='value'}
<tr>
<td>{$value['id']}</td>
<td>{$value['name']}</td>
<td>{$value['pid']}</td>
<td><a href="#", onclick="del({$value['id']},{$page})">删除</td>
</tr>
{/foreach}
<tr>
<td colspan="3">
共{$total}页
第{$page}页
<a href="#", onclick="init({$prev})">上一页</a>
<a href="#", onclick="init({$next})">下一页</a>
<a href="#", onclick="init(1)">第一页</a>
<a href="#", onclick="init({$total})">最末页</a>
共{$row1}条数据
每页{$pagesize}条数据
</td>
</tr>
</table>

要引入smary模板

以上所述是小编给大家介绍的Ajax+smarty技术实现无刷新分页,希望对大家有所帮助!

(0)

相关推荐

  • PHP Smarty模版简单使用方法

    本文实例讲述了PHP Smarty模版简单使用方法.分享给大家供大家参考,具体如下: Index.php: require('../libs/Smarty.class.php'); $smarty = new Smarty; // 添加自定义调节器 $smarty->registerPlugin("modifier", "e", "htmlspecialchars"); $smarty->registerPlugin("mo

  • Smarty环境配置与使用入门教程

    本文实例讲述了Smarty环境配置与使用方法.分享给大家供大家参考,具体如下: 下载Smarty(这里以Smarty-2.6.26为例).解压下载的文件(目录结构还蛮复杂的).接下来演示给大家一个安装实例,看过应该会举一反三的. (1) 在根目录下建立了新的目录learn/,再在learn/里建立一个目录smarty/.将刚才解压缩出来的目录的libs/拷贝到smarty/里,再在smarty/里新建templates目录,templates里新建cache/,templates/,templa

  • Smarty结合Ajax实现无刷新留言本实例

    看了标题你也许要说,留言本,很基本的东东啊!谁不会啊,还要用Smarty,这不找累吗?别急,我要表达的是一种编程的思想和结构,而不是证明我做的东西多有意义,通过它相信对初学者学习Smarty和ajax有些启发.原本用ajax做的,可惜始终调试不成功,只好用手写JS来弄了,不过不要紧,还是有一定价值的.站点结构大家下了源代码自己看,代码不长,应该不会看烦^_^,听我慢慢道来.     现在都PHP5了OO(面向对象)很流行了都,这里也不错过,首先来看下我们用OO来实现数据库操作和连接:[php]<

  • Smarty安装配置方法

    下载最新的Smarty:http://smarty.php.net/ 当前最新版本:2.6.18 解压后将目录中的libs目录重命名为smarty,复制到你的网站目录,同时在网站根目录下建立templates和templates_c两个目录 建立test.php,内容如下: <?php include_once('./Smarty/Smarty.class.php');$smarty = new Smarty(); $smarty -> template_dir = "./templ

  • 在smarty中调用php内置函数的方法

    相信有很多朋友还不知道,可以在smarty模板里调用php的内置函数,我们一起来看看它的用法. 模板书写: {'param1'|functionName:'param2':'param3'} php函数原型: echo functionName('param1','param2','param3'); 实例: {'1234567'|substr:'1':'2'} 下面这个和函数的参数顺序有关系 {'a'|str_replace:'A':'abcd'} 直接延伸到,直接在php中写一个函数调用,不

  • Smarty变量用法详解

    本文实例讲述了Smarty变量用法.分享给大家供大家参考,具体如下: 1. 从PHP分配的变量 调用从PHP分配的变量需在前加"$"符号.(译注:同php一样) 调用模板内的assign函数分配的变量也是这样.(译注:也是用$加变量名来调用) 示例: index.php: $smarty = new Smarty; $smarty->assign('firstname', 'Doug'); $smarty->assign('lastLoginDate', 'January1

  • Smarty分页实现方法完整实例

    本文实例讲述了Smarty分页实现方法.分享给大家供大家参考,具体如下: 首先是PHP文件部分: <?php require("include.php"); //包含smarty配置部分 require 'conn.php'; //包含数据库配置部分 $pagesize=10; //设置每页数据显示数量 $url=$_SERVER['REQUEST_URI']; $url=parse_url($url); $url=$url['path']; $sql="SELECT

  • smarty简单分页的实现方法

    本文实例讲述了smarty简单分页的实现方法,分享给大家供大家参考.具体实现方法如下: 以下是模板中的smarty代码,用smarty简单的代入相关的变量就行了,非常简单,但是在php代码中还要传入page这个参数.我觉得这样分挺好,非常简单.我越来越喜欢用smarty了.   Php代码如下: 复制代码 代码如下: {if $pageCount > 1}  {foreach  item=i from=$pagerList}    {if $pageNum eq $i}    {$i}     

  • ThinkPHP使用smarty模板引擎的方法

    ThinkPHP支持多种php模板引擎,可以根据个人需要加以配置. 下面我们以Smarty模板引擎为例,给大家说说具体的操作流程! 首先去Smarty官网上下载一个Smarty.本站下载地址:http://www.jb51.net/codes/16086.html. 接下来解压压缩包,会有两个文件夹:demo和libs.打开libs文件夹,复制所有内容. 接下来,打开你网站根目录 下thinkphp的文件夹.里面有个vendor文件夹,这个文件夹是TP调用第三方类库用的,把刚才复制的东西全部粘贴

  • Ajax+smarty技术实现无刷新分页

    这里运用Smarty模板,更简单 本文主要的技术:AJAX,PHP,Smarty,另外自己封装了一个很简单的类 类: (function(){ function $(id) { return document.getElementById(id); } $.init=function() { try{return new XMLHttpRequest();}catch(e){}; try{return new ActiveXObject('Microsoft.XMLHTTP');}catch(e

  • Bootstrap Paginator分页插件与ajax相结合实现动态无刷新分页效果

    Bootstrap Paginator分页插件下载地址: DownloadVisit Project in GitHub 1.这是需要分页的页面放的 js函数: <span style="font-size:14px;">function paging(page){ $.ajax({ type: "GET", url: "${ctx}/api/v1/user/1/"+(page-1)+"/5", dataType:

  • Flash & Ajax 操作 XML 实例:无刷新分页

    其实标题只是一个噱头罢了,只是想谈一下,Javascript 与 Actionscript 是如何操作XML的. 希望能帮助一些只用 Javascript  或 只懂 Actionscript 的朋友,了解两者的相同与不同之处. Flash 与 后台连接有许多种,Actionscript 调用 XML() 算是比较简单的一种了, 而Javascript 调用 xmlHttp ,便形成了现在很流行的Ajax了. 现在就用一个网上常出现的分页效果来对 Flash 和 Ajax 做个入门学习.效果预览

  • JS+Ajax+Jquery实现页面无刷新分页以及分组 超强的实现第1/2页

    复制代码 代码如下: <%@ Page language="c#" Codebehind="GroupText.aspx.cs" AutoEventWireup="false" Inherits="test1.GroupText" %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" > <HTML&g

  • 基于ajax实现无刷新分页的方法

    本文实例讲述了基于ajax实现无刷新分页的方法.分享给大家供大家参考.具体如下: 在普通的分页中,一旦页码改变,则url改变,整个页面都会刷新,如果我们希望页码的改变不影响整个网页的变动,可以使用ajax技术. AJAX 是一种用于创建快速动态网页的技术.通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新. 通过客户端html代码,用ajax把服务器中的数据通过get方式传递过来,显示在html中. <!doct

  • asp.net Mvc4 使用ajax结合分页插件实现无刷新分页

    本文为在mvc4中使用ajax实现无刷新分页demo,记录一下. 解决方案思想:页面数据的初始加载和按页加载都是通过ajax来进行,页面分页链接点击后利用ajax技术发送当前页码到后端控制器,后端控制器根据当前页码和设置的pageSize从数据库中取出对应页的数据.后端控制器处理完后利用PartialView方法把数据返回到分部视图中,利用ViewBag来返回总记录数和pageSize.ajax通过回调函数把控制器返回的分部视图内容加载到主视图中显示. 说明:分页具体的分页导航和样式使用了kkp

  • ThinkPHP5.1+Ajax实现的无刷新分页功能示例

    本文实例讲述了ThinkPHP5.1+Ajax实现的无刷新分页功能.分享给大家供大家参考,具体如下: 无刷新分页可以减轻服务器负担,利用Ajax技术,请求部分信息,提高网站访问速度,是网站建设的必备技术. 需要在后台展示自定义属性列表(lst.html),其中的列表部分摘出来,放到(paginate1.html)中: <div class="row"> <div class="col-sm-12"> <div class="i

  • 在Thinkphp中使用ajax实现无刷新分页的方法

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

  • ajax无刷新分页的简单实现

    本文实例为大家分享了ajax无刷新分页的具体代码,供大家参考,具体内容如下 html页 <html> <head> <title></title> <style type="text/css"> table{ border:solid 1px #444; background-color:Aqua;} table td{border:solid 1px #444;} </style> <script src=

  • 简单实现Ajax无刷新分页效果

    Ajax无刷新分页效果,如下代码实现 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Ajax无刷新分页效果</title> <script type="text/javascript"> function showpage(url) { var xhr = new XML

随机推荐