python flask에서 jquery datatable server-side 사용하는 방법
조회수 1475회
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)
1 답변
-
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가 해당 라우트에 요청 보낼때 보내는 파라미터들의 구성도 연구해 보셔요. - 일단 전체 결과를 얻는 쿼리문을 생성한 다음, 카운트만 세서
댓글 입력