jQuery 플러그인 DataTables 페이징 개발 기술 공유

이 글은 주로 jQuery 플러그인 DataTables 페이징 개발 경험을 공유합니다. 관심 있는 친구들이 참고할 수 있기를 바랍니다.

블로그 작성 목적: 인기를 위해서가 아니라 그냥 메모하기 위해서입니다. 장황해도 상관없지만, 뭔가 놓치고 나중에 기억하지 못할까 봐 걱정됩니다.

개발 환경: Python 3.6.0, Anaconda 4.3.1, Django, JetBrains PyCharm 2017.1.5

제 프로젝트의 개발 과정에 따라 간단하게 정리했습니다.

1. 첫 번째 버전은 페이징이 없습니다.

이전에 DataTables를 사용해 본 적이 있어서(easyui에서는 Datagrid가 더 많았고, 이전 서버는 PHP였음) 프런트엔드/클라이언트 사이에 큰 차이가 없다고 생각했고, 서버는 어쨌든 표준 형식으로 JSON 문자열을 반환합니다. (Django의 코드는 나중에 정리하겠습니다). 게다가 처음에는 테이블의 페이지 매김에 대해 생각하지 않았습니다. 단지 세 가지 필드 정렬 요구 사항이 있었습니다(정렬이 완료되어 서버 측에서 반환되었습니다).
DataTables 기본 코드:

//表格的HTML代码略过
$('#dtList').DataTable({
        "bPaginate": false, //翻页功能
        "bInfo": false,//页脚信息
        "ordering": false, //不排序
        "searching": false,  //搜索框，不显示
        "bLengthChange": false, //改变每页显示数据数量，不显示
        "iDisplayLength": 10,  //每页默认显示数量（不显示了，这个设置也起不了作用）
        "serverSide":true, //服务端
        "retrieve":false, //意思是如果已经初始化了，则继续使用之前的Datatables实例。

        "ajax": {
          "type": "POST",
          "url": "/manage/getlist/",
          "data":{'csrfmiddlewaretoken': '{{ csrf_token }}'}, //Django的token值
          "dataSrc": function (result) { //使用dataSrc属性来设置获取到的数据格式，其值是服务端拼好的key-value（数据字段名称-字段值）【服务端走了弯路，后续有时间再写文章说明】
            var json = JSON.parse(result).data;
            return json;
          }
        },
        "columns": [ //表格要显示的列定义(字段名称做了处理)
          { "data": "field0",
            "visible":false,
            "render": function ( data, type, full, meta ) {
              //return &#39;<input type="checkbox"/>&#39;;
              return data;
            }
          },
          { "data": "field1" },
          { "data": "field2" , //此列名要与服务端返回的JSON串中的值一致
            "render": function ( data, type, full, meta ) {
              return &#39;<p style="text-align:left">&#39;+data+&#39;</p>&#39;;
            }
          },
          //其余字段定义省略
          ]
        });

2. 페이징 기능 추가

며칠 동안 첫 번째 프로그램을 작성한 후 페이징 기능을 추가할 준비가 되었습니다.
DataTables JSON 문자열 형식 요구 사항:

{
  "draw": n, 
  "recordsTotal": n, //总记录数
  "recordsFiltered": n, //条件过滤后的记录数，与总记录数可能会不同
  "data": [{}] //获取到的记录集合
}

easyui에서 Datagrid 구성 요소를 처리한 이전 경험에 따르면 총 레코드 수, 필터링된 레코드 수 등을 가져오고 JSON 문자열을 모아서 보내면 됩니다. 다시 가져오면 클라이언트가 페이지 매김을 직접 구현할 수 있습니다.

하지만 질문이 있습니다. 추첨 값을 어떻게 제어하나요?

정보를 확인하고 브라우저의 헤더를 추적한 결과 draw가 DataTables 자체의 속성 값이라는 것을 알았습니다. 데이터를 얻을 때마다 이를 변경할 필요가 없습니다. 값은 JSON 문자열로 직접 반환됩니다. 시도해봤는데 뭐가 문제인지 모르겠네요. 페이징이 안되는거 같고, 항상 이 제어방식이 좀 피곤하다는 생각이 듭니다.

