CI 框架 AJAX 无刷新分页 实现

最新推荐文章于 2021-08-05 20:53:14 发布
最新推荐文章于 2021-08-05 20:53:14 发布
阅读量581 收藏
点赞数
分类专栏： 前端 文章标签： CI框架 ajax 无刷新分页
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/uknow0904/article/details/80353174
版权

在弹窗内进行分页，因为是在之前代码上增加分页，所以采用拼接方法，其实这种方法并不好。如果采用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);
                     }
                 }
             });
         }
    }
    ```
范特西Fantasy
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
codeigniter 实现无刷新(ajax)分页
老毕的技术博客
08-06 3126
我们都知道codeigniter（以下都简称CI）有分页的类库，现在我们就基于其原生的类库来创建一个我们所需要的ajax分页。 首先在  /application/libraries/ 目录下建立一个 MY_Pagination.php ，代码如下： <?php /** *417 add 主要是实现ajax分页 **/ class MY_Pagination extends C
jQuery的ajax在CI框架中的应用
01-28
( jQuery的ajax在CI框架中的应用.rar )( jQuery的ajax在CI框架中的应用.rar ) 您可以上传小于110MB的文件
ci分页查询ajax,CI支持AJAX分页
weixin_36480303的博客
08-05 151
隔了几年又接触了CI框架，需要做个AJAX分页，以前也就是懂个皮毛，现在是现学活用了。首先来个正常分页的demopublic function querylog(){$data = [];if(!empty($_GET["stime"])){$current_url= 'http://'.$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI'];}else{$cu...
ci框架+ajax上传文件
不看一的博客
10-30 1268
前台上传部分 function funUpload() { var fd = new FormData(); //这个地方是你的文件对象 var file; fd.append('file', file);//加入文件对象 $.ajax({ //上传路径 url:"&lt;?= site_url('toefltpo/sp...
【PHP】codeigniter结合ajax实现登录
Morliasde的博客
05-01 4942
之前的文章中介绍了利用codeigniter框架中的表单来实现登录，不过这种方式相对原始，这里介绍一种利用ajax的数据传递方式。 前端代码： 首先需要了CI的session，直接使用了PHP原生的session机制，以便在CI的文件夹外也能调用session。 js调用方面，我调用了 "../lib/jquery/jquery.md5.js"  "../lib/jquery/jquer
CI框架（ajax分页，全选，反选，不选，批量删除）完整代码详解
12-18
在本篇文章中，我们将深入探讨CodeIgniter框架中实现AJAX分页、全选、反选、不选以及批量删除的功能。CodeIgniter是一个高效且轻量级的PHP框架，它提供了一套简洁的工具，使得开发人员可以快速构建高质量的Web应用。...
CI开发的小型电商
04-23
在"CI开发的小型电商"项目中，我们可以看到一个完整的电商解决方案，它充分利用了CI框架的优势来实现各种功能。这个项目可能涵盖了以下关键知识点： 1. **MVC架构**：CI遵循模型-视图-控制器（MVC）设计模式，使得...
CI留言本实现
03-22
- **用户交互**：创建友好的用户界面，使用AJAX实现无刷新的留言提交和加载更多功能，提升交互性。 - **安全防护**：对用户提交的数据进行过滤和清理，防止SQL注入等安全问题，同时可以启用CI的XSS防护功能，保护...
CI 新手入门例子
05-04
**综上所述，这个压缩包文件可能包含的代码示例涵盖了CI框架的基本使用，包括数据库操作、用户会话管理、表单验证、前端AJAX交互、安全的验证码功能、文本编辑器的集成以及实用的分页功能。这些都是一个初学者在使用...
codeigniter分页
10-03
- 使用AJAX分页可提供更好的用户体验，用户无需刷新整个页面即可切换页码。 7. **扩展与优化**： 除了基本的分页功能，还可以根据需求添加更多特性，如跳转至第一页和最后一页的链接，或者添加记录总数显示。 ...
CI的AJAX分页另类实现
拔萝卜的码农
03-07 2526
看了一下CI的分页类没有写到关于AJAX的内容，也在论坛上看到其他几位大神写的分页类扩展，感觉其实是没有必要。 在现有的基础上做了一下小小的改动还是能实现的。 下面进入正题： CI的原生分页类中有一个参数 $config[anchor_class] 这个参数是用来设置分页链接的样式的，所以我们可以设置成这样：   ? $config[anchor_cl
CI框架内置分页代码
李斌的BLOG
12-25 1573
Controller 控制器代码 <?php defined('BASEPATH') OR exit('No direct script access allowed'); class Welcome extends CI_Controller { /* CI 框架内置分页 */ public function __construct() { parent::__const
CI框架---分页
老杨的博客
09-03 2041
public function getUserData(){ //连接数据库 $this->load->database(); //实列化模型 $this->load->model('user_model','user'); //获取user表总记录数 $total=$this->user->getCount(); $perpage=2; //载入分页类
ci分页查询ajax,解析CI的AJAX分页 另类实现方法_PHP教程
weixin_26749843的博客
08-05 299
看了一下CI的分页类没有写到关于AJAX的内容，也在论坛上看到其他几位大神写的分页类扩展，感觉其实是没有必要。在现有的基础上做了一下小小的改动还是能实现的。下面进入正题：CI的原生分页类中有一个参数 $config[anchor_class]这个参数是用来设置分页链接的样式的，所以我们可以设置成这样：$config[anchor_class] = "class=ajax_fpage";然后在vie...
在 CodeIgniter 中使用 jQuery 实现 AJAX
Just Code
12-12 305
Jquery高效的开发速度，良好的封装和简洁而灵活的语法都给我留下了很深刻 的印象。 而它的ajax类让开发ajax成为了一种乐趣。   你可以ajax类轻易的POST或者GET request。 它能帮助用户完成codeigniter不能完成的功能。   CI 的MVC 分离也做的非常的好，令人眼前一亮。但不可否认，ci也有它存在的问题。那就是对新技术的支持不够。类似json， ...
CI框架分页类及其实现
SKYYYF的专栏
09-28 1749
不BB了，直接上代码 Model类 class Page_model extends CI_Model { public function get_page() { //这是一个sql语句，查询需要的结果，并将结果返回 $data = $this->db->select('id,name,age')->from('user')->get()->r
CodeIgniter CI 分页功能的使用和说明
Leon
03-28 8398
在这里分析三种不同的使用方式： 主要是控制器和界面中内容的说明。 --------------------------------------------------------------------------1------------------------------------------------------------------------------ 第一种使用方法（CI
ci框架ajax无刷新分页,tp5框架无刷新分页实现方法分析
weixin_42204303的博客
08-05 122
tp5框架无刷新分页实现方法分析,分页,页码,跳转,页面,框架tp5框架无刷新分页实现方法分析易采站长站，站长之家为您整理了tp5框架无刷新分页实现方法分析的相关内容。本文实例讲述了tp5框架无刷新分页实现方法。分享给大家供大家参考，具体如下：已tp5 分页为例，1.默认生成的分页 页码如下：«12»2.点击页码 值，跳转到对应的页面，并get传 page='1' or '2';所以无刷新需要做...
CI框架分页类的使用（2）
will5451的博客
05-05 1073
$this->load->model("article_model","art"); //载入分页类 $this->load->library('pagination'); $perPage = 2; //配置项设置 $config['base_url'] = site_url('admin/article/index'); $config['total_rows'] = $this->db->
asp.net Repeater之非常好的数据分页
10-29
该控件通过添加额外的功能，实现了Ajax分页，提高了用户体验，因为用户无需刷新整个页面就能切换页面。然而，需要注意的是，由于Ajax分页的特性，它不支持传递额外的参数，这意味着分页操作只能基于服务器端的当前...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值