jQuery DataTable Tutorial With Bootstrap Design For Beginners

이 비디오에 미친 당신은 테이블을 만드는 방법을 배우려고합니다 검색, 페이지 매김과 같은 기능

정렬과 훨씬 더 그래서 나와 함께있어 이봐 요, 상원 의원은 codingpassiveincomecom에서 다른 사람들이 웹 개발자가되는 것을 더 쉽고 빠르게 도와주는 장소 그들이 소유하고있는 것보다 그것을 할 것입니다 그래서 그것이 당신에게 관심이있는 것이면 지금 가입 해보십시오 내 phpstorm에 있습니다 새 프로젝트 jQuery Datatable 튜토리얼을 만들었고 빈 index

php도 만들었습니다 내 XAMPP 서버를 시작하고 PHP 내 관리자 '나는 데이터베이스를 만들었습니다 jQuery 데이터 테이블과 하나의 테이블 국가 및이 테이블 내부 많은 데이터를 가지고 나라의 이름을 짓고 나라는 아무 것도하지 않는다 내가 부트 스트랩을 포함하기를 원하기 때문에 우선 specialso 멋지게이 테이블을 디자인하면 bootstrapcom을 얻으려고 갈 것입니다

이 튜토리얼에서 소스 코드를로드하려는 사용자 당신은 아래 설명의 링크에서 찾을 수 있습니다 이 CSS 파일을 포함 시키면 다운로드 할 수 있습니다 흰색이므로이 부분에 머리를 넣고 아무것도 필요하지 않습니다 그래서 나는 단지 빨리 디자인 할 것이므로 클래스 컨테이너를 말할 것입니다 예를 들어 20 픽셀의 여백을 남기고 그 안에 그리고이 안에 container 새 행을 하나 만들겠습니다

좋아,이 줄 안쪽에서 나는 클래스 열 mb6 또는 8 오프셋을 말하여 우리가 가지고있는 중심에 놓기를 원합니다 12 8 2 & 2 오프셋은 2가 될 것입니다 괜찮습니다 하나의 테이블을 만들려면 say table class say table 우리가 경계를 갖고 싶다고합시다 그래서 나는 테이블이 보더라고 말하고 나는 테이블을 괜찮다고 말할 것이다

확실하지만 여기서 보자 나는 테이블 하나를 가지고이 테이블 안에있다 머리 나는 열이있는 하나의 테이블 행을 가지며 ID 국가 이름 국가 번호를 입력하면됩니다 테이블 본체와이 몸 안쪽에 나는 우리에게 모든 것을 넣을거야 테이블 그래서 우리는 그 테이블 머리와 테이블 본문은 우리 플러그인에 필요합니다 이 테이블 안의 데이터를 조작하는 데 사용할 것입니다

그래서 그들을 포함하는 것을 잊지 마라 그리고 나는 여기에서 아주 빨리 써라 MySQL 데이터베이스에서 모든 데이터를 가져올 PHP 코드 동적으로이 테이블을로드하고 만드는 방법에 대한 다른 자습서가 있습니다 동적이지만이 튜토리얼에서는 실제로 중요하지 않으며 계속 유지하려고합니다 간단하기 때문에 여기서 HP 코드를 작성합니다

그래서 나는 connection = mysqli라고 말할 것이고 여기 안에는 말할 것이다 localhost 내 사용자 이름이 root로 표시됩니다 암호가 비어 있습니다 이름은 jQuery Datatable입니다 이제 여기에 있습니다

SQL 같은 연결 쿼리라고 말하면 여기에서 모든 것을 선택한다고 말할 것입니다 그 나라는 물론 물론 while 루프를 사용하여 모든 것을 얻을 것입니다 우리 테이블의 데이터와 이것이 의미하는 바를 모르는 사람들을위한 데이터 나는 하나의 행을 얻고이 변수 안에 모든 데이터를 넣는 것이다 if 너는 아직도 이해하지 못한다 나는 또한이 주제에 대한 또 다른 튜토리얼을 가지고있다

