【原创】无刷新分页+搜索-ajax分页+搜索教程【简单】注释全 精 简

浏览:6371 发布日期:2016/04/01 分类:技术分享 关键字: ajax无刷新分页搜索 Thinkphp无刷新分页搜索 Thinkphp分页搜索
分享一个简单的ajax分页+搜索 ,组合sql语句,实现任意条件搜索;(效率会慢这是肯定的 因为很多or )如果对你有帮助 直接带走 ;如果有疑问请留言。
需要文件,一个控制器方法,控制器方法名:function publish(){};
html页面2个:一个用来存ajax搜索出来的信息,给他一个名字:ajax_search.html,另一个是:publish.html
以下是控制器方法//php控制器代码
        public function publish(){
              //判断是否有ajax请求
        if(IS_AJAX){
              //接受数据
            $search_val = I('post.search_val');
         //创建一个无用搜索条件,为下面搜索任意字段做铺垫 哈哈
            $lawyer_arr_where='1 ';
         //如果没数据就不干,
            if ($search_val) {
             //$fields数组未需要搜索的字段
                $fields = array (
                        'xx_phone',
                        'xx_firm',
                        'xx_name'
                );
                                //把搜索的数据 根字段数组丢进去组合一个二维数组  任意字段模糊搜索,可根据自己的项目需求做修改
                $array = $this->buildWhereOfAnykey ( $search_val, $fields );
                                //声明一个空字符串
                $con = '';
                                //进行二次遍历,遍历数组,把数组转成sql语句 
                foreach ( $array as $k => $v ) {
                    if (count ( $v ) > 1) {
                        for($i = 0; $i < count ( $v ); $i ++) {
                            if ($i == 0) {
                                $con .= $k;
                            }
                            if ($v [$i] != 'like')
                                $v [$i] = " '" . $v [$i] . "' ";
                            $con .= ' ' . $v [$i];
                            if ($i == 1) {
                                $con .= ' or ';
                            }
                        }
                    }
                }
                                //将最后的那个 or 剔除,
                $con = substr ( $con, 0, - 3 );
                                //价格括号 完美 sql语句出来 
                $lawyer_arr_where .= ' and (' . $con . ') ';
            }

                        // 
            $wei_lawyer=M('xxx_lawyer');
            
            //导入内裤,各种内裤大同小异
            import('ORG.Util.Page');
                       //各种内裤大同小异,本教程是用TP 3.1自带内裤
            $count      = $wei_lawyer->where($lawyer_arr_where)->count();// 查询满足要求的总记录数
            $Page       = new Page($count,3);// 实例化分页类 传入总记录数和每页显示的记录数,【总页数,每页多少条】
            $show       = $Page->show();// 分页显示输出

                       //查出来的数据
            $lawyer_arr=$wei_lawyer->where($lawyer_arr_where)->order('ctime desc')->field('xxx_name,xx_id,xx_firm,openid')->limit($Page->firstRow.','.$Page->listRows)->select();
            
        
            
                        //分配 分页a标签
            $this->assign('page',$show);
                        //分配 查询数据,做ajax分页 不需要分配出去,但是做分页搜索就需要
            $this->assign('search_val',$search_val);
                        //分配 搜索出来的数据
            $this->assign('lawyer_arr',$lawyer_arr);
                        //这个步骤不需要用display,只能用fetch,其实fetch的功能跟display差不多,可以尝试把他打印出来,内容为一堆html,由于时间关系,一笔带过,但是fetch是不渲染出来。我们需要把他返回给html ajax那边
            $html = $this->fetch('ajax_search');

                        $this->ajaxReturn($html);


        }else{

        //不是ajax请求就跟上面差不多。
        $wei_lawyer=M('wei_lawyer');
        //看上面注释
        $lawyer_arr_where=' 1 ';
                //看上面注释
        import('ORG.Util.Page');
                //看上面注释
        $count      = $wei_lawyer->where($lawyer_arr_where)->count();// 查询满足要求的总记录数
        $Page       = new Page($count,3);// 实例化分页类 传入总记录数和每页显示的记录数
        $show       = $Page->show();// 分页显示输出

                //看上面注释
        $lawyer_arr=$wei_lawyer->where($lawyer_arr_where)->order('ctime desc')->field('xxr_name,id,xx_firm,openid')->limit($Page->firstRow.','.$Page->listRows)->select();
        
                //看上面注释
        $this->assign('page',$show);
        //看上面注释
        $this->assign('lawyer_arr',$lawyer_arr);
                //渲染静态页面
        $this->display();
        }

    
     }


         /**
     * 构造任意关键字搜索的条件
     * 
     * @param string $anykey
     *            关键字
     * @param string $fields
     *            字段名集合
     * @return mixed $where
     */
    protected function buildWhereOfAnykey($anykey, $fields) {
        $where = array ();
        foreach ( $fields as $f ) {
            $where [$f] = array (
                    'like',
                    "%$anykey%" 
            );
        }
        
        return $where;
    }
