Python分页及表格字段拼接


项目背景

因某页面显示数据条数较多后会影响页面加载效率。
所以,需要用分布进行异步式的调用显示。

用到的技术和JS文件

JS:jqpagination

python字符串拼接

代码实现

JS:<script src="/static/assets/global/Pagination/js/jquery.jqpagination.min.js"></script>
CSS:<link href="/static/assets/global/Pagination/css/jqpagination.css" rel="stylesheet" type="text/css" />

$(document).ready(function() {
    $('.pagination').jqPagination({
        link_string : '/?page={page_number}',
        max_page    : {{ allPage }},
        paged       : function(page) {
            var onepage = $('#onepage').val();
            $.ajax({
                url: {% url "pagings" %},
                type: 'GET',
                dataType: 'json',
                data: {'curPage': page,'onepage':onepage},
                success:function (data) {
                    var tbody = "";
                    if(data!=""){
                        $("#temptable tr:gt(0)").remove();

            ... ...

            ... ...

            ... ...





}
                            if (data[i][3] =='xxx') {
                                trs = "<tr class='portlet-body'><td style='display:none'>" + data[i][0] + "</td><td>" + data[i][1] + "</td><td>" + data[i][2] + "</td><td>" + data[i][3] + "</td><td width='30%'>" + data[i][4] + "</td><td>" + data[i][5] + "</td><td>" + submittime + "</td><td>" + status + "</td><td type=date>" + endtime + "</td><td><button class='btn green btn-outline' onclick='openDialog(\""+id+"\",\""+applytype+"\")'>查看</button></td></tr>";
                            }
                            else if (data[i][3] =='xxx') {
                                trs = "<tr class='portlet-body'><td style='display:none'>" + data[i][0] + "</td><td>" + data[i][1] + "</td><td>" + data[i][2] + "</td><td>" + data[i][3] + "</td><td width='30%'>" + data[i][4] + "</td><td>" + data[i][5] + "</td><td>" + submittime + "</td><td>" + status + "</td><td type=date>" + endtime + "</td><td><button class='btn green btn-outline' onclick='openDialog(\""+id+"\",\""+applytype+"\")'>查看</button></td></tr>";
                            }
                            else {
                                trs = "<tr class='portlet-body'><td style='display:none'>" + data[i][0] + "</td><td>" + data[i][1] + "</td><td>" + data[i][2] + "</td><td>" + data[i][3] + "</td><td width='30%'>" + data[i][4] + "</td><td>" + data[i][5] + "</td><td>" + submittime + "</td><td>" + status + "</td><td type=date>" + endtime + "</td><td><button class='btn red btn-outline'>暂无</button></td></tr>";

                            }
                            tbody+=trs;
                        }
                        $("#temptable").append(tbody);
                    }
                }
            })
        }
    });
});


$('#onepage').change(function () {
    var onepage = $('#onepage').val();
    $.ajax({
        url: {% url "pagings" %},
        type: 'GET',
        dataType: 'json',
        data: {'onepage':onepage},
        success:function (data) {
            var tbody = "";
            if(data!=""){
                $("#temptable tr:gt(0)").remove();
                for(var i=0;i<data.length;i++){


                ... ...

                ... ...

                ... ...


                        trs = "<tr class='portlet-body'><td style='display:none'>" + data[i][0] + "</td><td>" + data[i][1] + "</td><td>" + data[i][2] + "</td><td>" + data[i][3] + "</td><td width='30%'>" + data[i][4] + "</td><td>" + data[i][5] + "</td><td>" + submittime + "</td><td>" + status + "</td><td type=date>" + endtime + "</td><td><button class='btn green btn-outline' onclick='openDialog(\""+id+"\",\""+applytype+"\")'>查看</button></td></tr>";
                            }
                            else if (data[i][3] =='xxx') {
                                trs = "<tr class='portlet-body'><td style='display:none'>" + data[i][0] + "</td><td>" + data[i][1] + "</td><td>" + data[i][2] + "</td><td>" + data[i][3] + "</td><td width='30%'>" + data[i][4] + "</td><td>" + data[i][5] + "</td><td>" + submittime + "</td><td>" + status + "</td><td type=date>" + endtime + "</td><td><button class='btn green btn-outline' onclick='openDialog(\""+id+"\",\""+applytype+"\")'>查看</button></td></tr>";
                            }
                            else {
                                trs = "<tr class='portlet-body'><td style='display:none'>" + data[i][0] + "</td><td>" + data[i][1] + "</td><td>" + data[i][2] + "</td><td>" + data[i][3] + "</td><td width='30%'>" + data[i][4] + "</td><td>" + data[i][5] + "</td><td>" + submittime + "</td><td>" + status + "</td><td type=date>" + endtime + "</td><td><button class='btn red btn-outline'>暂无</button></td></tr>";

                            }
                            tbody+=trs;
                }
                $("#temptable").append(tbody);
            }
        }
    })
})

关键代码拼接截图

前端要传多个参数时的拼接代码截图

发表评论

电子邮件地址不会被公开。 必填项已用*标注