프로그래밍/jQuery 👍

jqxGrid 와 JSONPlaceholder - 서버사이드 페이징/필터링

재우니 2024. 10. 18. 22:27

https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/index.htm

`jqxGrid` 와 JSONPlaceholder - 서버사이드 페이징/필터링

소개

웹 애플리케이션에서 데이터 그리드는 대량의 데이터를 효율적으로 표시하고 관리하는 데 중요한 요소입니다. 이번 포스트에서는 jqxGrid를 사용하여 서버에서 데이터를 불러오고, 페이징, 필터링, 정렬 기능을 구현하는 방법에 대해 살펴보겠습니다. 특히 서버 사이드 페이징과 필터링을 적용하는 방법을 간단히 설명하고, 예제 코드를 기반으로 설명을 진행하겠습니다.

jqxGrid란?

jqxGrid는 데이터 테이블을 쉽게 생성하고 관리할 수 있는 강력한 jQuery 위젯입니다. 페이징, 정렬, 필터링, 그리고 다양한 데이터 소스와의 통합 기능을 제공해 대량의 데이터를 처리할 수 있는 기능을 제공합니다. 오늘은 JSONPlaceholder API에서 데이터를 불러와 서버사이드 페이징 및 필터링을 구현하는 방법을 살펴보겠습니다.

사용 기술 개요

우리가 사용할 기술은 다음과 같습니다:

jQuery: DOM 요소의 선택 및 조작을 쉽게 해주는 JavaScript 라이브러리.
jqxGrid: jqWidgets에서 제공하는 고급 데이터 그리드 컴포넌트.
JSONPlaceholder API: 예제 데이터를 제공하는 간단한 REST API로서, 개발 테스트에 유용합니다.

코드 분석

1. HTML 구조 설정

HTML 파일의 기본 구조는 아래와 같이 설정됩니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Advanced jqxGrid with Server-Side Paging and Filtering</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqwidgets/12.0.0/jqwidgets/styles/jqx.base.css">
</head>
<body>
    <div id="jqxGrid"></div>
</body>
</html>

<div id="jqxGrid"></div>: jqxGrid가 표시될 영역입니다.

2. jQuery 및 jqxGrid 관련 라이브러리 추가

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqwidgets/20.0.0/jqwidgets/jqxcore.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqwidgets/20.0.0/jqwidgets/jqxgrid.js"></script>

jqxcore.js, jqxgrid.js 등 여러 jqWidgets 관련 스크립트를 추가하여 그리드가 정상적으로 작동할 수 있도록 설정합니다.

3. 데이터 소스 설정

서버에서 데이터를 받아오기 위한 소스를 설정합니다. JSONPlaceholder API를 사용하여 게시글 데이터를 불러옵니다.

var source = {
    datatype: "json",
    datafields: [
        { name: 'userId', type: 'number' },
        { name: 'id', type: 'number' },
        { name: 'title', type: 'string' },
        { name: 'body', type: 'string' }
    ],
    url: apiUrl,
    root: '',
    beforeprocessing: function (data, status, xhr) {
        var totalCount = xhr.getResponseHeader('x-total-count');
        source.totalrecords = parseInt(totalCount);
    },
    filter: function () {
        $("#jqxGrid").jqxGrid('updatebounddata', 'filter');
    },
    sort: function () {
        $("#jqxGrid").jqxGrid('updatebounddata', 'sort');
    }
};

datatype: 데이터를 JSON 형식으로 받습니다.
datafields: 받아온 데이터에서 사용할 필드를 정의합니다.
url: 데이터를 불러올 API 경로를 지정합니다.
beforeprocessing: 서버로부터 받은 응답 헤더에서 총 레코드 수를 받아옵니다.

4. `dataAdapter` 설정

jqxGrid는 dataAdapter를 통해 데이터를 바인딩하고, 데이터 로딩 시 페이징, 필터링 및 정렬을 처리할 수 있습니다.

