范特西的博客

我不怕千万人阻挡,只怕自己投降

CI 框架 AJAX 无刷新分页 实现

在弹窗内进行分页,因为是在之前代码上增加分页,所以采用拼接方法,其实这种方法并不好。如果采用vue 应该更好一些。

控制器:

    /**
     * 单位 详情
     * @author shenguowei
     */
    public function show()
    {
        $page                        = $this->I('page') ?: 1;
        $limit                       = 10;
        $department_id               = $this->I('department_id');
        $data                        = $this->department_service->get_department_info_by_page($department_id, $page, $limit);
        $this->view_param['details'] = $data['details'];
        $is_admin                    = 0;
        if ($_SESSION['user_auth']['admin_group'] == 1) {
            $is_admin = 1;
        }
        $data['is_admin'] = $is_admin;

        if (!empty($this->view_param['details'])) {

            $this->response_service->success('Success', 200, TRUE, $data);

        }
        else {
            $this->response_service->error();
        }
    }






   服务层:

/**
     * @author shenguowei
     * @param $department_id
     * @param $page
     * @param $limit
     * @return array|bool
     */
    public function get_department_info_by_page($department_id, $page, $limit)
    {
        $data      = [];
        $_page_url = site_url('index.php/auth/department/show');

        if (!$department_id) {
            return FALSE;
        }

        $department_info = $this->department_model->get_one_department(['department_id' => $department_id], 'department_name');
        if (!$department_info) {
            $this->add_message($this->lang->language['tip_not_exsit_depart']);
            return FALSE;
        }
        $number = 0;
        $users  = $this->db->from('user')->where('is_delete', 0)->where('department_1', $department_id)->get()->result_array();

        if (!empty($users)) {
            $number = count($users);
        }

        if (intval($page) <= 1) {
            $page = 1;
        }

        $pages = intval(ceil($number / $limit));
        if ($pages != 0) {
            if (intval($page) >= $pages) {
                $page = $pages;
            }
        }

        $start = (intval($page) - 1) * $limit;

        $this->load->model('user_model');

  $detail_sql = "SELECT uid,truename,mobile,department_1 as department_id FROM goms_user WHERE department_1={$department_id} AND is_delete=0  LIMIT {$start},10";

     $data['details'] = $this->db->query($detail_sql)->result_array();
        $data['department_name'] = $department_info['department_name'];
        $pagination_html         = $this->get_pagination_html_ajax($number, $limit, $page, $_page_url, $theme = 'white', $button_total = 8);
        $data['pagination_html'] = $pagination_html;
        $data['total']           = $pages;
        if (!$data) {
            return FALSE;
        }
        return $data;
    }