여기에서 우리는 단지 말할 것이다 그리고 나는 테이블 행을 말할 것이다 그리고 우리는 3 개의 칼럼과 OK를 필요로한다 나는 첫번째 것이 데이터라고 말할 것이다 조금 더 빠른 길과 이것은 국가 코드이고 거의 그것입니다

우리는 새로 고침을 확인하고 여기에 우리가 가야한다 그래서 우리는 멋진 테이블을 가지고 있으며 여기에 모든 데이터가 있습니다 그래서 여기에 작은 실수를 한 것 같아요 그렇습니다 그리고 지금 당신이 볼 수 있듯이이 테이블은 정말로 거대하고 정말로 어렵습니다

이 테이블에서 어쨌든 찾으십시오 우리는 이것을 정렬 할 가능성이 없습니다 그래서 하나의 jQuery 플러그인을 다운로드 할 예정이다 jQuery 데이터 테이블이나 당신은 데이터 테이블에 직접 갈 수 있습니다 net이 웹 사이트를 모른다 내 머리와 왼쪽에서 옵션 다운로드가 있고 거기에 릴리스 패킷을 다운로드하고 꼬리를 알지 못한다 나는 그것을 저장하려고한다 여기에 우리는 괜찮아요 그럼 이제 폴더에 가자 그러면 여기서 끝낼거야

이 파일을 무시하면 나는 미디어에 갈 것이고 나는 복사 할 것이다 그 둘과 나는 우리가 필요로하지 않는 파일들을 삭제할 것이므로 나는 단지 그것을 삭제할 것이다 그 순간에 우리는이 두 가지 CSS를 필요로합니다 이걸 먹어 우리가 필요로하는 건 다 이거 야

이 사람은 다른 사람들을 모두 지우겠습니다 그래서 우리가 여기로 돌아 가면 CSS가 어떻게 괜찮은지 알 수 있습니다 자바 스크립트를 처음으로 사용하기 때문에 지금이 라이브러리를 포함 할 필요가 있습니다 body 태그를 닫기 직전에 벽을 내려 놓았습니다 도서관 처음으로이 파일을 작성한 다음 다른 파일을이 파일에 넣을 것입니다 jQuery를 포함시켜야 code

jquerycom에 갈 수 있습니다 나는 minified를 선택하고 이것을 복사하고 거의 모든 것을 가지고있다 이 자습서에 필요한 파일을 작성하면됩니다 우리 스크립트는 스크립트 타입의 텍스트 / 자바 스크립트를 말하며 여기에 내가 말할 것이다

준비 기능은 우리가 먼저 기다려야한다는 것을 의미한다 모든 라이브러리 등을로드하기 위해 문서로드를 완료하고 그 후에는 여기에서 코드의이 부분을 실행하려고합니다 클래스 테이블에서 요소 테이블을 찾고 있음을 의미합니다 이 플러그인을 호출하고 일어날 일을 보도록하겠습니다 새로 고침하고 여기에 우리가 가서 거의 모든 설정없이 볼 수있는대로 내가 가지고 기능이 많으므로 맨 처음에 볼 수 있듯이 추가됩니다

페이징 (paging)과 우리가보고 싶은 요소의 수를 25로하면 25 당신이 여기에서 볼 수있는 것에 따라 50 권 등은 10의 텐트로 통한다 나는 분류하고있다 기본적으로 ID가 오름차순으로 정렬되고 내림차순으로 정렬하려는 경우 여기를 클릭하면 변경 사항이 표시됩니다 국가 이름에 대한 특정 학교와 동일한 방식으로 국가 코드를 사용할 수 있습니다 내가 검색하고 싶으면 검색 기능도 있습니다 알바니아 이것은 내가 이제 막 타이핑을 시작하는 방법입니다 예를 들어 내가 나라를 찾고 싶다면 3 가지 수를 모두 검색 할 수 있습니다

