부트 스트랩 테이블은 ajax를 사용하여 JSON 형식의 데이터를 얻는 가벼운 테이블 플러그인입니다. 페이지 매김 및 데이터 충전은 매우 편리하며 국제화를 지원합니다. 최근 배경은이 플러그인을 사용하여 테이블 응용 프로그램을 작성하여 요약했습니다.
1. 사용 방법
YouPaiyun이 제공 한 CDN을 통해 JS 플러그인, 스타일 시트 및 국제 플러그인을 얻거나 공식 웹 사이트에서 직접 다운로드 할 수 있습니다. 다음 JS 플러그인 및 스타일을 HTML 헤더에 넣고 사용하십시오.
// style <link href = "http://cdn.bootcss.com/bootstrap-table/1.9.1/bootstrap-table.min.css"rel = "스타일 시트"/> <스크립트 src = "http://cdn.bootcss.com/bootstrap-table/1.9.1/bootstrap-table.min.js"> </script> // table Chinese <스크립트 src = "http://cdn.bootcss.com/bootstrap-table/1.9.1/locale/bootstrap-table-zh-cn.min.js"> </script>
2. 고정 데이터 충전
부트 스트랩 테이블에서 데이터를 얻는 두 가지 방법이 있습니다. 하나는 테이블의 Data-URL 속성을 통해 데이터 소스를 지정하지만 다음 예제에 표시된 것처럼 데이터를 얻기 위해 JavaScript별로 테이블을 초기화 할 때 URL을 지정하는 것입니다.
<table data-toggle = "table"data-url = "data.json"> <tead> ... </tead> </table> $ ( '#table'). bootStraptable ({url : 'data.json'});첫 번째 방법을 넘겨주는 두 번째 방법은 복잡한 데이터를 처리 할 때 더 유연합니다. 일반적으로 두 번째 방법은 테이블 데이터를 채우는 데 사용됩니다.
var $ table = $ ( '#table'); $ table.bootStraptable ({url : "duobaoActivityList", Datatype : "JSON", Pagination : Paglination : True, // Pagination SingleSelect : False, Data-Locale : "Zh-US", Table Search : // Show Search Box Sidepigination : // Server-Side Columnss : // Server-Side 컬럼. 이름 ', 필드 :'이름 ','센터 ','센터 ','중간 '}, {제목 :'상태 ','상태 ','중 'STARTTIME': 'CENTRE',}, {제목 : 'OPERTION :'OPORTION : 'ID', 'ID', 'CENTRE', 'CENTRE', formatter : 함수 (value, row, index) {var e = '<a href = "#"mce_href = "#"onclick = "edit (/' + row.id + ')"var d </a> "; MCE_HREF = "#"ONCLICK = "DEL (/''+row.id+'/')"> Delete </a>;필드 필드는 데이터가 표시되기 전에 서버가 반환 한 필드에 해당해야합니다.
3. Pagination과 Search
페이징 일 때 부트 스트랩 테이블은 두 개의 페이징 필드를 백엔드로 전달합니다 : 제한 및 오프셋. 전자는 각 페이지의 수를 나타내고 기본값은 10, 후자는 페이징 중에 데이터 오프셋을 나타냅니다.
검색 할 때 검색 필드가 백엔드로 전달되어 특정 검색 내용을 나타냅니다.
서버 측에서 반환 한 데이터에는 페이지 (페이지 수)와 총계 (총 데이터)의 두 필드도 포함되어야하며 프론트 엔드는이 두 필드를 기반으로 페이지를 가져와야합니다.
최종 디스플레이 효과는 아래 그림에 나와 있습니다.
위는 편집자가 귀하에게 소개 한 Bootstrap의 테이블 구현 데이터 충전 및 Pagination Application의 요약입니다. 나는 그것이 당신에게 도움이되기를 바랍니다. 궁금한 점이 있으면 메시지를 남겨 주시면 편집자가 제 시간에 답장을 드리겠습니다. Wulin.com 웹 사이트를 지원해 주셔서 대단히 감사합니다!