坑了本身-前端動態渲染

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>
        

拓展知識：這個坑了我兩天啊
前端頁面中HTML是靜態的，就是一個文件，瀏覽器加載後會展現出特定的樣式
若是想動態的改變HTML,有如下方法：
方法1、使用django的模板語法{%%} {{}}
方法2、使用js <script>document.write(js函數))</script> document.write就是寫入到HTML 能夠展現出來 至關於print js至關於return 值返回某個字符而後寫到HTML，就能夠經過頁面展現了， 記得要給前端html 的是js執行後結果