이 글은 주로 Bootstrap 테이블의 사용법, 서버 페이징과 클라이언트 페이징의 변환, 테이블 새로 고침에 대해 요약하고 소개합니다. 관심 있는 친구들이 참고할 수 있습니다.
최근 들어왔습니다. 훌륭한 플러그인인 부트스트랩 테이블을 접하게 되었습니다. 저는 프론트엔드 디스플레이를 한번도 해본 적이 없고, 테이블에 대한 인상은 html의 테이블 태그뿐입니다.
[관련 영상 추천 : 부트스트랩 튜토리얼]
구성 방법
1, HTML
<p class="btn-group hidden-xs"id="exampleTableEventsToolbar" > //定义一系列工具栏... </p> <table data-toggle="table" data-url="${ctxAdmin}/user/userData?orgId=${orgId}" //table数据来源,json格式 data-pagination="true" //是否支持分页 data-show-search="true" //是否显示搜索框功能 data-show-columns="true" //显示columns功能按钮 data-icon-size="outline" data-mobile-responsive="true" data-height="500" id="tablelist" data-side-pagination="server" //支持服务器端分页,默认是client> <thead> <tr> <th data-field="user_id">ID</th> <th data-field="username" data-formatter="usernameFormatter" //columns option 参见官网解释 data-events="usernameEvents">用户名</th> <th data-field="real_name">真实姓名</th> <th data-field="tel_num">座机</th> <th data-field="mobile">手机</th> <th data-field="user_type">用户类型</th> <th data-field="operation" data-formatter="actionFormatter" data-events="actionEvents">操作</th> </tr> </thead> </table>
2, js 구조:
(function() { $('#tablelist').bootstrapTable({ url: "${ctxAdmin}/user/userData?orgId=${orgId}", search: true, //是否显示搜索框功能 pagination: true, //是否分页 showRefresh: true, //是否显示刷新功能 showToggle: true, showColumns: true, iconSize: 'outline', // toolbar: '#exampleTableEventsToolbar', 可以在table上方显示的一条工具栏, icons: { refresh: 'glyphicon-repeat', toggle: 'glyphicon-list-alt', columns: 'glyphicon-list' } });
와 결합된 테이블 옵션 공식 웹사이트, 열 옵션, 이벤트 및 방법을 통해 다양한 기능을 수행할 수 있습니다. 위의 데이터 포맷터 및 데이터 이벤트는 열 옵션의 옵션입니다.
data-formatter 및 data-events
다음 효과를 얻으려면 다음을 사용하세요. 위의 두 가지 옵션을 함께 사용하십시오. 하나는 형식을 정의하고 다른 하나는 클릭 작업을 정의합니다.
js 코드 직접 업로드
//value: 所在collumn的当前显示值, //row:整个行的数据 ,对象化,可通过.获取 //表格-操作 - 格式化 function actionFormatter(value, row, index) { return '<a class="mod" >修改</a> ' + '<a class="delete">删除</a>'; } //表格 - 操作 - 事件 window.actionEvents = { 'click .mod': function(e, value, row, index) { //修改操作 }, 'click .delete' : function(e, value, row, index) { //删除操作 } }
서버 페이징/클라이언트 페이징 변환, 테이블 새로 고침
Bootstrap 기본값은 클라이언트 사이드 페이지 매김 html 태그
data-side-pagination:"client"
또는
를 통해 수행할 수 있습니다. 🎜>sidePagination: '서버'
클라이언트: 일반 json 배열형식 [{},{},{}]
server: {"total":0,"rows":[]} 여기서 total은 쿼리된 모든 데이터 항목의 수를 나타내고, 다음 행은 현재 페이지에 표시되는 데이터의 양을 나타냅니다.
'refreshOptions'를 사용해야 합니다. //업데이트 시 옵션을 설정합니다.
'refresh' //업데이트할 때 url을 설정합니다. 업데이트, 쿼리( 매개변수를 백그라운드로 전달)
$("#tablelist").bootstrapTable('refreshOptions', { sidePagination: 'client' //改为客户端分页 }); $("#tablelist").bootstrapTable('refresh', { url: "${ctxAdmin}/user/getsearchuserinfo", //重设数据来源 query: {username: $('#sea-username').val(),realname: $("#sea-realname").val(),mobile: $("#sea-mobile").val()}//传到后台的参数 });[관련 권장사항]1. 2. >JavaScript 중국어 참조 매뉴얼 php.cn Dugu Jiujian (3) - JavaScript 동영상 튜토리얼
위 내용은 훌륭한 플러그인-부트스트랩 테이블을 공유하세요의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!