[JS 플러그 인]DataTable

약술 하 다
DataTables 는 jQuery 표 플러그 인 입 니 다.이것 은 고도 로 유연 한 도구 로 모든 HTML 표를 고급 상호작용 기능 을 추가 할 수 있다.
중국어 사이트:http://www.datatables.club/ 인 스 턴 스 인덱스:http://www.datatables.club/example/ 참고 안내서:http://www.datatables.club/manual/ 도움말 문서:http://www.datatables.club/reference/
페이지 도입
CSS

JS

CSS 와 JS 파일 을 도입 한 후 DataTable 은 다음 명령 을 통 해 시작 합 니 다(dataTable 은 표 ID 입 니 다).

$('#dataTable').DataTable();

전단 코드
DataTables 페이지 나 누 기 기능 을 사용 하려 면 열 에 대한 설정 을 열 어야 합 니 다.페이지 나 누 기 데이터 결 과 는 Ajax 가 JSON 형식 데 이 터 를 가 져 오고 분석 하 라 고 요청 한 것 입 니 다.코드 는 다음 과 같 습 니 다.

$("#dataTable").DataTable({
    //         
    "paging": true,
    //         
    "ordering": false,
    //          
    "info": true,
    //                   
    "lengthChange": false,
    //         (     ，           ，      )
    //"processing": true,
    //      DataTables       
    "searching": false,
    //          
    "serverSide": true,
    //    DataTables      ，          
    "deferRender": true,
    //         Ajax            
    "ajax": {
        "url": "/admin/page",
        "type":"POST"
    },
    //         
    "pagingType": "full_numbers",
    //        
    "columns": [
        {"data": "articleId"},
        {"data": "articleTitle"},
        {"data": function (row, type, val, meta) {
                var path = row.articleUrl;
                return ' '
            }},
        {"data": function (row, type, val, meta) {
            if(row.articleStatus == 1){
                return '
  
'
            }
            else{
                return '
   
'
            }
            }},
        {"data":function (row, type, val, meta) {
                var date = DateTime.format(row.articleUpdateTime,"yyyy-MM-dd HH:mm:ss");
                return '
'+date+'
'
            }},
        {
            "data": function (row, type, val, meta) {
                return '      ' +
                    '      ' +
                    '   '
            }
        }
    ],
    //    
    "language": {
        "sProcessing": "   ...",
        "sLengthMenu": "   _MENU_    ",
        "sZeroRecords": "      ",
        "sInfo": "    _START_   _END_    ，  _TOTAL_  ",
        "sInfoEmpty": "    0   0    ，  0  ",
        "sInfoFiltered": "(  _MAX_      )",
        "sInfoPostFix": "",
        "sSearch": "  :",
        "sUrl": "",
        "sEmptyTable": "      ",
        "sLoadingRecords": "   ...",
        "sInfoThousands": ",",
        "oPaginate": {
            "sFirst": "  ",
            "sPrevious": "  ",
            "sNext": "  ",
            "sLast": "  "
        },
        "oAria": {
            "sSortAscending": ":        ",
            "sSortDescending": ":        "
        }
    }
});

효과 도:
백 엔 드 코드
DataTable 은 Ajax 를 통 해 배경 데 이 터 를 방문 하여 기본적으로 여러 데 이 터 를 전송 합 니 다.그 중에서(draw,start,length),draw 는 DataTable 표지 이 고 start 는 조회 시작 수 이 며 length 는 조회 길이 입 니 다.
DataTable 은 데이터 반환 대상 을 일정한 형식 으로 요구 합 니 다패 키 징 데이터 반환 대상 클래스:

package com.ronin.blog.dto;

/**
 *       
 * 
Title: PageInfo
 * 
Description: 
 * @Author: 98
 * @Date: 2019-6-9 21:25
 */
import java.io.Serializable;
import java.util.List;

public class PageInfo implements Serializable {

    private int draw;
    private int recordsTotal;
    private int recordsFiltered;
    private List data;
    private String error;

    public int getDraw() {
        return draw;
    }

    public void setDraw(int draw) {
        this.draw = draw;
    }

    public int getRecordsTotal() {
        return recordsTotal;
    }

    public void setRecordsTotal(int recordsTotal) {
        this.recordsTotal = recordsTotal;
    }

    public int getRecordsFiltered() {
        return recordsFiltered;
    }

    public void setRecordsFiltered(int recordsFiltered) {
        this.recordsFiltered = recordsFiltered;
    }

    public List getData() {
        return data;
    }

    public void setData(List data) {
        this.data = data;
    }

    public String getError() {
        return error;
    }

    public void setError(String error) {
        this.error = error;
    }
}

Ajax 방법:

/**
     * DataTable  
     * @param draw
     * @param start
     * @param length
     * @return
     */
    @RequestMapping(value = "/page",method = RequestMethod.POST)
    @ResponseBody
    public PageInfo
 article_table(@RequestParam(value = "draw",required = true,defaultValue = "0")String draw,
                                           @RequestParam(value = "start",required = true,defaultValue = "0")String start,
                                           @RequestParam(value = "length",required = true,defaultValue = "10")String length){
        //     
        Integer drawInt = Integer.parseInt(draw);
        Integer startInt = Integer.parseInt(start);
        Integer lengthInt = Integer.parseInt(length);
        //PageInfo    dto  
        PageInfo
 pageInfo = articleService.page(drawInt, startInt, lengthInt);

        return pageInfo;
    }

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

Mac의 빠른 검색을 위한 플러그인

Mac의 표준 기능에는 빠른 검색(Quick Look)이 있습니다. 파일을 선택하고 공백을 누르면 미리 보기를 쉽게 표시할 수 있습니다. 표준이면 텍스트 파일, PDF, 이미지 등을 표시할 수 있습니다. 여기서는 편...

---

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.