CodeIgniter의 DataTables 서버 측 처리

CodeIgniter의 DataTables 서버 측 처리

이 튜토리얼에서는 Codeigniter에서 원격 서버 측 처리를 통해 DataTables jQuery 플러그인을 구현하는 가장 쉬운 방법에 대해 설명합니다. 여기에서는 Codeigniter에서 ajax를 통해 원격 MySQL 데이터베이스에서 데이터를 가져 오는 방법을 살펴 보겠습니다.

DataTables 는 최소한의 노력으로 일반 HTML 테이블에 정렬, 페이징 및 필터링 기능을 추가하는 데 도움이되는 jQuery Javascript 라이브러리 용 테이블 향상 플러그인입니다. 주요 목표는 일반 HTML 테이블에서 데이터의 접근성을 향상시키는 것입니다.

이 자습서에서는 6 개의 게시 요청 만 살펴보면됩니다.

  1. length : 테이블이 현재 그리기에서 표시 할 수있는 레코드 수입니다. 반환되는 레코드 수가 서버에 반환 할 레코드 수가 적지 않으면 반환되는 레코드 수가이 수와 같아야합니다.
  2. start : 페이징 첫 번째 레코드 표시기. 이것은 현재 데이터 세트의 시작 지점입니다 (인덱스 기준 0 개, 즉 0이 첫 번째 레코드 임).
  3. order [0] column : 순서를 적용 할 컬럼. 이것은 서버에도 제출되는 정보의 열 배열에 대한 인덱스 참조입니다.
  4. order [0] dir :이 열의 순서 방향입니다. 오름차순 또는 내림차순을 각각 나타내는 ASC 또는 DESC입니다.
  5. search [value] : 전역 검색 값입니다.
  6. draw : 카운터를 그 립니다 . 이것은 DataTables에서 서버 측 처리 요청의 Ajax 반환이 DataTables에 의해 순서대로 그려 지는지 확인하는 데 사용됩니다 (Ajax 요청은 비동기식이므로 순서를 벗어나 반환 할 수 있음).

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="utf-8" />
	<title>News - List</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta content="A fully featured admin theme which can be used to build CRM, CMS, etc." name="description" />
	<meta content="Coderthemes" name="author" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
	<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.24/css/jquery.dataTables.min.css"/>

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
	<script type="text/javascript" src="https://cdn.datatables.net/1.10.24/js/jquery.dataTables.min.js"></script>
</head>

<body>
	<!-- Begin page -->
	<div id="wrapper">
		
		<div class="content-page">
			<div class="content">
				<!-- Start Content-->
				<div class="container-fluid">
					<!-- start page title -->
					<div class="row">
						<div class="col-12">
							<div class="page-title-box">
								<div class="page-title-right">
								</div>
								<h4 class="page-title">News - List</h4>
							</div>
						</div>
					</div>
					<!-- end page title -->
					<div class="row">
						<div class="col-xl-12 col-lg-12">
							<div class="card-box">
								<table id="table-news" class="table table-bordered dt-responsive nowrap" width="100%">
									<thead>
										<tr>
											<th width="5%">No.</th>
											<th width="10%">Date</th>
											<th width="30%">Title</th>
											<th width="25%">Description</th>
											<th width="20%">Action</th>
										</tr>
									</thead>
									<tbody>
									</tbody>
								</table>
							</div>
						</div>
					</div>
					<!--- end row -->	
				</div>
				<!-- end container-fluid -->
			</div>
			<!-- end content -->
		</div>
	</div>
	<script>
	$(function() {
		var table_news = $('#table-news').DataTable({
			"processing":true,
			"serverSide":true,  
			"order":[], 
			"ajax": {
				url : '<?php echo base_url("news/news_list"); ?>',
				type: "GET"  
			},
			"columnDefs":[  
				{  
					"targets":[0],  
					"orderable":false,
				},  
			], 
		});
		$("#table-news tbody").on('click', 'button', function() {
			var id = $(this).attr('data-id');
			if(this.name == "deleteButton") {
				var is_delete = confirm("Are your sure?");
				if(is_delete) {
					$.post('news/delete', {id: id}, function(result) {
						$(".result").html(result);
						table_news.ajax.reload();
					});
				}
			}
		});
	});
	</script>
</body>

</html>


<?php
defined('BASEPATH') OR exit('No direct script access allowed');

class News extends MY_Controller {

	public function __construct() {
		parent::__construct();
		$this->load->model('News_model', 'news');
		//
		$this->ip_address 	= $_SERVER['REMOTE_ADDR'];
		$this->datetime 	= date('Y-m-d H:i:s');
		$this->login_id 	= $this->session->userdata('login_id');
		$this->login_name 	= $this->session->userdata('login_name');
	}

	public function index() {
		$this->list();
	}

	public function list() {
		$data 					= [];
		$data['content_title'] 	= 'News - List'; 
		$data['status_list']	= $this->status->get_all(["status"=>"1"]);
		$this->load->view('list', $data);
	}

	public function news_datatable() {
		$arrayList = [];
		$result 	= $this->news_defer->getRows($this->input->get()); 
		$i 			= $this->input->get('start');
		foreach($result as $row) {
			$action = '
			<a href="'.base_url('news/edit?id='.$row->id).'" class="btn btn-sm btn-primary">
              <i class="fe-edit"></i> Edit</a>
			<button name="deleteButton" data-id="'.$row->id.'" class="btn btn-sm btn-danger">
              <i class="fe-trash"></i> Delete</button>
			';
			$arrayList [] = [
				++$i,
				nice_date($row->created_at, 'd-m-Y H:i:s'),
				$row->title,
				$row->description,
				$action
			];
		}
		$output = array(
			"draw" 				=> $this->input->get('draw'),
			"recordsTotal" 		=> $this->news_defer->countAll(),
			"recordsFiltered"	=> $this->news_defer->countFiltered($this->input->get()),
			"data" 				=> $arrayList,
		);

		echo json_encode($output);
	}

