thinkphp+ajax异步获取数据动态填充页面数据并分页（不刷新）

叁歲伎倆 2022-05-18 04:54 390阅读 0赞

**问题：在管理系统中点击左边的树形菜单，比如说有一个目录叫部门，部门下面有职位，点击这个职位可以把相关职位的人员信息全部显示在右边的列表中。**

**实现：点击职位-》获取到职位的名称-》ajax查找相关职位并返回数据-》模板渲染-》截取模板内部所需现实的部分-》通过js插入到视图中。**

**最开始自己想的是通过ajax获取到数据后循环拼接字符串，生产表格需要填充的代码，再通过（'\#table\_id'）.appennd('$str')来添加，老哥说这样需要再做js分页很麻烦，老哥便提供了这种方式，感觉实现很快，但是他说我想的那种方式才是最正规的，但做事要看效率。。。（学到了）**

**ajax：**

$.post("{:url('admin/index')}",{'click_role_key':key},function (html_data) {
            $('#usertable').html($(html_data).find('#usertable').html());
    });

**控制器：**

public function index(){
            $data  = User::getUserList();
            //爱好表查询
            $hobby=Hobby::all();
            //根据爱好id获取对应的爱好名
            Hobby::hobby_convert($data,$hobby);
            //部门查询
            $department=User::getDepartmentList();
            //角色查询
            $role=Role::all();
    
            $this->assign('user',$data);
            $this->assign('department',$department);
            $this->assign('role',$role);
            $this->assign('hobby',$hobby);
            return $this->fetch('index/empty');
        }

**模型：**

public static function getUserList(){
            $key = input('param.key','');
            $click_department_key=input('param.click_department_key');
            $click_role_key=input('param.click_role_key');
            $user_search = Db::table('user')
                ->alias('user')
                ->join('department dpment','user.did=dpment.did')
                ->join('role role','user.rid=role.rid')
                ->field('uid,uname,user.did,user.rid,department,rolename,hobby');
    
            $user_search->whereNull('delete_at');
    
            if(trim($key)){
                $user_search->where('uname','like','%'.$key.'%');
            }
            if(trim($click_department_key)!=''){
                $user_search->where('department','like','%'.$click_department_key.'%');
                return $user_search->paginate(2,false,['query'=>['click_department_key'=>$click_department_key]]);
            }
            if(trim($click_role_key)!=''){
                $user_search->where('rolename','like','%'.$click_role_key.'%');
                return $user_search->paginate(2,false,['query'=>['click_role_key'=>$click_role_key]]);
            }
    
            return $user_search->paginate(2);
        }

**视图：**

![70][]

**重点：**

**1.分页**

return $user_search->paginate(2,false,['query'=>['click_role_key'=>$click_role_key]]);

**2.视图替换**

$('#usertable').html($(html_data).find('#usertable').html());

**这里返回的是整个渲染过后的视图字段，再从中取我们需要显示的部分填充到现有的页面中**

![70 1][]

[70]: /images/20220518/cbc985180bb94123b64692cd08cf2395.png
[70 1]: /images/20220518/431dc582d629432ea54e3b3b3668a6bf.png