python flask에서 jquery datatable server-side 사용하는 방법

Question

python flask에서 jquery datatable server-side 사용하는 방법

조회수 1472회

python

flask

jquery

datatables

0

싫어요

python flask 에서 jquery로 데이터 테이블을 구성하는데 데이터가 3만개가 넘어가니 한 번에 로드하는 게 힘들어서 server-side processing을 찾아서 적용하는데

현재 제 코드에서는 데이터 10개만 고정으로 뿌린 후 페이징이나 search 기능들이 똑바로 작동하지 않네요. 어디를 수정해야할까요?

1. HTML 부분

        <table id="data_table" class="data_table table table-hover">
                <thead>
                    <tr>
                        <th>Tag</th><th>EN</th><th>CN</th><th>KO</th><th>Edit</th>
                    </tr>
                </thead>
                <tbody id="data_table_tbody">
                </tbody>
        </table>

2. Javascript 부분

    $(function(){
        $('#data_table').DataTable( {
            "bprocessing" : true,
            "bServerSide" : true,
            "sAjaxSource" :"/admin_en/datatable",
            "sServerMethod": "POST",
            "columns" : [
                { "data": "Tag" },
                { "data": "EN" },
                { "data": "CN" },
                { "data": "KO" },
                { "data": "Edit" },
            ],
            "dom" : 'lfBrtip',
            "buttons":[
                'csv'
            ]
        } );
    });//end function

3. Flask의 '/admin_en/datatable' 경로

@app.route("/admin_en/datatable", methods=['POST'])
def admin_en_datatable():
    en_filter_table = db.session.query(En_filter)
    datatable_data_dict = dict()
    datatable_data_list = list()
    for data in en_filter_table:
        filter_dict = dict()
        id = data.id
        filter_dict['id'] = id
        filter_dict['Tag'] = data.tag
        filter_dict['EN'] = data.en_filter
        filter_dict['CN'] = data.cn_filter
        filter_dict['KO'] = data.ko_filter
        filter_dict['Edit'] = "<button>btn</button>"
        datatable_data_list.append(filter_dict)
    datatable_data_dict['draw'] = 1
    datatable_data_dict['recordsTotal'] = int(en_filter_table.count())
    datatable_data_dict['recordsFiltered'] = int(en_filter_table.count())

    datatable_data_dict['data'] = datatable_data_list[:10]

    return jsonify(datatable_data_dict)

댓글 입력

score 2 · Accepted Answer

datatables 서버사이드 렌더링이란 결과적으로, 지정하신 /admin_en/datatable 라우트가 다음 형식의 JSON을 반환하도록 하시는 겁니다.

{
    "draw": "1",
    "recordsTotal": 1861,
    "recordsFiltered": 32,
    "data": [
        {
            "column1": "data1",
            ...,
        }
    ]
}

draw는 요청값에 들어오는거 그대로 돌려주시면 되고 문제는 recordsTotal과 recordsFiltered입니다. 그래서, 저의 경우는 이렇게 처리하고 있습니다.

일단 전체 결과를 얻는 쿼리문을 생성한 다음, 카운트만 세서 recordsTotal에 붙입니다.
1단계에서 만든 쿼리문에 제약(검색 등)과 정렬과 페이징을 추가한 쿼리문을 만듭니다. (이 순서대로 해야 하더군요.)
2단계에서 만든 쿼리문으로 카운트만 세서 recordsFiltered에 붙입니다.
2단계에서 만든 쿼리문을 실행해서 결과셋을 얻어서 data에 붙입니다.

주신 소스는 En_filter를 한번 쿼리해서 전체 결과를 다 얻은 다음에 그걸 제약 걸고 자르고 하는거 같네요. 그러면 당연히 느리거니와 원하시는 대로 작동하지도 않을 겁니다. 공식문서 잘 보시고, 실제로 datatable.js가 해당 라우트에 요청 보낼때 보내는 파라미터들의 구성도 연구해 보셔요.