var dataAdapter = new $.jqx.dataAdapter(source, {
    formatData: function (data) {
        var grid = $("#jqxGrid");
        var paginginfo = grid.jqxGrid('getpaginginformation');
        var pagesize = paginginfo.pagesize;
        var pagenum = paginginfo.pagenum;

        data._start = pagenum * pagesize;
        data._limit = pagesize;

        var filterinfo = grid.jqxGrid('getfilterinformation');
        if (filterinfo.length > 0) {
            for (var i = 0; i < filterinfo.length; i++) {
                var filterGroup = filterinfo[i].filter;
                var filters = filterGroup.getfilters();
                var datafield = filterinfo[i].datafield;
                var filterValue = filters[0].value;
                var filterCondition = filters[0].condition;

                if (filterCondition === 'EQUAL') {
                    data[datafield] = filterValue;
                }
            }
        }
        return data;
    }
});

formatData: 그리드의 상태를 기반으로 서버에 전달할 페이징 및 필터링 파라미터를 구성합니다.

5. jqxGrid 초기화

jqxGrid를 초기화하고, 서버 사이드 페이징과 필터링을 설정합니다.

$("#jqxGrid").jqxGrid({
    width: '100%',
    source: dataAdapter,
    sortable: true,
    pageable: true,
    autoheight: true,
    filterable: true,
    showfilterrow: true,
    virtualmode: true,
    rendergridrows: function (params) {
        return params.data;
    },
    pagesize: 10,
    pagesizeoptions: ['10', '20', '50'],
    columns: [
        { text: 'User ID', datafield: 'userId', width: '10%' },
        { text: 'Post ID', datafield: 'id', width: '10%' },
        { text: 'Title', datafield: 'title', width: '40%' },
        { text: 'Body', datafield: 'body', width: '40%' }
    ]
});

sortable: 칼럼을 기준으로 정렬을 허용합니다.
pageable: 페이징 기능을 활성화합니다.
virtualmode: 서버사이드 페이징을 활성화합니다.

결론

이 예제에서는 jqxGrid를 사용하여 서버에서 데이터를 가져오고, 페이징 및 필터링, 정렬 기능을 어떻게 적용하는지 살펴보았습니다. 실제로 대규모 데이터를 처리할 때, 서버사이드 페이징 및 필터링을 통해 클라이언트의 부하를 줄일 수 있습니다. jqxGrid는 이러한 기능을 쉽게 구현할 수 있는 도구로, 웹 개발 시 데이터 관리를 효율적으로 할 수 있습니다.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Advanced jqxGrid with Server-Side Paging and Filtering</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqwidgets/12.0.0/jqwidgets/styles/jqx.base.css">

    <!-- jQuery 및 jqWidgets 관련 스크립트 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqwidgets/20.0.0/jqwidgets/jqxcore.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqwidgets/20.0.0/jqwidgets/jqxdata.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqwidgets/20.0.0/jqwidgets/jqxscrollbar.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqwidgets/20.0.0/jqwidgets/jqxbuttons.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqwidgets/20.0.0/jqwidgets/jqxmenu.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqwidgets/20.0.0/jqwidgets/jqxgrid.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqwidgets/20.0.0/jqwidgets/jqxgrid.pager.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqwidgets/20.0.0/jqwidgets/jqxgrid.sort.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqwidgets/20.0.0/jqwidgets/jqxgrid.selection.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqwidgets/20.0.0/jqwidgets/jqxdropdownlist.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqwidgets/20.0.0/jqwidgets/jqxlistbox.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqwidgets/20.0.0/jqwidgets/jqxgrid.filter.js"></script>
</head>

