Cómo integrar DataTablesJS vía AJAX con Laravel 5.2

laravel 52 애플리케이션에서 DataTablesJs를 어떻게 통합 할 수 있는지 살펴 보겠습니다

DataTables는 Jquery 플러그인입니다 모든 HTML 테이블에 고급 상호 작용 컨트롤 추가 페이지 매김 같이 즉석 검색 열 순서 변경 기능 다른 사람들과 laravel 문맥에서 사용하자 먼저 테이블이라는 새로운 라벨 앱을 만듭니다 홈스테드 설정 파일을 열어 새 앱을 등록하십시오 로컬 도메인은 tables

app입니다 마지막으로 테이블이라고하는 새 데이터베이스를 추가하십시오 좋아, 저장하고, 이제 우리의 로컬 도메인을 / etc / hosts 파일에 추가하십시오 우리는 tableapp이라는 이름을 사용했습니다

마지막으로 우리는 농가 집을 제공합니다 그리고 우리는 준비가되었습니다 숭고한 텍스트로 프로젝트를 열고 기본적으로 laravel로 오는 환영보기를 편집 해 봅시다 이 파일을 지우고 여기에 html 테이블을 추가합니다 그것에게 테이블 CSS 클래스 줘 머리글을 만들고 응용 프로그램의 모든 사용자를 표시한다고 가정 해 봅시다

ID, 이름 및 EMAIL을 표시하려고합니다 페이지를 새로 고치면 스타일을 지정하지 않고 왼쪽 상단에 표가 표시됩니다 트위스트 부트 스트랩을 추가하여 디자인을 개선합시다 cdnjscom으로 이동하여 다운로드하지 않고 사용하려는 대부분의 프론트 엔드 라이브러리를 찾을 수 있습니다

Twitter 부트 스트랩을 검색하면 첫 번째 결과를 가져옵니다 버전 4는 아직 알파 상태이기 때문에 버전 3을 사용합시다 축소 버전을 찾아 복사하십시오 이제 스타일 시트를 맨 위에 연결합니다 페이지를 새로 고침하면 디자인이 향상됩니다

계속하겠습니다 제목을 추가합시다 좋습니다 데이터베이스에 사용자를 저장하기 전에 연결을 올바르게 구성해야합니까? 프로젝트의 루트에있는 env 파일을 엽니 다

홈스테드를 사용하기 때문에 이러한 값의 대부분은 괜찮습니다 우리가 변경할 필요가있는 것은 데이터베이스 이름뿐입니다 우리는 테이블이라고 부릅니다 터미널에서 우리는 농가 기계에 접근합니다 디렉토리를 프로젝트 폴더로 변경하십시오

그리고 php artisan migrate를 실행하여 데이터베이스 구조를 비난하십시오 무작위 사용자를 생성하기 위해 팅커를 사용 해보자 공장 전역 함수를 사용합니다 가짜 데이터를 생성하는 데 사용됩니다 그리고 50 명의 무작위 사용자가 필요하다고 가정 해 봅시다

몇 초 후 속편 프로에서 50 명의 무작위 사용자를 볼 수 있습니다 이제 환영보기에 표시해 보겠습니다 foreach 루프 작성 각 사용자마다 사용자 ID가있는 행을 만듭니다 이름 그리고 사용자 이메일 우리가 브라우저에서 그것을 시도하면 물론 우리가보기에 사용자를 전달하지 않았기 때문에 실패합니다 그걸 해결하자

보통 컨트롤러를 사용하여 요청을 처리하지만 단순하게하기 위해 여기에 입력 해 보겠습니다 Eloquent를 사용합시다 데이터베이스에서 모든 사용자를 가져 오려면 사용자 변수라는 이름으로 저장하십시오 마지막으로 변수를 환영보기로 전달합니다 이제 모든 사용자를 볼 수 있습니다

