2022-09-13 개발일기 [Django, Toast Grid]

금일은 Toast grid에서 진행하고있는 행사의 존재 유무를 Toast grid 내부 뿌려져있는 상품명과 매칭하여 데이터 시각화를 진행했다. 맨처음 뿌려주는것은 쉬웠으나 렌더속도가 너무 느려 페이지네이션이 하나 둘 될때마다 데이터를 렌더시키는 방법으로 진행을해서 렌더속도는 비교적 빠르게 수정이 가능했다. 맨처음 page를 datasource에 담아서 전달해주는 부분에서 헤맸지만 도움을 받아 수월하게 해결을했다!!!

개발 스크립트[script]

const pagination1 = new tui.Pagination('prodinfopagenation', {
    totalItems: pagetotalcount,
    itemsPerPage: 20,
    visiblePages: 10,
});

pagination1.on('afterMove', (event) => {
    const currentPage = event.page;
    let searchbtnkw = $('#searchbtnkw').val()
    const obj = {}
    obj['searchbtnkw'] = searchbtnkw
    obj['action'] = 'productnamegrid'
    grid3.readData(currentPage, obj, false)
});

$('#searchbtn').on('click', function () {
    let searchbtnkw = $('#searchbtnkw').val()
    const obj = {}
    obj['searchbtnkw'] = searchbtnkw
    obj['action'] = 'productnamegrid'
    grid3.readData(1, obj, false)
    obj['gettotalcount'] = 'Y'
    obj['page'] = 1
    obj['perPage'] = 20
    gettotalcount('{% url 'B2C:gridtableapi' %}', obj, pagination1)
})


function gettotalcount(url, data, tg) {
    $.ajax({
        url: url,
        type: 'get',
        data: data,
        success: function (data) {
            pagination1.reset(data)
        }
    })
}

개발 스크립트[API]

if req.get('action') == 'productnamegrid':
    data = Productname.objects.order_by('-product')
    perPage = int(req.get('perPage'))
    page = int(req.get('page'))
    start_page = perPage * (page - 1)
    end_page = perPage * page
    pagetotalcount = len(data)
    if req.get('searchbtnkw'):
        kw = req.get('searchbtnkw')
        data = data.filter(
            Q(MALL_ID__icontains=kw) |
            Q(PRODUCT_NAME__icontains=kw) |
            Q(SKU_VALUE__icontains=kw)
        )

    if req.get('gettotalcount'):
        return Response(len(data))

    for index, iloc in enumerate(data):
        pass

    data = data[start_page:end_page]
    serializer = ProductnameSerializer(data, many=True)

    serializerdata = serializer.data

    result = {
        "result": 'true',
        "data": {
            "contents": serializerdata,
        }
    }

개발 스크립트[API]

if req.get('action') == 'prodnameinfo':
    pagetotalcount = len(Productname.objects.all())

    context = {
        'pagetotalcount': pagetotalcount,
    }
    return render(request, 'B2C/PINFO/prodnameinfo.html', context)