js:部分


  //獲取單位  詳情
    $table.on("click", ".js-detail", function () {
        // $('#userList').css('display','block');
        var department_id = $(this).attr('department_id');
        view_detail(department_id,1);
        // view_detail($(this));
    });



    //查看详情
    function view_detail(department_id,page) {
        var page = page;
        var loadData = function(department_id,page,callback){
            $.ajax({
                url: DEPART_DETAIL_URL + "?department_id=" + department_id+"&page="+page,
                type: 'get',
                dataType:'json'
            }).done(function(res){
                callback(res);
            });
        };

        if(page == 1){
            loadData(department_id,page,function(res){
                if(res.code == 200){

                    var detail = res.data.details;
                    var contentHTML = '<div id="userList">\n' +
                        '<div class="lm-dialog lm-dialog-user-list" rel="111">\n' +
                        '<a href="#" class="lm-dialog-close js-close">×</a>\n' +
                        '<div class="lm-dialog-header clearfix">\n' +
                        '<h4 class="lm-dialog-header-title pull-left">' + NAME + '</h4>\n' +
                        '<span class="lm-dialog-header-explain pull-right">' + DEPARTMENT_DETAIL + '</span>\n' +
                        '</div>\n' +
                        '            <!-- /lm-dialog-header -->\n' +
                        '<div class="lm-dialog-body">\n' +
                        '<div class="lm-table-wrapper">\n' +
                        '<table class="lm-table lm-table-hover text-center">\n' +
                        '<thead>\n' +
                        '<tr class="row-fluid">\n' +
                        '<th>' + NAME + '</th>\n' +
                        '<th>' + MOBILE + '</th>\n' +
                        '<th colspan="4"></th>\n' +
                        '</tr>\n' +
                        '</thead>\n' +
                        '<tbody>';

                    for (var i = 0; i < detail.length; i++) {

                        contentHTML += '<tr class="row-fluid">\n';
                        if (res.data.is_admin == 1) {
                            contentHTML += '<td class="col-fluid-3" >' + detail[i].truename + '</td>\n' +
                                '<td class="col-fluid-3">' + detail[i].mobile + '</td>\n' +
                                '<td class="col-fluid-2"><a uid="' + detail[i].uid + '" class="lm-link js-manager js-view-log">' + LOGIN_LOG + '</a></td>\n' +
                                '<td class="col-fluid-2">\n' +
                                '<a uid="' + detail[i].uid + '" class="lm-link js-reset-pwd">' + RESET_PWD + '</a>\n' +
                                '</td>\n' +
                                '<td class="col-fluid-1">\n' +
                                '<a uid="' + detail[i].uid + '" class="lm-link js-modify js-edit-user">' + EDIT + '</a>\n' +
                                '</td>\n' +
                                '<td class="col-fluid-1">\n' +
                                '<a uid="' + detail[i].uid + '" class="lm-link js-delete js-delete-user">' + DELETE + '</a>\n' +
                                '</td>\n';
                        } else {
                            contentHTML += '<td class="col-fluid-4" >' + detail[i].truename + '</td>\n' +
                                '<td class="col-fluid-4">' + detail[i].mobile + '</td>\n' +
                                '<td class="col-fluid-4"><a uid="' + detail[i].uid + '" class="lm-link js-manager js-view-log">' + LOGIN_LOG + '</a></td>\n';
                        }
                        contentHTML += '</tr>';
                    }
                    contentHTML += '</tbody>\n' +
                        '</table>\n' +
                        '</div>\n' +
                        '<div class="zh-page text-right zh-mt-20">\n' +
                        '<div class="zh-page-content" style="color:white;">\n' +
                        res.data.pagination_html +
                        '</div>\n' +
                        '</div>\n' +
                        '</div></div></div>';
                    showDetailLayer(contentHTML,res.data.total);

                }else{

                    contentHTML = ' <div id="managerList">\n' +
                        '        <p role="tip-auto-close" style="padding: 15px; color: #fff; font-size: 14px; background-color: rgba(0, 0, 0,.8);">\n' +
                         TIP_NULL_DATA +
                        '        </p>\n' +
                        '    </div>'
                    showDetailLayer(contentHTML,0);
                }

            });
        }


        //拼接 详情列表内容
         function renderDOM(res) {
             var fragment = [];
             var detail = res.data.details;
             var html;
             for (var i = 0; i < detail.length; i++) {

                 if(res.data.is_admin == 1){
                    html = ['<tr class="row-fluid">',
                         '  <td class="col-fluid-3">' + detail[i].truename + '</td>',
                         '  <td class="col-fluid-3">' + detail[i].mobile + '</td>',
                         '  <td class="col-fluid-2"><a uid="' + detail[i].uid + '" class="lm-link js-manager js-view-log">' + LOGIN_LOG + '</a></td>',
                         '  <td class="col-fluid-2">',
                         '      <a uid="' + detail[i].uid + '" class="lm-link js-reset-pwd">' + RESET_PWD + '</a>',
                         '  </td>',
                         '  <td class="col-fluid-1">',
                         '      <a uid="' + detail[i].uid + '" class="lm-link js-modify js-edit-user">' + EDIT + '</a>',
                         '  </td>',
                         '  <td class="col-fluid-1">',
                         '      <a uid="' + detail[i].uid + '" class="lm-link js-delete js-delete-user">' + DELETE + '</a>',
                         '  </td>',
                         '</tr>'].join("")
                 }else{
                     html = ['<tr class="row-fluid">',
                         '  <td class="col-fluid-4" >' + detail[i].truename + '</td>',
                         '  <td class="col-fluid-4">' + detail[i].mobile + '</td>',
                         '  <td class="col-fluid-4"><a uid="' + detail[i].uid + '" class="lm-link js-manager js-view-log">' + LOGIN_LOG + '</a></td>',
                         '</tr>'].join("")
                 }

                 fragment.push(html);
             }

             return fragment.join("");
         }

         function showDetailLayer(contentHTML,total){
             return layer.open({
                 type: 1,
                 title: false,
                 closeBtn: 0,
                 shadeClose: false,
                 move: '.lm-dialog-header',
                 skin: 'lm-dialog-layer',
                 content: contentHTML,
                 success: function (dialog) {
                     var $pageItem = dialog.find("ul .lm-pagination-page");
                     var pageStyle = function (trigger){
                         $pageItem.removeClass("page-active");
                         $(trigger).addClass("page-active");
                     };

                     // dialog.on('click', '.js-view-admin', function () {
                     //
                     //     view_admin($(this))
                     // });
                     dialog.on('click','.js-reset-pwd',function () {
                         reset_psw($(this));
                     });
                     dialog.on('click','.js-delete-user',function(){
                         delete_user($(this));
                     });
                     dialog.on('click','.js-edit-user',function(){
                         edit_user($(this));
                     });
                     dialog.on('click','.js-view-log',function(){
                         view_login_log($(this));
                     });
                     dialog.on("click", ".js-close", function () {
                         layer.closeAll();
                         return false;
                     });

                      //普通页
                     dialog.on("click",".js-pagination-page", function(){
                         page = $(this).data('page');
                         pageStyle(this);
                         loadData(department_id, page, function(res){
                             dialog.find("tbody").html(renderDOM(res));
                         });

                     });
                     //上一页
                     dialog.on("click",".js-pagination-prev", function(){
                         page = Math.max(--page,1);
                         pageStyle($pageItem.filter("[data-page="+page+"]"));
                         loadData(department_id, page, function(res){
                             dialog.find("tbody").html(renderDOM(res));
                         });
                     });
                     //下一页
                     dialog.on("click",".js-pagination-next",function(){
                         // var max = $(this);
                         page=Math.min(++page, total);
                         pageStyle($pageItem.filter("[data-page="+page+"]"));
                         loadData(department_id, page, function(res){
                             dialog.find("tbody").html(renderDOM(res));
                         });
                     });

                     if (dialog.find("[role='tip-auto-close']").length > 0) {
                         setTimeout(function () {
                             layer.closeAll();
                         }, 2000);
                     }
                 }
             });
         }
    }
    ```












阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/uknow0904/article/details/80353174
个人分类: PHP JS/jQuery
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

不良信息举报

CI 框架 AJAX 无刷新分页 实现

最多只允许输入30个字

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