转自

ajax分页的重点步骤:

1.HTML设置隐藏域,保存当前页码的参数。

2.创建AJAX请求并修改页码参数,然后把页码参数发送给后端。

3.后端收到页码参数,计算偏移量,读取指定页码的数据,并返回json格式的数据。

4.AJAX获取到后端传回的数据,解开JSON格式,循环遍历并拼接字符串。

5.将拼接好的字符串,替换到HTML里(修改HTML元素的内容)。

 

ajax搜索的重点步骤:

1.获取HTML里要搜索的值。

2.创建AJAX请求,然后把搜索参数发送给后端。

3.后端收到搜索参数,读取指定的需要搜索的数据,并返回json格式的数据。

4.AJAX获取到后端传回的数据,解开JSON格式,循环遍历并拼接字符串。

5.将拼接好的字符串,替换到HTML里(修改HTML元素的内容)。

//定义一个分页的方法
     public function fenye(){
         //查询满足条件的总条数
         $count = M("regis")->count();
         //设置每页显示的条数
         $length = 3;
         //求出总页数
         $zong_page = ceil($count/$length);
         //接收一下当前页
         $page = empty($_GET['page'])? 1 : $_GET['page'];
         //求出偏移量
         $limit = ($page-1)*$length;
         //求出每页的数据
         $data = M("regis")->limit($limit,$length)->select();
         //拼接数组
         $arr['list'] = $data;
         $arr['home_page'] = 1;
         $arr['last_page'] = $zong_page;        $this->assign('arr',$arr);
         $this->display('show');     }
     public function fy(){
         //查询满足条件的总条数
         $count = M("regis")->count();
         //设置每页显示的条数
         $length = 3;
         //求出总页数
         $zong_page = ceil($count/$length);
         //接收一下当前页
         $page = empty($_GET['page'])? 1 : $_GET['page'];
         //求出偏移量
         $limit = ($page-1)*$length;
         //求出每页的数据
         $data = M("regis")->limit($limit,$length)->select();
         //拼接数组
         $arr['list'] = $data;
         $arr['home_page'] = 1;
         $arr['last_page'] = $zong_page;        echo json_encode($arr);
     }     //定义一个批量删除的方法
     public function delAll(){
         //接收传值
         $ids = I('get.id');
         //拼接条件
         $where['id']  = array('in',$ids);
         if(M("regis")->where($where)->delete()){
             echo 1;//成功输出1
         }else{
             echo 2;//失败输出2
         }
     } 
<!doctype html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport"
           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <title>Document</title>
 </head>
 <body>
 <table border="1">
     <tr>
         <th>选择</th>
         <th>ID</th>
         <th>用户名</th>
         <th>密码</th>
         <th>邮箱</th>
         <th>昵称</th>
         <th>注册时间</th>
     </tr>    <tbody id="tb">
         <foreach name="arr.list" item="v">
             <tr id="{$v.id}">
                 <td><input type="checkbox" name="check" value="{$v.id}"></td>
                 <td>{$v.id}</td>
                 <td fd="uname">{$v.uname}</td>
                 <td fd="pwd">{$v.pwd}</td>
                 <td fd="email">{$v.email}</td>
                 <td fd="nickname">{$v.nickname}</td>
                 <td>{$v.add_time|date="Y-m-d H:i:s",###}</td>
             </tr>
         </foreach>
     </tbody>
 </table>
 <!--当前页-->
 <input type="hidden" name="current_page" id="current_page" value="{$arr.home_page}">
 <!--尾页-->
 <input type="hidden" name="last_page" id="last_page" value="{$arr.last_page}"><a href="javascript:void(0);" class="page">首页</a>
 <a href="javascript:void(0);" class="page">上一页</a>
 <a href="javascript:void(0);" class="page">下一页</a>
 <a href="javascript:void(0);" class="page">尾页</a>
 <button id="del">删除</button> <script src="__PUBLIC__/js/jquery.js"></script>
 <script>
     //给删除按钮一个点击事件
     $("#del").click(function(){
         //定义一个空的数组
         var arr = [];
         //定位一下选中的多选框
         $("[type=checkbox]:checked").each(function(i){
             arr[i] = $(this).val();
         });        var ids = arr.toString();
        //发起请求
         $.get("{:U('Exam/delAll')}?id="+ids,function(data){
             if(data==1){
                 //成功
                 for(var i=0;i<arr.length;i++){
                     $("#"+arr[i]).remove();
                 }
             }else{
                 //失败
                 alert('删除失败');
                 return false;
             }
         });
     });     $(".page").click(function(){
         //获取当前页
         var current_page = $("#current_page").val();
         //获取一下最后一页
         var last_page = $("#last_page").val();        //获取a标签的值
         var a_val = $(this).text();        //判断页数
         if(a_val=='首页'){
             var page = 1;
         }else if(a_val=='上一页'){
             var page = parseInt(current_page)-1 <= 1 ? 1 : parseInt(current_page)-1;
         }else if(a_val == '下一页'){
             var page = parseInt(current_page)+1 >= last_page ? last_page : parseInt(current_page)+1;
         }else{
             var page = last_page;
         }        //请求
         $.get("{:U('Exam/fy')}?page="+page,function(data){
             //把拿到的数据转化成真正的json
             var res = JSON.parse(data);
             var arr = res.list;
             var str = '';
             // console.log(arr);
             for(var i=0;i<arr.length;i++){
                 str += "<tr>";
                 str += "<td><input type='checkbox' name='check' value='"+arr[i].id+"'></td>";
                 str += "<td>"+arr[i].id+"</td>";
                 str += "<td>"+arr[i].uname+"</td>";
                 str += "<td>"+arr[i].pwd+"</td>";
                 str += "<td>"+arr[i].email+"</td>";
                 str += "<td>"+arr[i].nickname+"</td>";
                 str += "<td>"+arr[i].add_time+"</td>";
                 str +="</tr>";
             }            $("#tb").html(str);
             $("#current_page").val(page);        });
     }); 
 
    // //先加载页面、再加载jq部分
     // $(document).ready(function () {
     //     //给每一个td一个双击事件
     //     $("td").dblclick(function () {
     //         //取td这个标签的内容
     //         var td_val = $(this).text();
     //         //获取要修改的数据库字段
     //         var td_attr_val = $(this).attr("fd");    //         //判断不支持的内容部分
     //         if(td_attr_val==undefined){
     //             alert('不支持修改这个内容');
     //             return false;
     //         }    //         //继续,支持的了
     //         //获取自增id
     //         var tr_val = $(this).parents().attr("id");    //         //想办法变成文本框
     //         $(this).html("<input type='text' id='cli"+td_val+"' value='"+td_val+"'>");    //         //文本框失效事件
     //         $("#cli"+td_val).blur(function () {
     //             //获取新值
     //             var new_val = $(this).val();    //             //请求后台
     //             $.post("{:U('Exam/jdjg')}",
     //                 {
     //                     //自增id
     //                     id:tr_val,
     //                     //字段名
     //                     fd_name:td_attr_val,
     //                     //字段的最新值
     //                     new_val:new_val
     //                 },
     //                 function(data){
     //                     //直接替换文本框
     //                     $("#cli"+td_val).parents("td").html(new_val);
     //                 });
     //         });    //     });
     // });
 </script>
 </body>
 </html>