발상을 바꿔서 정보를 다시 확인해 보겠습니다. 즉, 서버 측 페이징(요청 시 해당 데이터 요청)이 실제로 있습니다: django-datatables-view(django에 대한 데이터 테이블, https://pypi.python. org/pypi/django-datatables-view) 설치 단계를 따르기만 하면 JSON 문자열 값의 철자를 걱정할 필요가 없습니다.

향상된 프런트 엔드 코드:

$('#dtList').DataTable({
    "bPaginate": true, //翻页功能
    "bInfo": true,//页脚信息
    "ordering":true, //开启排序
    "searching": false, //搜索框，不显示
    "bLengthChange": true, //改变每页显示数据数量，不显示
    "aLengthMenu": [[5, 10, 25, 50, -1], [5, 10, 25, 50, "All"]], //每页显示记录菜单选项
    "iDisplayLength": 10, //每页默认显示数量
    "serverSide":true, //开启服务端请求模式
    'pagingType': 'full_numbers',
    "retrieve":true,

    "ajax": { //这边就不需要dataSrc属性来处理值了
     "type": "GET",
     "url": "{% url 'scheme_list_json' %}",
     "data":{
      'sSearch':'',
      'csrfmiddlewaretoken': '{{ csrf_token }}'},
     },
    "columns": [ //表格要显示的列定义
     { "data": 0,
      "visible":false,
      "render": function ( data, type, full, meta ) {
       //return &#39;<input type="checkbox"/>&#39;;
       return data;
      }
     },
     { "data": 1
     "bSortable":false
     },
     { "data": 2,
      "bSortable":false, //此字段不排序
      "render": function ( data, type, full, meta ) {
       return &#39;<p style="text-align:left">&#39;+data+&#39;</p>&#39;;
      }
     },
     //其余字段定义省略
     ......
     ],
    "aaSorting": [ //指定排序的列（索引从0开始）及规则
     [ 8, "asc" ],
     [ 9, "asc" ],
     [ 10, "desc" ]
     ],
    "drawCallback": function( settings ) { //绘制表格时的回调函数
     $("th").removeClass("sorting_asc"); //删除排序图标，升序样式
     $("th").removeClass("sorting_desc");//降序样式 
   });

정렬은 성공했지만 문제가 발생했습니다. 정렬 기능을 켠 후 헤더 행에 정렬 아이콘이 표시되지만 필요하지 않습니다. (클릭할 필요 없이 정렬만 하면 됨) 위 코드에 drawCallback 콜백 함수를 추가하고 스타일을 제거하면 됩니다.
PS:
함정이 있습니다. 반환 필드의 열 수와 서버의 정렬 필드는 일대일로 일치해야 하며 프런트 엔드 DataTables 표시 필드의 열 정의도 이 순서로 되어 있어야 합니다. 그렇지 않으면 프런트 엔드 정렬은 다음과 같이 엉망이 될 것입니다:

 # 需要显示的字段
 columns = ['jyjhbid', 'tzbd', 'clsc', 'clzt', 'jlscrq', 'jlxgrq', 'clcz'] 

 # 排序
 order_columns = ['jyjhbid', 'tzbd', 'clsc', 'clzt', 'jlscrq', 'jlxgrq', 'clcz']

저는 django-datatables-view를 처음 접했고 두 컬렉션 값이 다를 수 있다고 생각했습니다. . . . 더 많은 마일을 걸었습니다.

관련 권장 사항:

jQuery Datatables 헤더 정렬 문제에 대한 솔루션

Datatables 헤더가 정렬되지 않은 경우 수행할 작업

jquery 플러그인 데이터 테이블 속성 소개 및 페이징 생성에 대한 자세한 설명 및 정렬 예시

위 내용은 jQuery 플러그인 DataTables 페이징 개발 기술 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!