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("第 " + res["start_index"] + "至 " + res["end_index"] + " 项, 共" + res["max_count"] + " 项") 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 + " (" + data.mark + ")</a></td>" } else { COLUMN2= "<td><a href=\"javascript:void(0)\" onclick=\"logDetailByAuth(" + data.id + ")\"style=\"color:darkgrey\">" + data.name + " (" + 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,有以下方法：
方法一、使用django的模板语法{%%} {{}}
方法二、使用js <script>document.write(js函数))</script> document.write就是写入到HTML 可以展示出来 相当于print js相当于return 值返回某个字符然后写到HTML，就可以通过页面展示了， 记得要给前端html 的是js执行后结果