CI框架的分页与DataTables插件在一起

杂散   755阅读

在后台的列表内容显示的解决方法上面直接使用jquery的表格插件DataTables,非常简单快捷的解决了分页等的问题。随着代码的不断更新,我开始考虑到偷懒可能会带来一些问题,主要是担心性能的问题。

DataTables的原理:

把所有的列表行内容加载到页面,让和DataTables插件以这些列表行内容为数据源进行加工,排列和分页。

官方网站上说到这种方法应付几千几万条数据是没有任何问题的,但是,我的服务器资源很差,所以,我担心撑不住。

为了实现DataTables一样的样式以及分页功能,我想到使用CodeIgniter的分页类来实现分页,在列表内容一行一行加载到页面上之后,由DataTables接手,进行搜索、排序等等。

直接贴代码。

控制器:

    public function index()
    {
        $fenye = $this->uri->segment(3,0);       
        $this->load->library('pagination');
        $this->load->model('admin/user_model');
        $data['fenye'] = $fenye+1;
        $data['total'] = $this->user_model->user_total();
        $data['per_end'] = ($data['total']-$data['fenye'])>10?$fenye+10:$data['total'];
        $config['base_url'] = site_url().'/admin_user/index/';
        $config['total_rows'] = $data['total'];
        $config['per_page'] = 10;
        $config['first_tag_open'] = '<li class="paginate_button previous">';
        $config['first_tag_close'] = '</li>';
        $config['last_tag_open'] = '<li class="paginate_button next">';
        $config['last_tag_close'] = '</li>';
        $config['prev_tag_open'] = '<li class="paginate_button previous">';
        $config['prev_tag_close'] = '</li>';
        $config['prev_link'] = '上一页';
        $config['next_tag_open'] = '<li class="paginate_button next">';
        $config['next_tag_close'] = '</li>';
        $config['next_link'] = '下一页';
        $config['cur_tag_open'] = '<li class="paginate_button active"><a href="#">';
        $config['cur_tag_close'] = '</a></li>';
        $config['num_tag_open'] = '<li class="paginate_button">';
        $config['num_tag_close'] = '</li>';
        $this->pagination->initialize($config);
        $data['user_list'] = $this->user_model->user_list($fenye);        
        $this->load->view('admin/user_list',$data);        
    }

模型:

    public function user_list($fenye = NULL,$lmt = '10')
    {
        $this->load->database();
        $query = $this->db->select('*')
                ->from($this->config->item('user'))
                ->limit($lmt,$fenye)
                ->order_by('id','asc')
                ->get();
        $this->db->close();
        return $query->result_array();
        
    }
    public function user_total()
    {
        $this->load->database();
        $query = $this->db->select('id')
                ->from($this->config->item('user'))
                ->get();
        $this->db->close();
        return $query->num_rows();
    }

视图:

      <div class="row">
          <div class="col-xs-12">
          <h3 class="page-header">用户列表</h3>
          </div>
          <div class="col-xs-12">
            <div class="table-responsive">
            <table id="articles" class="table table-bordered table-hover">
            <thead>
                <tr class="text-c">                    
                                                <th>ID</th>
                                                <th>用户名</th>
                                                <th>密码</th>
                                                <th>管理员</th>
                                                <th>操作</th>
                </tr>
            </thead>
            <tbody>
                             <?php foreach ($user_list as $user):?>
                            <?php
                            $id =$user['id'];
                            ?>
                <tr class="text-c">
                                                <td><?=$user['id']?></td>
                                                <td class="text-l"><?=$user['username']?></td>
                                                <td class="text-l"><?=$user['password']?></td>
                                                <td class="text-l"><?=$user['flag']?></td>
                                                <td class="f-14"><a title="编辑" href="<?=$site_url?>/admin_user/edit/<?=$user['id']?>" style="text-decoration:none"><i class="glyphicon glyphicon-pencil"></i></a> 
                                                    <a title="删除" href="<?=$site_url?>/admin_user/del/<?=$user['id']?>" class="ml-5" style="text-decoration:none"><i class="glyphicon glyphicon-trash"></i></a></td>
                </tr>
                                <?php endforeach;?>
            </tbody>
        </table>
            </div>
          </div>
        </div>
      <!-- /.row -->
      <div class="row">
            <div class="col-sm-5">
                <div class="dataTables_info" id="articles_info" role="status" aria-live="polite">
                    显示 <?=$fenye?> 到 <?=$per_end?> 共 <?=$total?> 条
                </div>                    
            </div>
          <div class="col-sm-7">
              <div class="dataTables_paginate paging_simple_numbers" id="articles_paginate">
                <ul class="pagination">
                    <?php
                    echo $this->pagination->create_links();
                    ?>
                </ul>
              </div>
          </div>
      </div>

接下来是DataTables的js脚本:

<script>
  $(function () {    
    $('#articles').DataTable({
        "paging": false,
        "lengthChange": false,
        "searching": true,
        "ordering": true,
        "info": false,
        "autoWidth": false,
        "aaSorting": [[ 0, "asc" ]],//默认第几个排序
        "bStateSave": false,//状态保存
        "aoColumnDefs": [
        //{"bVisible": false, "aTargets": [ 3 ]} //控制列的隐藏显示
        {"orderable":false,"aTargets":[4]}// 不参与排序的列
        ],
        "language": {
    "decimal":        "",
    "emptyTable":     "没有数据",
    "info":           "显示 _START_ 到 _END_ 共 _TOTAL_ 条",
    "infoEmpty":      "显示 0 到 0 共 0 条",
    "infoFiltered":   "(从 _MAX_ 中过滤)",
    "infoPostFix":    "",
    "thousands":      ",",
    "lengthMenu":     "显示 _MENU_ 条",
    "loadingRecords": "加载中...",
    "processing":     "进行中...",
    "search":         "搜索:",
    "zeroRecords":    "没有匹配记录",
    "paginate": {
        "first":      "首页",
        "last":       "末页",
        "next":       "下一页",
        "previous":   "上一页"
    },
    "aria": {
        "sortAscending":  ": 顺序排列",
        "sortDescending": ": 倒序排列"
    }
}
    });
  });
</script>

以上代码最终的效果图类似如下:

火狐截图_2016-12-10T17-03-24.825Z.jpg

喜欢请常来,打赏请随意。

  1. ProgramSay    回复

    以前用过TP框架,CI还真没用过!
  2. 安满    回复

    @ProgramSay:我反而没有研究过TP框架。倒是看到很多程序是用TP框架来写的。
  3. 打样机    回复

    这个框架是属于后端的吧?
  4. 凯哥自媒体    回复

    分享的不错,谢谢