jquery ajax 局部table 刷新技术

点击查询:

下面先上html页面:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<link href="__PUBLIC__/home/css/bootstrap.css" rel="stylesheet">
<script src="__PUBLIC__/home/js/bootstrap.js"></script>
<script src="__PUBLIC__/home/js/jquery.js" type="text/javascript"></script>

<style>
    .container{ margin-top:20px;}
     table{border:1px solid #949390;}
     a{text-decoration:none; color: #333343;}
</style>
</head>
<body>
    <div class="container">
        <h3 >约见列表</h3>
        <form class="form-inline">
            <div class="row" style="margin-bottom:10px;margin-left:0px; ">
                <a href="{:U(‘Admin/Meet/set‘)}"><input class="btn btn-default" type="button" value="设置约见表"  style="margin-right:5px;"></a>
                <a href="{:U(‘Admin/Meet/expUser‘)}" ><input class="btn btn-default" type="button" value="导出数据"  style="margin-right:5px;"></a>
                <a href="{:U(‘Admin/Meet/index‘)}"><input class="btn btn-default" type="button" value="返回列表" style="margin-right:250px;"></a>

                <div class="form-group" style="margin-right:5px;">
                    <label for="exampleInputName2" style="margin-right:5px;">标&nbsp&nbsp题:</label>
                    <input type="text" class="form-control" name="title" id="search_text" placeholder="我主良缘">
                </div>
                <button type="button" class="btn btn-default" id="search_title">查  询</button>

            </div>
        </form>
        <table class="table table-hover">
            <thead>
            <tr>
                <td>
                   <input type="checkbox">
                </td>
                <td>编号</td>
                <td>约见标题</td>
                <td>姓名</td>
                <td>所属地区</td>
                <td>创建时间</td>
                <td>操作</td>
            </tr>
            </thead>
            <tbody>
            <foreach name="data" item="vo">
            <tr>
                <td>
                     <input type="checkbox">
                </td>
                <td>{$vo.userid}</td>
                <td><a href="{:U(‘Admin/Meet/title_serch‘,array(‘userid‘=>$vo[‘userid‘]))}">{$vo.title}</a></td>
                <td>{$vo.username}</td>
                <td><a href="{:U(‘Admin/Meet/city_serch‘,array(‘userid‘=>$vo[‘userid‘]))}">{$vo.name}</a></td>
                <td>{$vo.pubtime|date=‘Y-m-d‘,###}</td>

                <td ><a href="{:U(‘Admin/Meet/del‘ ,array(‘userid‘=>$vo[‘userid‘]))}">删除</a></td>
            </tr>
            </foreach>
            </tbody>
            <tfoot>
            <td colspan="7">{$page}</td>
            </tfoot>

        </table>
    </div>

</body>

</html>

再上jquery代码:

<script type="text/javascript">
    $(document).ready(function()
    {
        $(‘#search_title‘).click(function()
        {
            if($(‘#search_text‘).val()==‘‘)
            {
                alert("请输入查询内容")
                return false;
            }else
            {
                var data={title:$(‘#search_text‘).val()};
                var url=‘{:U(‘Admin/Meet/search‘)}‘;
                var _html = ‘‘;
                $.post(url,data,function(msg)
                {
                    if(msg==0)
                    {
                        alert(‘查询失败,无此标题‘);
                    }else
                    {
                        $.each(msg.data, function(key, val)
                        {
                            _html += ‘<tr><td><input type="checkbox"></td>‘+
                            ‘<td>‘+val[‘userid‘]+‘</td>‘+
                            ‘<td>‘+‘<a href="/wzlyAdmin.php/Meet/title_serch/userid/‘ + val[‘userid‘] +‘">‘ + val[‘title‘]+‘</a></td>‘+
                            ‘<td>‘+val[‘username‘]+‘</td>‘+
                            ‘<td>‘+‘<a href="/wzlyAdmin.php/Meet/city_serch/userid/‘ + val[‘userid‘] +‘">‘ + val[‘name‘]+‘</a></td>‘+
                            ‘<td>‘+val[‘pubtime‘]+‘</td>‘ +
                            ‘<td>‘ + ‘<a href="/wzlyAdmin.php/Meet/del/userid/‘ + val[‘userid‘] + ‘">删除</a></td></tr>‘;
                       });
                       $("table tbody").html(_html);  //
                       $(‘table tfoot td‘).html(msg.page);//分页
                    }
                    return false;

                },‘json‘);
            }
        });
    });
</script>

最后上php代码:

public function search()
    {
       $title=$_POST[‘title‘];
       if($title)
       {
            $moden=M(‘meet‘);
            import("ORG.Util.Page");
            $count= $moden->where("title=‘$title‘")->count();
            $Page= new Page($count,17);
            $show= $Page->show();
            $sql="select userid,username,city_id,name ,title,pubtime from meet,region where title=‘$title‘ and id=city_id order by userid desc limit $Page->firstRow, $Page->listRows";
            //$sql="select userid,username,city_id,name ,title,age,height,sex,telephone,education_id,professional,month_salary,weixin,pubtime from meet,region where title=‘$title‘ and id=city_id order by userid desc limit $Page->firstRow, $Page->listRows";
            $rs=$moden->query($sql);
            if($rs)
            {
                foreach ($rs as $k => $v)
                {
                    $rs[$k][‘sex‘]=$v[‘sex‘]==1?‘女‘:‘男‘;
                    $rs[$k][‘pubtime‘]= date(‘Y-m-d‘, $rs[$k][‘pubtime‘]);
                }
                $json = array(
                    ‘page‘ => $show,
                    ‘data‘ => $rs
                );
                echo json_encode($json);
            }else
            {
                echo ‘0‘;
            }

       }

    }
时间: 2024-11-08 13:07:59

jquery ajax 局部table 刷新技术的相关文章

jQuery AJAX 网页无刷新上传示例

新年礼,提供简单.易套用的 jQuery AJAX 上传示例及代码下载.后台对文件的上传及检查,以 C#/.NET Handler 处理 (可视需要改写成 Java 或 PHP). 有时做一个网站项目 (不论是否 ASP.NET),内附的 FileUpload 控件,功能不足 (页面必须刷新.不支援 AJAX),或外观太丑被用户嫌弃 (却无法透过 CSS 自定义外观).网路上虽已有许多可用的示例,如: jQuery File Upload,但功能太强大.外观复杂,欲仅取出部分功能来引用,反而不易

Ajax局部页面刷新

ajax自动刷新局部页面 通过 AJAX,JavaScript 可使用 JavaScript 的 XMLHttpRequest 对象来直接与服务器进行通信.通过这个对象, JavaScript 可在不重载页面的情况与 Web 服务器交换数据. AJAX 在浏览器与 Web 服务器之间使用异步数据传输(HTTP 请求),这样就可使网页从服务器请求少量的信息,而不是整个页面. 实验中利用JSP+ajax来实现自动刷新页面,并读/写数据库中的数据. 下面介绍一下利用JSP+ajax来实现局部页面刷新的

基于jQuery Ajax实现无刷新文件上传

最近因项目需求更改,需要实现选择文件后即时上传至服务器,然后提交后,加载xls表格内容到jqgrid表格中,文件上传功能实现示例: 前端jsp页面: <form id="uploadForm" enctype="multipart/form-data"> <!-- 声明文件上传 --> <input id="file_upload" type="file" name="pic"

(局部刷新)jquery.ajax提交并实现单个div刷新

web开发中我们经常会遇到局部刷新页面的需求,以前我经常使用ajax和iframe实现局部刷新,后来做政府的项目,对页面的样式要求比较多,发现使用iframe控制样式什么的很麻烦,所以就采用了新的办法,就是下面我们要说的ajax配合div局部刷新页面,其实很简单,下面我们就看一下这种刷新方式是如何实现的. jsp页面ajax代码如下: $("#waitWork").click(function(){ var url = "请求地址"; var data = {typ

jQuery ajax表单提交实现局部刷新

jQuery Ajax 异步提交 Form 表单,如果使用 get 请求,注意中文乱码问题,jquery 会先使用 iso8859-1 解码,然后发给服务器,如果使用 post 请求,则直接将中文内容提交给服务器解析. 引入插件: jquery.min.js jquery.form.js 提交表单: 以下为引用内容: // 动态加载页面 // id 显示页面的容器组件ID2 // url 欲加载页面网址 // gop get请求还是post请求,默认get function loadPage(i

JQuery 总结(8)Ajax 无刷新技术

Ajax  无刷新技术 $(".delete").click(function () { cf=confirm("确认删除"); if (!cf) { return false } id=this.id; obj=$(this); // var r; $.get('delete.php',{id:id},function (r) { // console.log(r); // alert(r) if (r==1) { // alert(1) obj.parent()

JQuery Ajax技术知识

=======================================JQuery Ajax技术知识=========================================== 1.serializeArray()通过序列化表单值来创建对象数组(名称和值). 可以选择一个或多个表单元素(比如 input 及/或 textarea),或者 form 元素本身. 语法: $(selector).serializeArray() 返回值: 注意:此方法返回的是 JSON 对象而非 J

jQuery实现局部刷新页面数据绑定

今天遇到了一个问题:怎么样才能做到只刷新页面中的Repeater控件中的数据,在不用UploadPannel的情况下? 试了好多方法,无意间在看jquery文件时发现,使用load()方法即可解决此问题. 代码如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head id="Head1" runat="server"> <title>当前页(WebForm1.a

实现带有验证码的ajax局部刷新登录界面

现在的登录界面大多数都带有:验证码的功能+验证码局部刷新+ajax登录.用ajax登录的好处最明显就是速度快,URL地址没有变化.所有现在登录功能很少再用form表单post提交了,大多数都已经采用了ajax局部访问后台然后解析返回值并显示结果到界面上面.理论还是要拿来实践才能验证的,下面直接上代码. 运行界面: 1.验证码后台访问部分上一篇博客已经介绍多了,这里介绍如何利用img中src实现局部刷新验证码的功能. html部分: <p><label class="lbrigh