坑了自己-前端动态渲染

class Pagenation():
    def __init__(self):
        pass
    @staticmethod
    def page1( target_projects, target_projects_values,page, page_size=15,):
        ‘‘‘

        :param target_projects: 所有的目标对象queryset
        :param target_projects_values: 所有目标对象的可迭代字典{"id":} 只是用来统计对象的数量
        :param page: 当前页
        :param page_size: 每页显示多少条
        :return: page_projects 每次请求得到的用于展示的对象集, page当前页, max_count目标对象总数, max_page总页码, last_page, next_page
        ‘‘‘
        if target_projects_values:
            max_count = len(target_projects_values)
            max_page = int(max_count / page_size) + (0 if max_count % page_size == 0 else 1)

            if page > max_page:
                page = max_page

            start_index = (page - 1) * page_size
            end_index = (page * page_size) if (page * page_size - 1 < max_count) else (max_count)
            page_projects = target_projects[start_index:end_index]
        else:
            max_count = 0
            max_page = 1
            page_projects = []
        last_page = 1 if (page - 1 <= 0) else (page - 1)
        next_page = max_page if (page + 1 > max_page) else (page + 1)
        return page_projects, page, max_count, max_page, last_page, next_page

<script>

 $("#first_page").click(function () {
            $("#page_now").val(1);


            start_search()

        });
        $("#last_page").click(function () {
            var lastpage = $("#max_page").html()
            $("#page_now").val(lastpage);
            start_search()

        });
        $("#previous_page").click(function () {
            if($("#page_now").val()==1){
                $("#page_now").val(1)
            }else{
                 $("#page_now").val(Number($("#page_now").val()) - 1);

            }
             start_search()


        });
        $("#next_page").click(function () {
            $("#page_now").val(Number($("#page_now").val()) + 1);
            start_search()

        });

