登录  /  注册
博主信息
博文 81
粉丝 1
评论 0
访问量 121076
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
TP5.1中的ajax分页,搜索,单删,批删。
有什么是忘不了的的博客
原创
1193人浏览过

比较简单的写法。后台用得TP5.1框架和jq框架来做的。

贴一下我做好的效果图(搜素是按`学生姓名`):

image.png

image.png

<body>	
<input type="text" id="search"><button type="button">搜索</button>	
<table border="1">		
    <thead>			
        <tr>				
            <th>选择</th>				
            <th>学号</th>				
            <th>学生姓名</th>				
            <th>班级</th>				
            <th>性别</th>				
            <th>添加时间</th>				
            <th>操作</th>			
        </tr>		
     </thead>	
     //这里放查询出来的内容	
     <tbody>		
     </tbody>	
  </table>	
  <button type="button" id="delAll">批删</button>
  //这里放分页
  <div id="page">
  </div>
</body>
<script type="text/javascript">	
//全局变量用于保存搜索的值	
var search = '';	
//搜索	
$('button[type="button"]').click(function(){		 
    search = $('#search').val()		 //调用分页方法		
    show(1);	
})	
//加载页面时的自执行	
$(function(){		
    show(1)	
})	
//分页方法	
function show(p = 1){		
    $.ajax({			
        url:'/home/save',//tp5中的路由地址			
        data:{p:p,search:search},//发送的内容			
        type:'get',//请求方式			
        //成功后的回调函数			
        success:function(msg){				
            //拼写tr字符串				
            var tr = '';				
            $.each(msg.data,function(i,v){					
                tr += '<tr><td><input type="checkbox" name="check" value="'+v['id']+'"/></td><td>'+v['id']+'</td><td>'+v['name']+'</td>
                <td>'+v['banji']+'</td><td>'+v['sex']+'</td><td>'+v['tian_time']+'</td><td><span onclick="del('+v['id']+','+p+')">删除</span></td></tr>'
        })				
            $("tbody").html(tr);				
            //拼写页码字符串				
            var a = '';				
            for (var i = 1; i <= msg.allye; i++) {					
                a+='<a href="javascript:;" onclick="show('+i+')">'+i+'</a>   '				
            }				
            $("#page").html(a);			
        }		
    })	
}		
//批删	
$("#delAll").click(function(){		
    var check = $("input[name='check']:checked")		
    var id = []		
    for (var i = 0; i < check.length; i++) {			
        id.push(check.eq(i).val())		
    }		
    //调用单删方法		
    del(id)	
})	
//单删	
function del(id,p=1){		
    $.ajax({			
        url:'/home/del',			
        data:{id:id},			
        type:'get',			
        success:function(msg){				
            //成功调用分页方法				
            show(p);			
        }		
    })	
}
</script>
<?php
    namespace app\home\controller;
    use think\Controller;use think\Request;use app\home\model\Username;
    class Show extends Controller
    {
        //页面展示
        public function show()    
        { 
          return view();   
        }
        //ajax分页请求的页面
       public function save()    
       {       
          $p      = input('get.p',1);    //获取页码 
          $search = input('get.search');        //获取搜索的内容     
          $size   = 3;                  //每页显示条数
          $count  = Username::where('name','like',"%$search%")->count();  //查询总条数     
          $allye  = ceil($count/$size);     //总页数
          $p      = $p > $allye ? $allye : $p;  //防止传输过来的页码大于总页数     
          $data   = Username::where('name','like',"%$search%")->page($p,$size)->select()->toArray();        
          return json(['data'=>$data,'allye'=>$allye,'search'=>$search]) ;    
       }
       //单删操作
       public function del()    
       {       
           $id = input('get.id');        
           $re = Username::destroy($id);        
           if ($re) {            
               return ['code'=>1];        
           }else{            
               return ['code'=>0,'msg'=>'删除失败'];       
           }    
       }
      }


写的比较糙,不过凑活能用。



本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!
全部评论 文明上网理性发言,请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 登录PHP中文网,和优秀的人一起学习!
    全站2000+教程免费学