jquery实现分页+单删批删

//定义一个分页的方法
    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
        }
    }

html代码

<!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>

猜你喜欢

转载自www.cnblogs.com/hopelooking/p/9336792.html