jQuery 테이블 플러그인 데이터 테이블 사용법

jQuery 테이블 플러그인 데이터 테이블 사용법_jquery 요약

WBOY

풀어 주다： 2016-05-16 15:07:35

원래의

1180명이 탐색했습니다.

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+'"/>';
  }
}

로그인 후 복사

렌더링 후 함수에는 data/type/full이라는 세 가지 매개변수가 있습니다. 여기서 전체 매개변수는 행의 모든 데이터입니다(공식 웹사이트에는 여기에 기록되어 있습니다. 데이터 값이 아닌 행의 데이터만 기록됨). 속성이므로 데이터가 있더라도 원하는 값이 있지만 열을 제공하지 않으면 가져올 수 없습니다.) 원하는 경우 숨기고 싶은 값을 직접 사용할 수 있습니다. 이 값을 테이블 외부에서 참조하려면 숨겨진 <.input>을 외부에서 얻을 수 있지만 이 방법은 정말 어리석은 방법이 있으면 알려주십시오.

2. 페이지 번호를 입력하면 해당 페이지로 이동합니다

pagingType 속성을 통해 테이블 페이징 버튼 스타일을 설정할 수 있지만 DataTable의 여러 기본 스타일에는 프로젝트에서 필요한 점프 페이지 번호를 입력하는 스타일이 없습니다. 하지만 공식 홈페이지의 플러그인 페이지에는 여러 페이징 버튼 플러그인이 소개되어 있는데, 그 중 입력 페이징 플러그인은 플러그인의 js를 도입하고 pagingType 값만 변경하면 됩니다. "입력"합니다. js 파일의 CDN은 다음과 같습니다.

//cdn.datatables.net/plug-ins/1.10.11/pagination/input.js

위 내용은 이 글의 전체 내용이므로, 모든 분들의 공부에 도움이 되었으면 좋겠습니다.

DataTables 공식 홈페이지