좋아, 이것은 문제가 될 수 있습니다 왜냐하면 더 많은 사용자가 페이지의 성능이 느릴수록 더 많은 사용자를 50 명 만들어 보겠습니다 페이지를 새로 고침하면 로드하는 데 몇 밀리 초가 걸렸습니다 200 명 이상의 사용자를 추가하면 어떨까요? 완료하는 데 시간이 오래 걸린다 따라서이 문제를 해결하기 위해 우리는 datatables js 가장 먼저 jquery를 사용해야합니다

datatables는 jquery 플러그인이므로 URL에서 jquery를 직접 검색해 보겠습니다 복사하여 닫는 body 태그 앞에 붙여 넣습니다 다음으로, 우리는 datatables 자산을 추가 할 필요가있다 여기에 CSS가 있습니다 그리고 자바 스크립트 마지막으로이 간단한 코드로 플러그인을 초기화해야합니다

html 표에 ID가 있어야합니다 사용자라고합시다 페이지로 돌아 가기 새로 고침하고 DataTablesJs를 성공적으로 초기화했습니다 우리는 페이지 매김을했습니다 즉시 검색

등 하나 우리는 낮은 성능 문제를 해결하지 못했습니다

우리는 여전히 데이터베이스에서 300 명의 사용자를 가져오고 있습니다 하나의 쿼리에서 어떻게 해결할 수 있을까요? 문서의 예를 검토하면 서버 측 섹션을 볼 수 있습니다 서버 측에서 데이터를 처리하는 데 도움이됩니다 아래로 스크롤하면 서버 측 레이블에서 PHP로 예제 구현을 볼 수 있습니다 우리는이 코드를 사용할 수 있지만 더 좋은 방법이 있습니다

Yajra의 laravel-datatables이라는 훌륭한 패키지가 있습니다 이를 통해 우리는 데이터 테이블을 laravel과 통합 할 수 있습니다 작곡가를 통해 패키지를 요구합시다 그런 다음 서비스 공급자를 추가하십시오 다음 별칭을 등록하십시오

마지막으로 우리는 asstes를 발행합니다 이제, ajax를 통해 데이터를 처리하도록 데이터 테이블에 설명해 보겠습니다 이를 위해이 세 줄의 코드를 추가해야합니다 첫 번째 줄에는 처리가 사실이라고 나와 있습니다 둘째, 서버 측에서 처리합니다

실제로 데이터를 처리하는 URL을 정의하십시오 복사하여 붙여 넣기합니다 데이터를 처리 할 책임이있는 URL이 api / users라고 가정 해 봅시다 해당 경로를 추가하려면 routesphp 파일을 엽니 다

다시 말하지만, 간단하게하기 위해 코드를 여기에 추가해 보겠습니다 그리고 여기 우리는 돌아갑니다 이 줄은 문서에서 볼 수 있습니다 네임 스페이스 업데이트 시도 해봐 이 오류는 테이블의 행과 열을 정의하지 않았 음을 나타냅니다

하기 위해서 초기화 코드에서 columns라는 키를 만들고, 값의 객체 배열을 사용하여 첫 번째 객체는 이드가됩니다 다음으로, 이름 그리고 마지막으로 이메일 물론, 이것은 STRINGS 여야합니다 페이지 새로 고침 이제이 줄을 제거 할 수 있습니다 그리고 테이블의 본문을 완전히 삭제하십시오 페이지를 새로 고치면 똑같은 것을 볼 수 있습니다

하나 데이터베이스에 얼마나 많은 사용자가 있더라도 우리는 처음 10 개만 검색하고 있습니다 그리고 우리가 어떤 행동을 할 때마다 DataTablesJs는 현재 필요한 정보 만 검색하기 위해 새 데이터베이스 쿼리를 수행합니다 더 좋은 점은 페이지를 새로 고칠 필요가 없다는 것입니다 이것이 내가 의미하는 것입니다 지금은 300 명의 사용자가 있습니다

500 개를 추가합시다 우리는 잠시 기다린다 우리가 취한 조치 후에 상쾌하게하지 않고 활약하는 자 등을 맞댄 총 사용자 수는 800 명입니다 이것이 DataTableJs를 Laravel과 통합하는 방법입니다