publish.html代码,html只提供有用代码,其他CSS样式需要自己写,以为我毕竟是做P(拍)H(黄)P(片)的             <section class="central" id="content_table">
                <h2>这个是遍历</h2>
                
                <ul class="central-search">
                    <volist name="lawyer_arr" id='vo'>
                        <li class="clearfix">
                            <div>
                                <img src="{$vo.pic}" alt="" />
                            </div>
                            <div class="central-text">
                                <p class="lawyer_name" >{$vo.xx_name}</p>
                                <p>{$vo.xxxx_firm}</p>
                            </div>
                        </li>
                    </volist>
                </ul>
                      <div id="page">
                       //输出分页数据
                        {$page}
                    </div>
            </section>
publish的JS 重要部分,用之前需要加载jquery<script type="text/javascript">
    $(function(){
       //var 一个空
        var searchval='';
      //给a标签 添加绑定一个点击事件,需要动态绑定,jquery 不同版本有不同绑定方法 
        $('#page a').live('click',function(){
            var pageObj = this;
            //获取a标签的网址
            var url = pageObj.href;

            //如果点击搜索按钮,获取搜索条件
            var search_val=searchval;
           //ajax
            $.ajax({
                type:'post',
                url:url,
                data:{
                        search_val:search_val,
                    },
                success:function(data){
                     //把返回的数据替换,替换,替换,意思就是把ajax_search.html里的所有数据替换
                     $('#content_table').html(data);
                }
            });
             //使a标签不跳转
             return false;
        });


        //点击搜索按钮
        $('#search_btn').live('click',function(){
//看上面注释
            var pageObj = this;
//看上面注释
            var url = pageObj.href;
//获取搜索条件
            var search_val=$('#search_value').val();
            
            $.ajax({
                type:'post',
                url:"{:U('publish')}",
                data:{
                        search_val:search_val,
                    },
                success:function(data){
//看上面注释
                     $('#content_table').html(data);
                }
            });
            //给全局变量赋值,
            searchval=search_val;
           //返回出去,作为分页是搜索条件,不然点下一页会没有条件
            return searchval;
           //防止跳转
            return false;
        })
    })

</script>
ajax_search.html代码,ajax_search.html里面的内容 其实是把遍历的html代码一整套复制下来,然后替换而已。<h2>遍历数据</h2>
                <p class="find-result">找到相关律师</p>
                <ul class="central-search">
                    <volist name="lawyer_arr" id='vo'>
                        <li class="clearfix">
                            <div>
                                <img src="{$vo.pic}" alt="" />
                            </div>
                            <div class="central-text">
                                <p class="xx_name">{$vo.xx_name}</p>
                                <p>{$vo.xx_firm}</p>
                            </div>
                        </li>
                    </volist>
                </ul>
                    <div id="page">
                        {$page}
                    </div>
最佳答案
评论( 相关
后面还有条评论,点击查看>>