먼저 구현 렌더링을보십시오. 나쁘지 않다고 생각되면 구현 코드를 참조하십시오.
위의 데이터는 아래에 PADED입니다
사용 방법
1 import bootstrap의 CSS
<link rel = "Stylesheet"href = "css/v3/bootstrap.min.css">
2 jQuery 가져 오기
<script src = "js/jquery-1.10.1.min.js"type = "text/javaScript"> </script>
3 가져 오기 테이블 페이징 플러그인 ltable.js
<script src = "js/ltable.js"type = "text/javaScript"> </script>
4 HTML 태그를 추가하고 ID에 값을 할당하십시오
<!!
5 데이터 가져옵니다
여기에서 ajax를 통해 JSON 파일의 시뮬레이션 된 데이터를 가져옵니다.
initTable (데이터)은 테이블과 페이징을 초기화하는 방법입니다
$ .ajax ({url : "json/date.json", type : "get", datatype : "json", success : function (data) {inittable (data);}, error : function (e) {alert ( "data accision error");}});6 테이블을 초기화하십시오
초기화 방법에서 먼저 테이블을 초기화하십시오
var obj = data; var mytable = $. ltable ( '#d', {data : obj.list // json data, title : [ "userId", "username", "username", "userroleName", "status", "<버튼 on click = 'delf (delet <///). 필드, 이름 : [ "userId", "username", "password", "resment name", "status", "_ opt"], tid : "userId", checkbox : "userId"});코드 설명
6.1 초기화 방법
$ .ltable ( 'id', {data, title, name, tid, chechbox});
6.2 속성 설명
ID : 페이지에서 선택한 채우기 블록
데이터 : 페이지에 표시된 JSON 데이터
제목 : 테이블의 각 열에 대한 데이터에 해당하는 필드
이름 : 테이블의 첫 번째 줄에는 필드가 표시됩니다.
TID : 각 라인의 해당 키 값 (생략 할 수 있음)
확인란 : 확인란에 해당하는 값 (생략 할 수 있음)
6.3 확인란 설명
Chechbox 속성 init를 추가 할 때 활성화하십시오
확인란 이름 = "IDS"
선택한 열 메소드 가져 오기 : $ .ltable.getcheckboxids () 반환 값 예 "1,2,3,4"
6.4 작동 지침
속성 이름 = _opt 인 경우 테이블 헤더가 자동으로 "작동"위치를 변경합니다.
해당 속성 제목은 버튼 및 기타 작업을 추가 할 수 있습니다
예 : "<button onclick = 'uddf (id)'> modify </button>"
클릭 메소드는 ududf ()입니다. 매개 변수 ID는 속성 TID의 해당 필드입니다.
7 페이지 매김을 초기화하십시오
그런 다음 페이지 매김 부분
$ .lpaging ( '#U', // 해당 ID {pagEnumber : obj.pagenumber // 현재 페이지 번호, TotalPage : OBJ.TotalPage // Total Page Number, Countsize : 5 // 표시 될 수 있습니다 (생략 할 수 있음), count : obj.count, inputsearch : true // Query Inpage (Query InpageChange : OnpageChange) dataurl);}});코드 설명
7.1 초기화 방법
$ .lping ( 'id', {pagenumber, totalpage, countsize, count, onpagechange (num), inputsearch});
7.2 속성 메소드 설명
ID : 페이지에서 선택한 채우기 블록
Pagenumber : 현재 페이지 번호
총 페이지 : 총 페이지 수
카운트 사이즈 : 페이지 디스플레이 수 (기본 5를 생략 할 수 있음)
수 : 총 데이터 수
Onpagechange (Num) : 클릭 이벤트를 반환합니다
inputSearch : 쿼리 입력 상자 표시 여부 부울 기본 거짓
getInputVal () : 입력 상자의 숫자를 반환합니다
8 전체 코드
<! docType html> <html> <head> <meta charset = "utf-"> <meta http-equiv = "x-ua-catsible"content = "ie get"> <title> </title> <link rel = "stylesheet"href = "css/v/bootstrap.min.cs"> diSh> <! id = "d"> </div> <!-Pagination-> <div id = "u"> </div> </body> <script src = "js/jquery -... min.js"text/javascript "> </script> <script src ="js/ltable.js "type/javascript"</javascript "> var var mytable; var dataurl = ""; // 페이지 초기화 initpage (, pagesize, ""); // ajax가 데이터 함수를 가져옵니다 initpage (num, ps, url) {$. ajax ({url : "json/date.json", type : "get", // type : "post", // data : "userinfovo.pageid ="+num+"& userinfovo.pagecount ="+ps, datatype : "json", 성공 : 함수 (data) {inittable (data);}, 오류 : 함수 (e) {console.log (e) alert ( "데이터 수집 오류");}});}});}});}}); obj = data; // tablemytable = $. ltable ( '#d', {data : {data : obj.list // json data, title : [ "userId", "username", "password", "userrolename", "status", "<button on updf (id) '> modify </bultion> onclick ='delf (id) '/버튼] 필드, 이름 : [ "userId", "username", "password", "resment name", "status", "_ opt"], tid : "userId", checkbox : "userId"}); // mytable.getCheckboxIds (); // checkbox // page $ .lping ( '#u', // 구성 요소 ID {pageNumber : obj.pagenumber // 현재 페이지 번호, totalpage : abj.totalpage // 총 페이지 번호, countsize : // 페이지 표시 (생산 할 수 있음), Count : Onputsearch : // query in prupy inputsecant : // (num) {initpage (num, pagesize, dataUrl);}});} // 메소드 함수 modify function updf (id) {alert ( "modify :"+id);} // 메소드 함수 delf (id) {alert ( "+id);} </script> </html>wulin.com은 부트 스트랩 관련 주제를 권장합니다.
부트 스트랩 구성 요소 작동 기술
부트 스트랩 관련 지식 요약
위의 것은 Bootstrap3 양식 플러그인 및 페이징 플러그인 예제에 대한 자세한 설명입니다. 나는 그것이 당신에게 도움이되기를 바랍니다. 궁금한 점이 있으면 메시지를 남겨 주시면 편집자가 제 시간에 답장을 드리겠습니다. Wulin.com 웹 사이트를 지원해 주셔서 대단히 감사합니다!