function start_search() {
            var th_count = document.getElementById("thead_tr").getElementsByTagName("th").length //得到id为thead-tr的标签下所有名字为“th”的标签 会被存成数组 得到数组的长度
            $("#data-body").html("<tr><td colspan=\"" + th_count + "\" style=\"text-align: center;font-size: 30px\"><i class=\"fa fa-spinner fa-spin\"></i> </td></tr>") //旋转图标 并且旋转图标沾满所有的列
            //将搜索条件传给后端
            var pid = $("#project").val(); //应用
            var status = $("#all").val(); //状态
            var word = $("#word").val();//搜索关键字
            var page = $("#page_now").val()   // 当前页

            $.ajax({
                    type: ‘post‘,
                    dataType: ‘json‘,
                    url: "/logs/log_search/",
                    data: {
                        "pid": pid,
                        "all": status,
                        "word": word,
                        "page": page


                    },
                    error: function (res) {
                        error(res[‘msg‘]);
                    },
                    success: function (res) {
                        console.log(res)
                         $("#page").html(res["page"]);
                         $("#max_page").html(res["max_page"]);
                         $("#max_count").html(res["max_count"]);
                        if (res["status"] == 0) {

                          //  $("#appstable_info + span").html("第&nbsp" + res["start_index"] + "至&nbsp" + res["end_index"] + "&nbsp项,&nbsp共" + res["max_count"] + "&nbsp项")
                            var datas = res["datas"];
                            var dhtml = "";

                            for (var i = 0; i < datas.length; i++) {
                                var data = datas[i];
                                var COLUMN0 = "";
                                var COLUMN1 = "";
                                var COLUMN2 = "";
                                var COLUMN3 = "";
                                var COLUMN4 = "";
                                var COLUMN5 = "";
                                var COLUMN6 = "";
                                var COLUMN7 = "";
                                var COLUMN8 = "";
                                COLUMN0 = "<td style=\"display: none\">" + data.id + "</td>";
                                if (data.join_status == 2 && data.status != -1) {
                                    COLUMN1= "<td><a style=\"font-size: 18px;cursor: pointer\" title=\"日志检索\" " +
                                        "onclick=\"show_quick_search(" + data.id + ")\"><i class=\"mdi mdi-database-search\"></i></a></td>"
                                }else{
                                    COLUMN1="<td></td>"
                                }
                                if (data.join_status == 2 || data.join_status == 1) {
                                    COLUMN2= "<td><a href=\"javascript:void(0)\" style=\"font-weight: bold;color:darkblue\" " +
                                        "onclick=\"logDetailByAuth(" + data.id + ")\">" + data.name + "&nbsp;(" + data.mark + ")</a></td>"
                                } else {
                                    COLUMN2= "<td><a href=\"javascript:void(0)\" onclick=\"logDetailByAuth(" + data.id + ")\"style=\"color:darkgrey\">" + data.name + "&nbsp;(" + data.mark + ")</a></td>"
                                }
                                if (data.is_admin) {
                                    COLUMN3= "<td><a href=\"javascript:void(0)\" onclick=\"projectOpt(" + data.project_id + ", 1, \‘edit\‘, 1)\" >" + data.project_name + "</a></td>"
                                } else {
                                    COLUMN3= "<td>" + data.project_name + "</td>"
                                }
                                   COLUMN4= "<td>" + data.owner_names + "</td>";

                                COLUMN5= "<td class=\"statusTd\">" + return_all_status(data.join_status,data.status)+"</td>";
                                if (data.join_date) {
                                    COLUMN6= "<td>" + data.join_date + "</td>"
                                } else {
                                    COLUMN6= "<td></td>"
                                }
                                if (data.join_status == 2 && data.status != -1) {
                                    COLUMN7 = "<td>"
                                    COLUMN7 += return_system_info(data.system_type); //注意这里：js中接收返回值(相当于return)，再拼接，最后交给html去展示（相当于print ）
                                    COLUMN7 += return_format_info(data.type,data.encoding);
                                    COLUMN7 += return_size_info(data.mode_name,data.day);
                                    if (data.system_ip_desc) {
                                        COLUMN7 += "<span class=\"badge badge-light\" title=\"" + data.system_ip_desc + "\">"
                                    } else {
                                        COLUMN7 += "<span class=\"badge badge-light\" title=\"\">"
                                    }
                                    if (data.desc) {
                                        COLUMN7 += data.desc + "</span>"
                                    } else {
                                        COLUMN7 += "\"\"</span>"
                                    }
                                   COLUMN7 += return_switch_info(data.need_store,data.need_geolocation )
                                    COLUMN7 += "</td>"

                                }else{
                                    COLUMN7="<td></td>"
                                }
                                if (data.btns) {
                                    COLUMN8 += "<td class=\"table-action\"><div class=\"btn-group\">" +
                                        "<button class=\"btn btn-light btn-sm dropdown-toggle lheight-10\" type=\"button\" " +
                                        "data-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">操作</button>" +
                                        "<div class=\"dropdown-menu actionBtn\">"
                                    COLUMN8 +=  return_actions(data.id,data.join_status,data.status,  data.btns  );
                                    COLUMN8 += "</div></div></td></tr>"
                                } else {
                                    COLUMN8 += "<td class=\"table-action\"><div class=\"btn-group\">" +
                                        "<button class=\"btn btn-light btn-sm dropdown-toggle lheight-10\" type=\"button\" " +
                                        "data-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">操作</button>" +
                                        "<div class=\"dropdown-menu actionBtn\">" ;
                                     COLUMN8 +=return_actions( +data.id , data.join_status  , data.status,"")
                                       COLUMN8 += "</div></div></td>"
                                }

                            dhtml = dhtml + "<tr id=\"tr_"+ data.id +"\" ondblclick=\"app_join(" + data.id +")\">"+COLUMN0+COLUMN1+COLUMN2+COLUMN3+COLUMN4+COLUMN5+COLUMN6+COLUMN7+COLUMN8 + "</tr>";


                            }
                            $("#data-body").html(dhtml);

                        } else {
                            error(res["msg"])
                            setTimeout("window.location.reload()",4500)

                        }

                    }


                }
            )


        }
</script>