首页 > Web开发 > 详细

jquery ajax 局部table 刷新技术

时间:2015-07-14 19:57:44      阅读:361      评论:0      收藏:0      [点我收藏+]

点击查询:

 

 

技术分享

下面先上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‘;
            }

       }
        
    }

 

jquery ajax 局部table 刷新技术

原文:http://www.cnblogs.com/hnbiao/p/4646175.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!