class Pagenation(): def __init__(self): pass @staticmethod def page1( target_projects, target_projects_values,page, page_size=15,): ''' : Param target_projects: all audiences queryset The number is only used to count objects: param target_projects_values:: iterable dictionary for all audiences { "id"} : Param page: Current page : Param page_size: how many per page : Return: page_projects each request set of objects for display obtained, page current page, max_count the total number of the target object, max_page total 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"). the getElementsByTagName ( "th"). length // give all names under id thead-tr tagged "th" is saved as a tag array to obtain length of the array $ ( "# data-body" ) html ( "<tr> <td colspan = \". "+ th_count +" \ "style = \" text-align: center; font-size: 30px \ "> <class I = \ "Spinner-FA FA FA-Spin \"> </ I> </ TD> </ TR> ") // rotation icon and the icon of rotation covered all columns // search condition to pass the end var PID = $ ( "# Project") Val ();. // application var status = $ ( "# All") Val ();. // state var . Word = $ ( "# Word") Val ( );// search keyword var Page = $ ( "# page_now"). Val () // current page $.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); // Note here: js receive the return value (corresponding to return), and then stitching, and finally to show to the html (equivalent to 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>
Expand knowledge: the pit of my two days ah
front page in HTML is static, that is, a file, the browser will load the exhibit specific style
if you want to change the dynamic HTML, the following methods:
Method one, using the django template %% syntax {} {} {}
the second method used js <script> document.write (js function)) </ script> document.write is written in HTML can be displayed corresponding to print js out corresponding to the value returned by a return then write the characters HTML, you can page through the show, remember to give the front end html js after the results