	public function delete() {
		$id 		= $this->input->post('id');
		$where 		= ['id' => $id];
		$result = $this->news->delete($where);
		if($result) {
			echo "deleted";
		}
	}
}


<?php
defined('BASEPATH') OR exit('No direct script access allowed');

class News_defer_model extends CI_Model {

	public function __construct() {
		parent::__construct();

    	$this->is_admin       = ($this->session->userdata('login_role') == "admin") ? true : false;
    	$this->login_id       = $this->session->userdata('login_id');
		//
		$this->table          = 'news_info';
		$fields               = $this->db->list_fields($this->table);
		$this->column_order   = $this->getColumnOrder($fields);
		$this->column_search  = $this->getColumnSearch($fields);
	}

	public function getColumnOrder($fields) {
		$list 		= [];
		$list[0] 	= null;
		foreach($fields as $field) {
			$list[] = $field;
		}
		return $list;
	}

	public function getColumnSearch($fields) {
		$list 		= [];
		foreach($fields as $field) {
			$list[] = $field;
		}
		return $list;
	}

	public function getRows($postData){
        $this->_get_datatables_query($postData);
        if($postData['length'] != -1){
            $this->db->limit($postData['length'], $postData['start']);
        }
        $query = $this->db->get();
        return $query->result();
    }

    public function countAll(){
        $this->db->from($this->table);
        return $this->db->count_all_results();
    }
    
    public function countFiltered($postData){
        $this->_get_datatables_query($postData);
        $query = $this->db->get();
        return $query->num_rows();
    }

    private function _get_datatables_query($postData){
         
        $this->db->from($this->table);
        if($this->is_admin) {
        	$this->db->where(["status"=>$postData['status']]);
        } else {
        	$this->db->where(["status"=>$postData['status'], "created_by"=>$this->login_id]);
        }
        $this->db->order_by('created_at', 'DESC');
 
        $i = 0;
        // loop searchable columns 
        foreach($this->column_search as $item){
            // if datatable send POST for search
            if($postData['search']['value']){
                // first loop
                if($i===0){
                    // open bracket
                    $this->db->group_start();
                    $this->db->like($item, $postData['search']['value']);
                }else{
                    $this->db->or_like($item, $postData['search']['value']);
                }
                // last loop
                if(count($this->column_search) - 1 == $i){
                    // close bracket
                    $this->db->group_end();
                }
            }
            $i++;
        }
         
        if(isset($postData['order'])){
            $this->db->order_by($this->column_order[$postData['order']['0']['column']], $postData['order']['0']['dir']);
        }else if(isset($this->order)){
            $order = $this->order;
            $this->db->order_by(key($order), $order[key($order)]);
        }
    }

}

Suggested posts

노코드 혁명: Webflow, Framer, Bubble.io,

노코드 혁명: Webflow, Framer, Bubble.io,

이 놀라운 노코드 플랫폼의 미개발 잠재력을 활용하면서 스릴 넘치는 혁신과 성공의 여정을 시작하십시오. 뛰어난 여성 기업가인 Sapna에 대한 이야기를 들려드리겠습니다.

시장 심리를 분석하기 위한 Node.js Twitter 봇 만들기

시장 심리를 분석하기 위한 Node.js Twitter 봇 만들기

트윗을 스트리밍하고 필터를 적용하여 시장 심리를 분석하는 Node.js 기반 트위터 봇을 만드는 방법을 알아봅시다! 소개 Twitter는 의견, 뉴스 및 아이디어를 공유하는 인기 있는 플랫폼입니다.

Related posts

느린 침식: 사람들이 경력을 낭비하는 방식 공개

느린 침식: 사람들이 경력을 낭비하는 방식 공개

오늘날과 같이 급변하고 경쟁이 치열한 세상에서 경력은 개인의 성장, 재정적 안정 및 전반적인 삶의 만족도에 중요한 역할을 합니다. 그러나 많은 사람들은 침체와 불만족의 끊임없는 순환에 휩싸여 직업 생활에서 점차 쇠퇴하고 있습니다.

기다림의 계절에 할 수 있는 것(기술 분야에서 첫 직장을 얻기 위해 기다림)

기다림의 계절에 할 수 있는 것(기술 분야에서 첫 직장을 얻기 위해 기다림)

새로운 직업으로 전환하는 것은 혼자서 하려고 한다면 매우 어려울 수 있습니다. 귀하와 동일한 학습 수준에 있고 유사한 목표, 끈기 및 추진력을 공유하는 책임 파트너를 찾는 것이 중요합니다.

미디어 재검토: McChesney의 다섯 가지 진실과 커뮤니케이션의 미래

오늘날의 초연결 세계에서 미디어 시스템은 여론을 형성하고 결과적으로 민주적 의사 결정에 중추적인 역할을 합니다. 의사소통의 정치경제학에 대한 심오한 분석에서 학자인 Robert McChesney는 기존의 통념에 도전하고 그가 미디어에 대한 "다섯 가지 진실"이라고 부르는 것을 제시합니다.

카우보이의 거짓말

거대 기업이 미국인에게 강력한 거짓을 판매하는 방법

카우보이의 거짓말

햇빛의 첫 번째 광선이 평원의 서리가 내린 풀을 비추는 서쪽 언덕의 눈부신 황금빛 아침입니다. 온화하고 거대한 새까만 앵거스 소 떼가 일출을 배경으로 윤곽을 그리며 다져진 길을 따라 모두가 잘 아는 지역으로 향합니다. 조식 바.