CI 묻고 답하기

제목 ajax로 출력한 데이터를 페이징 하고자 합니다.
카테고리 CI 2, 3
글쓴이 정수리 작성시각 2016/10/11 13:15:54
댓글 : 15 추천 : 0 스크랩 : 0 조회수 : 30304   RSS

페이지에니션 라이브러리가 제대로 호출되어 

 

원하는 대로 페이징을 하였습니다.

 

ajax를 통해 부분적으로 새로 갱신하는 부분에 페이징화를 할려고 합니다.

 

포럼에서 찾아보니 댓글로 ajax로 구현된것은 페이징화가 어렵다는 댓글이 많더라구요;

 

몇몇의 댓글을 참고하여 만들려고 시도하였습니다.

 

 

$('button[name="gubun"]').click(function(){//ajax 호출 부분
			var ck_pur = $(this).val();
			var url = urlinfo();
			$.ajax({
				type:'post',
				url:url+'m_jds_c/gg_sh_gubun',
				dataType:'json',
				data:{
					ck_pur:ck_pur
				},
				success:function(data){		
					$('#test tr:gt(0)').remove();
						var output = gg_sh_output(data)
						$('#test').append(output);
				},

 

 

function gg_sh_gubun(){//ajax 페이징 테스트
			
			$config['base_url'] = base_url().'index.php/m_jds_c/gg_sh_gubun';
			$config['total_rows'] = $this->M_model->gg_sh_gubun($ck_pur, 'count');
			$config['per_page'] = 5;
			$config['uri_segment'] = 5;//
			
			$this->pagination->initialize($config);

			$data['pagination'] =  $this->pagination->create_links();//페이지 링크를 생헝

			$ck_pur = $this->input->post('ck_pur', true);
			
			$page =  $this->uri->segment(5, 1);//
			
			if($page>1){

				$start = (ceil($page/$config['per_page']))*$config['per_page'];

			}else{

				$start = ($page-1)*$config['per_page'];

			}
			$limit = $config['per_page'];
			
			$result = $this->M_model->gg_sh_gubun($ck_pur, '', $start, $limit);

			echo json_encode($result);
		}

이렇게 한후 echo jds_encode($result)를 json형태로 데이터를 보내준후

 

output+='</tr>';
				output+='<tr>';
				output+='<td>';
				output+='<?='+data.pagination+'?>';//페이징처리부분
				output+='</td>';
				output+='</tr>';

위의 코드 경우 데이터를 받아온뒤 출력형태를 만들고 원하는 위치에 출력을 하였습니다

 

화면에 출력된 데이터의 경우 정해진 갯수가에 맞게 3개가 출력이 되었지만

 

하단에 페이징처리 부분이 출력이 되지않네요;;

 

ajax로 페이징 처리 시 위의 방식으로 사용하면 안되는가요?;

 

 

 다음글 안녕하세요. CI 세션 디비에 대해 궁금한것이 있습니다... (1)
 이전글 페이지네이션를 사용할려고 하는데 계속 오류가 발생합니다... (5)

댓글

뫄뫄잉뿌 / 2016/10/11 13:22:12 / 추천 0
중간에 구분할 특수문자와 화면에 표시할 html데이터, 페이징할 html데이터를 echo로 ajax에 return 시킨 후, .html로 적용시켜보세요.
정수리 / 2016/10/11 13:29:01 / 추천 0

@뫄뫄잉뿌

답변감사합니다.

죄송하지만 제가 아직 많이부족하여 달아주신 답변에 대해 이해가 안되는 부분이 있습니다.

말씀하신 중간에 구분할 특수문자화 화면에 표시할 html데이터, 페이징할 html데이터라고 말씀하셨는데

이 부분에서 이해가 안되네요 ㅜㅜ 제가 답변을 듣고 생각한것 은 

html데이터라고 하시면 html태그가 붙은 데이터를 데이터를 말씀하시는 것같은데 화면에 표시할 데이터의 경우 

위의 코드에  output+= 이부분에서 화면에 표시할 데이터를 output변수에 담아 append를 통해 출력을 하고 있습니다

제가 잘못 생각하고있는 것인가요;;

 

뫄뫄잉뿌 / 2016/10/11 13:40:42 / 추천 0

음.. 쉽게말해서 현재 gg_sh_gubun에서 echo로 화면에 표시하는 데이터 echo json_encode($result)에서

json이면 굳이 특수문자로 구분할 필요없이 paging json 데이터를 하나더 추가 해서 리턴 시키고,

ajax success문에서 페이징 데이터 하나 추출해서 페이징 할 곳에 .html()하면 된다는 말이었습니다.

정수리 / 2016/10/11 14:42:30 / 추천 0

@뫄뫄잉뿌

답변감사합니다.

나름 답변을 참고하여 

$data['pagination'] =  $this->pagination->create_links();

			
			
			$page =  $this->uri->segment(3, 1);
			
			if($page>1){

				$start = (ceil($page/$config['per_page']))*$config['per_page'];

			}else{

				$start = ($page-1)*$config['per_page'];

			}
			$limit = $config['per_page'];
			
			$result = $this->M_model->gg_sh_gubun($ck_pur, '', $start, $limit);
				
			
			echo json_encode($result);
			echo json_encode($data);

}

이렇게 한후 출력을 할려고하니

오류가 발생하더라구요 그래서

파이어버그로 확인해보니 

json의 형태가

[{"gg_pk":"59","gg_na":"\ubd80\uc0b0\uad11\uc5ed\uc2dc\ubd81\uad6c\uccad","ck_pk":"17","ck_gg_da":"2016-10-12"
,"ck_pur":"3","ck_ct":"test","ck_result":"0"},{"gg_pk":"1","gg_na":"\uac15\ub989\uc2dc\uacbd\uc601\uc0ac
\uc5c5\uacfc","ck_pk":"18","ck_gg_da":"2016-10-01","ck_pur":"1","ck_ct":"\ud14c\uc2a4\ud2b8","ck_result"
:"1"},{"gg_pk":"6","gg_na":"\uac15\ub989\uc2dc\uccad","ck_pk":"16","ck_gg_da":"2016-09-29","ck_pur":"3"
,"ck_ct":"\uc7a5\uc560\uac00 \ubc1c\uc0dd\ud558\uc5ec \ubc29\ubb38\ud560 \uc608\uc815","ck_result":"0"
}]{"pagination":"<div class=\"pagination\"><ul><li class=\"active\"><a href=\"#\"><b>1<\/b><\/a><\/li
><li><a href=\"http:\/\/xxx.xx.xx.x\/jds\/index.php\/m_jds_c\/gg_sh_gubun\/2\">2<\/a><\/li><li><a href
=\"http:\/\/xxx.xx.xx.x\/jds\/index.php\/m_jds_c\/gg_sh_gubun\/2\">><\/a><\/li><\/ul><\/div>"}

pagination 이전의 ']'이게 끝까지 감싸야하지 않나요??;;

 

알아보니 잘못된 json형태라고 하네요ㅜㅜ

뫄뫄잉뿌 / 2016/10/11 15:01:13 / 추천 0

오류가 아니라, []는 배열, json 하나는 저렇게 나오는게 정상인걸로 알고있는데..

제 말은 

$data[] = array('result'=>$result, 'paging'=>$paging);
echo json_encode($data);

이런식으로 보내라는 얘기였습니다.

되시는지 확인해보세요

정수리 / 2016/10/11 15:21:03 / 추천 0

@뫄뫄잉뿌 

답변감사합니다.

말씀하신 형태로하여 페이징부분이 출력되었습니다;

그런데 이상하게 출력이 되네요 ㅜㅜ

페이징 처리 링크를 확인하였을때

1 2 >

1번의 경우 base_url에서 정한 url(xxx.xx.xx.x/jds/index.php/m_jds_c/gg_sh_gubun)이 아닌 다른 url로 설정이 되어있고

2번 링크를 클릭하면 base url에서 정한 링크를 따라가기는 하나 컨트롤러의 function gg_sh_gubun 함수의 끝에

echo jds_encode($data)가 있어서 그런지 페이지가 변경되면서 저 echo jds_encode($data)의 값들이 화면에 출력이 되나요 ㅜㅜ;;

어떤것이 잘못되었길래 이런거죠 ㅜㅜ;

뫄뫄잉뿌 / 2016/10/11 15:41:59 / 추천 0

echo 로 하나하나 찍어보세요. 데이터들이 어떻게 입력되고 있는지...

너무 하나서부터 열까지 다 도와달라고 하시면 실력안늘어요..

이미 충분한 답도 드렸고 검색으로도 충분히 답을 찾을 수 있습니다...

정수리 / 2016/10/11 15:45:46 / 추천 0

@뫄뫄잉뿌

답변감사합니다

아 제가너무 그랬나보네요 죄송합니다.

이거 하나만 물어봐도 될까요?

base 

function gg_sh_gubun(){//ajax 페이징 테스트
			$ck_pur = $this->input->post('ck_pur', true);
			$config['base_url'] = base_url().'index.php/m_jds_c/gg_sh_gubun';
			$config['total_rows'] = $this->M_model->gg_sh_gubun($ck_pur, 'count');
			$config['per_page'] = 3;
			$config['uri_segment'] = 3;
			
			$this->pagination->initialize($config);

			$data =  $this->pagination->create_links();

			
			
			$page =  $this->uri->segment(3, 1);
			
			if($page>1){

				$start = (ceil($page/$config['per_page']))*$config['per_page'];

			}else{

				$start = ($page-1)*$config['per_page'];

			}
			$limit = $config['per_page'];
			
			$result = $this->M_model->gg_sh_gubun($ck_pur, '', $start, $limit);
			$data = array('result'=>$result, 'paing'=>$data);
			
			echo json_encode($data);
			
			
		}

ajax 호출시 위의 코드 함수가 호출되거 데이터 리스트와 페이징화부분이출력이 됩니다.

그리고 링크를 클릭하면 

ajax를 통해 저코드를 호출하는 것이 아닌 바로 

base_url에서 정한 

base_url().'index.php/m_jds_c/gg_sh_gubun';

이 url로 바로 가는데 그렇다면 ajax 데이터를 json형태로 출력하기 위해 echo json_encode($data); 의 json형태 문자열이

화면에 출력이 되던데 이문제의 경우 링크를 따라 타고 올경우 이것을 따로 처리하여 페이징을 만드는 controller 함수를 

새로만들어야 하나요? 그렇게 될경우는 부분갱신이 아닌 페이지전체가 갱신되지 않을까요?

포럼에서 검색을 해서 글들을 보았지만 대부분의 답변들은 거이 CI의 pagination으로 구현이 힘들다고 되있네요;;

유일하게 뫄뫄이뿡님이 다른 라이브러리 사용법이 아닌 Ci pagination을 사용하는 방법으로 댓글을 다신 것을 

확인하고 그래서 저도 CI의 pagination을 사용하여 구현할려고 합니다

우찬아빠 / 2016/10/11 17:03:48 / 추천 0

유투브 동영상 입니다.

전 이걸 참조로 만들었던 기억이 있어서 올려 봅니다.

https://www.youtube.com/watch?v=nv7UEQ3l4ZM&list=PLEA11F5D54BD81B99&index=6

kaido / 2016/10/11 17:12:02 / 추천 0

ajax 페이지네이션은 일반 페이지네이션하고는 약간 구조가 다르게 들어갑니다.

ajax 처리로 하기 위해서 2가지중 하나를 하면 됩니다.

 

1번째는 뫄뫄잉뿌님이 처음에 달아주신 대로 ajax 처리 페이지에서 view 에서 보여질 테이블을 html로 그려서 내보내기를 하는 방법.

2번째는 모든 데이터를 json 화 입니다. [1번보다  이게 더 어려움]

 

다만 ajax의 경우 '뒤로가기' 기능에 취약한 약점을 가지고 있으니, 가능하면 '뒤로가기' 기능을 막아 두셔야 합니다.

[이유는 만들고나서 실험해 보세요. 만일 이상하지 않다고 생각들면 그건 개발자 사고방식. 이상하다고 생각 하면 유저 사고방식.]

일반적인 페이지네이션을 확실히 이해 하고 있다면 ajax 호출 차이 입니다. 

정수리 / 2016/10/11 17:27:22 / 추천 0

@우진아빠

답변감사합니다. 한번 시청해봐야겠네요

정수리 / 2016/10/11 17:37:46 / 추천 0

@kaido

답변감사합니다.

ajax처리 방법을 정리해주셔서 감사합니다.

현재 제가 많이 부족하여 뫄뫄잉뿌님의 답변을 이해를 못하고 있는것 같습니다 

이해가 되지 않는 부분은 현재 최초 처음으로 ajax 호출을 통해 데이터를 테이블형태로 출력하고 하단의 페이징 처리 부분까지

출력이 되는것까지 하였습니다.

여기서는 이해가 안되는게 ajax처리 페이지에서 view에서 보여질 테이블을 html로 그려서 뿌려주라고 하셨는데

1번페이지에서 2번페이지로 이동할때 2번에 해당하는 url의 경우 페이지네이션 설정에서 base_url를 통해 설정한 url로 넘어가면

ajax처리를 위해 설정해놓았던 ehoc json_encode 의 데이터들이 출력이 됩니다.

2번 페이지로 이동할때도 ajax로 호출하여 데이터를 가져와 테이블형태로 뿌려져야하는데 url이 설정이 되어있어 클릭을 하면바로 해당 url로 이동을 해버리기에 jquery로 ajax호출을 할수 없습니다.

그렇다보니 2번페이지로 이동할때 컨트롤러에 새로운 함수를 만들어 2번페이지로 넘어갈때 필요한 데이터를가져와 $this->load->view로 출력해주어야 하는데 이건 ajax로 페이지네이션을 하는게 아닌것 같습니다

제가 생각하기엔 저정도의 방법밖에 떠오르지 않습니다...

죄송합니다 정성것 답변을 해주셨는데 제가 이해를 못해버리니

kaido / 2016/10/11 17:43:28 / 추천 0

현재 상황에서 2개만 바꾸세요.

1. json 으로 출력 하는 부분을 html 형태로 변경

2. 페이지링크 a tag 에 링크 값을 강제로 지우세요. 그리고 a tag 클릭시 ajax 호출해서 해당 page 번호를 넘겨서 다시 받아오면 됩니다.

 

ajax paging 이라면 당연하게도 페이지가 바뀌지 않는 효과를 쓰기 위해 만듭니다.

정수리 / 2016/10/11 18:00:40 / 추천 0

@kaido

감사합니다.

다행히 우진아빠 님의 동영상을 보고 단번에 해결하면서 뫄뫄잉뿌님과 kaido님께서 하신 말씀을 이해 하였습니다.

정말 감사합니다. 제가 너무 어렵게 생각한것 같기도하네요. 

추가적으로 kiado님께서 말씀하신 뒤로가기의 경우

2페이지에서 <버튼을 눌러 1페이지로 이동하는걸 말씀하시는건지

아니면 게시글을 상세보기에서 뒤로가기 버튼을 눌렀을 때 클릭한 게시글이 포함된 리스트로 돌아가는 

뒤로가기를 말씀하신 건가요?

2페이지에서 1페이지로 돌아가는것은 문제가 없었으나  2번째 경우인 게시글을 클릭하고

상세보기로 들어와 다시 뒤로가기 버튼을 눌렀을 때 해당 게시글이 속해있는 리스트로 돌아가지 못하더라구요

이게 kaido님께서 말씀 하신 뒤로가기인지 궁금하네요

kaido / 2016/10/12 08:47:13 / 추천 0

해당 게시글의 리스트로 돌아가지 못 하는 문제 맞습니다.

 

개발자 마인드 

1 페이지 5페이지 3페이지 2페이지 간다음에 뒤로 가기 누르면 2페이지에서 3페이지가 아니라 당연히 페이지가 뒤로가기 된다. 

에러가 아니며 정상이다. 즉 문제없다.

 

유저 마인드

1 페이지 5페이지 3페이지 2페이지 간다음에 뒤로 가기 누르면  당연히 3페이지로 돌아가야 한다. 내 의도는 그거 였으니깐.

 

전문 QA는 이런 사소한걸 놓치지 않습니다.

더구나 모바일에서 보는 경우가 많아져서 뒤로가기 버튼 연타 하는 사람도 많아 졌거든요.

 

서브 퀘스트 정도로 생각하고 연구해 보세요.