<body>
    <div id="jqxGrid"></div>

    <script>
        $(document).ready(function () {
            var apiUrl = "https://jsonplaceholder.typicode.com/posts";

            var source = {
                datatype: "json",
                datafields: [
                    { name: 'userId', type: 'number' },
                    { name: 'id', type: 'number' },
                    { name: 'title', type: 'string' },
                    { name: 'body', type: 'string' }
                ],
                url: apiUrl,
                root: '',
                beforeprocessing: function (data, status, xhr) {
                    // 서버로부터 총 레코드 수를 가져옵니다.
                    var totalCount = xhr.getResponseHeader('x-total-count');
                    source.totalrecords = parseInt(totalCount);
                },
                filter: function () {
                    // 필터 적용 시 데이터 업데이트
                    $("#jqxGrid").jqxGrid('updatebounddata', 'filter');
                },
                sort: function () {
                    // 정렬 적용 시 데이터 업데이트
                    $("#jqxGrid").jqxGrid('updatebounddata', 'sort');
                }
            };

            var dataAdapter = new $.jqx.dataAdapter(source, {
                formatData: function (data) {
                    // 그리드의 현재 상태를 기반으로 서버에 보낼 파라미터를 구성합니다.
                    var grid = $("#jqxGrid");

                    // 여기에서 수정되었습니다.
                    var paginginfo = grid.jqxGrid('getpaginginformation');
                    var pagesize = paginginfo.pagesize;
                    var pagenum = paginginfo.pagenum;

                    data._start = pagenum * pagesize;
                    data._limit = pagesize;

                    // 필터링 파라미터 추가
                    var filterinfo = grid.jqxGrid('getfilterinformation');
                    if (filterinfo.length > 0) {
                        for (var i = 0; i < filterinfo.length; i++) {
                            var filterGroup = filterinfo[i].filter;
                            var filters = filterGroup.getfilters();
                            var datafield = filterinfo[i].datafield;

                            // 간단한 필터링만 지원되므로 첫 번째 필터만 사용
                            var filterValue = filters[0].value;
                            var filterCondition = filters[0].condition;

                            // JSONPlaceholder는 정확한 일치만 지원하므로 'EQUAL' 조건만 처리
                            if (filterCondition === 'EQUAL') {
                                data[datafield] = filterValue;
                            }
                        }
                    }

                    return data;
                },
                loadComplete: function (data, status, xhr) {
                    // 데이터 로드 완료 후 총 레코드 수 업데이트
                    var totalCount = xhr.getResponseHeader('x-total-count');
                    source.totalrecords = parseInt(totalCount);
                },
                loadError: function (xhr, status, error) {
                    console.log("Data loading failed: " + error);
                }
            });

            // jqxGrid 초기화 및 설정
            $("#jqxGrid").jqxGrid({
                width: '100%',
                source: dataAdapter,
                sortable: true,
                pageable: true,
                autoheight: true,
                filterable: true,
                showfilterrow: true,
                virtualmode: true, // 서버 사이드 페이징을 위해 virtualmode 활성화
                rendergridrows: function (params) {
                    return params.data;
                },
                pagesize: 10,
                pagesizeoptions: ['10', '20', '50'],
                columns: [
                    { text: 'User ID', datafield: 'userId', width: '10%' },
                    { text: 'Post ID', datafield: 'id', width: '10%' },
                    { text: 'Title', datafield: 'title', width: '40%' },
                    { text: 'Body', datafield: 'body', width: '40%' }
                ]
            });
        });
    </script>
</body>

</html>

참고자료

jqwidgets 의 gqxgrid 데모

https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/index.htm

jqwidgets 의 cdn 경로

https://cdnjs.com/libraries/jqwidgets

jqwidgets - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers

jQWidgets is an advanced jQuery, Angular, React, ASP .NET MVC, Custom Elements and HTML5 UI framework. - Simple. Fast. Reliable. Content delivery at its finest. cdnjs is a free and open-source CDN service trusted by over 12.5% of all websites, serving over

cdnjs.com

jqwidgets 다운로드

https://www.jqwidgets.com/download/

저작자표시 비영리 동일조건