jQuery 테이블 플러그인 데이터 테이블 사용법_jquery 요약
- WBOY원래의
- 2016-05-16 15:07:351295검색
DataTables는 jQuery 테이블 플러그인입니다. 이 글에서는 테이블 플러그인 데이터테이블의 사용법을 공유하고, 구체적인 내용은 다음과 같습니다
1. 초기화
<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.11/css/jquery.dataTables.css"> <script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.11/js/jquery.dataTables.js"></script> </head> <body> <table id="table_id" class="display"> <thead> <tr> <th>Column 1</th> <th>Column 2</th> </tr> </thead> <tbody> <tr> <td>Row 1 Data 1</td> <td>Row 1 Data 2</td> </tr> <tr> <td>Row 2 Data 1</td> <td>Row 2 Data 2</td> </tr> </tbody> </table> </body> </html>
js 초기화
$(document).ready( function () {
$('#table_id').DataTable();
} );
2. 공통 구성
초기화 과정에서 자주 사용하는 구성 항목을 통해 테이블을 구성할 수 있습니다.
$("#vivo_table_list").dataTable({
pageLength: 10, //更改初始页面长度 （每页的行数）
processing: true, //显示正在处理字符串
serverSide: false, // 服务器模式，这一点非常奇怪*
ordering: true, // 是否启用Datatables排序
searching: false, // 开启搜索
autoWidth: false,
zeroRecords: "没有查询数据",
destroy: true, // 从当前上下文销毁掉Datatables对象 (妹搞懂)
pagingType: "input", // 分页按钮种类显示选项
language: {
url: "cn.txt" // 本地化
},
dom: "tr<'row-fluid'<'span6'i><'span6'p>>", // 按什么顺序定义表的控制元素在页面上出现(妹搞懂)
ajax: {
url: "/url",
type: "post", // ajax请求的类型 **
data: function () {
return that.getQueryParams(); // ajax的参数
}
},
columns: [
{title: "id", data: "id", orderable: true},
{title: "uid", data: "uid", orderable: false},
{title: "昵称", data: "nick", orderable: false},
{title: "姓名", data: "name", orderable: false},
{title: "电话", data: "tel", orderable: false},
{title: "申请时间", data: "stimeshow", orderable: true},
{title: "状态", data: "statshow", orderable: false},
{
title: "操作", orderable: false, render: function (data,type,full) {
return '<button id="msgsndButton" class="msgsnd glyphicon glyphicon-comment"></button>' +
' <button id="forbidButton" class="forbid glyphicon glyphicon-thumbs-down"></button>'+
'<input type="hidden" value="'+full.id+'"/>';
}
}
]
});
백그라운드에서 반환되는 데이터는 맵이어야 하고, 키는 "data"이고, 값은 데이터(데이터가 List인 경우 toArray()가 필요함)입니다. 여기서 data도 매개변수 중 하나입니다. 테이블에 표시될 데이터를 나타내는 DataTables이므로 이 맵에 다른 테이블 매개변수를 넣을 수 있으며 매개변수 이름에 키를 설정하기만 하면 됩니다.
*: 구성에서 serverSide는 작업 중에 테이블의 데이터를 ajax를 통해 백그라운드에서 가져오므로 이 모드가 켜집니다. 당연하지만 테이블은 확실합니다. 한 열을 기준으로 정렬하는 기능이 비활성화된 후 이 모드를 끄고 테이블의 열을 정렬할 수 있음을 확인했는데 테이블의 데이터는 계속 가져왔습니다. 서버에서... 따라서 이 모드는 여전히 연구되어야 합니다
**: 프로젝트에서 백그라운드 컨트롤러가 받은 매개변수는 배열입니다. Ajax 요청에 복잡한 매개변수가 포함된 경우 요청 유형은 post여야 합니다.
3. 고급 기능
1. 숨겨진 열
"columns.visible" 속성을 통해 해당 열의 표시 여부를 지정할 수 있지만 이 방법으로는 해당 열의 값을 가져올 수 없습니다. do it = =.나중에 API를 확인한 후, 해결책은 columns.render 속성을 사용하는 것입니다.
{
title: "操作", orderable: false, render: function (data,type,full) {
return '<input type="hidden" value="'+full.id+'"/>';
}
}
2. 페이지 번호를 입력하면 해당 페이지로 이동합니다
pagingType 속성을 통해 테이블 페이징 버튼 스타일을 설정할 수 있지만 DataTable의 여러 기본 스타일에는 프로젝트에서 필요한 점프 페이지 번호를 입력하는 스타일이 없습니다. 하지만 공식 홈페이지의 플러그인 페이지에는 여러 페이징 버튼 플러그인이 소개되어 있는데, 그 중 입력 페이징 플러그인은 플러그인의 js를 도입하고 pagingType 값만 변경하면 됩니다. "입력"합니다. js 파일의 CDN은 다음과 같습니다.
//cdn.datatables.net/plug-ins/1.10.11/pagination/input.js
위 내용은 이 글의 전체 내용이므로, 모든 분들의 공부에 도움이 되었으면 좋겠습니다.