Bootstrap- 단순하고 직관적이며 강력하며 모바일 우선 첫 프론트 엔드 개발 프레임 워크로 웹 개발을 더 빠르고 간단하게 만듭니다. 아래에 부트 스트랩 테이블을 사용하는 것을 소개하겠습니다. 함께 배우자.
프론트 엔드 테이블을 먼저 정의하십시오
<table id = "expandabledatable"> </table>
그런 다음 js
/** 테이블 초기화*/var otable = $ ( '#expandabledataTable'). dataTable ({ "sdom": "tflt < 'row dtttfooter'< 'col-sm-6'i> <'col-sm-6'p >>", "aocolumndefs": [{ "bsortable": "0,": "," 전체) {return '<i> </i>';}}, { "atargets": [1], "data": "taskname", "title": "taskname"}, { "atargets": [2], "data": "cronexpression": "표현"}, {targets "" "" "" "" "" "" "" "" "" "" "" "" "" "" " }, {bsortable ": false,"atargets ": [4],"title ":"run status ","rend ": function (data, type, full) {if (full ["enabled "] == true) {return '<버튼 ="버튼 "> </button>'; false, "atargets": [5], "render": 함수 (data, type, full) {return '<a href = "#"> <i> </i> 편집 </a> <a href = "#"> <i> </i> </a>';}}], "bserverside": true, "sajaxsource" "/task/getAlltask", "aasorting": [1, 'asc'], "alengthmenu": [[5, 15, 20, -1], [5, 15, 20, "All"], "idisplaylength": 5, "Searching": false, "blengthchange": false, "languth" 0 ","sinfofiltered ":"_max_bar에서 필터링 된 ","szerorecords ":"search를 원하는 것은 없다 ","검색 ":" ","slengthmenu ":"_menu _ ","sinfo ":"_start_ /total_total_bar 데이터 " "previous", "snext": "next",}}, "fnserverdata": 함수 (ssource, aodata, fncallback) {$ .ajax ({ "type": 'post ","url ":"ssource, "datatype": "json", "data": json.spring (aodtring)}, " {fncallback (resp);}});}});이 테이블의 데이터는 서버 측에서 얻어 지므로 다음 속성을 구성해야합니다. 그렇지 않으면 서버 측에서 데이터를 얻을 수 없습니다.
"bserverside": true, "sajaxsource": "/task/getalltask", "fnserverdata": function (ssource, aodata, fncallback) {$ .ajax ({ "type": "post", "url": "url": "json": {aodata " json.stringify (aodata)}, "success": function (resp) {fncallback (resp);}});}위는 편집자가 소개 한 부트 스트랩 양식 사용에 대한 관련 지식입니다. 나는 그것이 당신에게 도움이되기를 바랍니다. 궁금한 점이 있으면 메시지를 남겨 주시면 편집자가 제 시간에 답장을 드리겠습니다. Wulin.com 웹 사이트를 지원해 주셔서 대단히 감사합니다!