ID 55로 입력을 시작할 수 있습니다 여기에 우리가 가면 정말 빠릅니다 그리고하기 쉽고 또한 세계에 우리는 몇 가지 정보가 있습니다 우리가 가지고있는 엔트리들과 우리는 기본적인 페이지 매김을 보았습니다 좋아요

놀랍지 만 가끔은 당신이 사용 가능하게하거나 불가능하게하고 싶습니다 일부 필터 또는 변경하려는 및 그 이유에 대해 보여줄거야 이 발을 어떻게 향상시킬 수 있을지, 내가해야 할 일은 창의력과 여기에 있습니다 몇 가지 옵션을 쓰려고합니다 주문을 말하고 싶습니다 네 번째로 설정하고 우리가 새로 고침 때 지금 무슨 일이 있었는지 보자 if 아무 것도 일어나지 않을 열 이름을 클릭하려고합니다

즉,이 테이블을 오름차순 또는 내림차순으로 정렬 할 수 없다는 것을 의미합니다 다음은 내가 말하기를 말할 것이고 나는 사람들에게로 설정하겠다 새로 고침 및 검색 옵션이 없어서 검색 할 수 없습니다 내 의견에있는 테이블은 모든 시간에 대해 정말 나쁜 생각 그래서 다음 문제는 내가 거짓 새로 고침으로 말할 수있는 페이징을 말하자 이제 우리는 우리가 가지고 있던 기본 테이블을 가지고 있으므로 볼 수 없습니다

페인팅 거기에 검색 거기에 아무것도 그냥 주문하지 않는 기본 처음에는 우리에게 요점이 사실이되도록하겠습니다 왜냐하면 저는 또한 진실을 찾고 있습니다 어떤 것을 보여주고 싶습니다 예를 들면 우리가 이것을 원한다면 우리의 결과입니다 ID로 검색을 비활성화하려면 무슨 일이 일어나서 열 정의를 말할 것인가? 나는 목표를 말하자면 ID를 지정해야한다고 말할 것이다

ID가 0 인 열 국가 이름은 하나이고 국가 코드는 2이므로 0을 목표로하는 ID가 0 인 목표 검색을 사용 중지하려면 여기 검색 가능하다고 말할 수 있고 네 번째로 설정하면 지금 새로 고침합니다 번호 5를 치려고하면 일치하는 레코드가 발견되지 않으며 비록 우리가 하나 또는 다른 예를 들어이 ID에 대한 검색이 사용 중지 된 경우에도 숨기기를 원할 경우 이 빗 또는 다른 어떤 것만이 거짓이라고 말할 수 있고 이제는 보지 못하게 할 수 있습니다 이 콘을 가지고있어 정말 대단하다 내가 보여주고 싶은 진실하고 최후의 것을 위해 이걸 만들자

정말 중요한 것은 기본 정렬을 설정할 수 있다는 것입니다 내가 주문을하겠다고 말하면 나는 이렇게 말하고 내가 전화를 목표로한다고 말한다 2 번은 국가 코드이고 오름차순으로 정렬하고 싶습니다 팽창 해보고 무슨 일이 일어날 지 봅시다 새로 고침 괜찮아

지금 우리는 가득 채울 것입니다 그래서 어떻게해야할까요? 진실하고 다시 시도하십시오 그리고 여기에 우리가 가서 오른쪽에서 볼 수 있듯이 옆의 국가 코드에는 옵션이 있으며 정렬되어있는 다른 국가를 보여줍니다 그것은 짧은 내림차순으로 정렬 그래서 그래, 어쨌든 모두들 내가 곧 매우 간단하고 매우 유용한 자습서이며 질문이 있거나 당신이 이해하지 못하거나해야할 일을 알고 있다면 아래의 댓글 및이 동영상이 마음에 들면 동영상을 좋아하고 공유하십시오 친구 돌봐