DataTable plugin implements paging features

1, download the DataTable plugin, download address: http://www.datatables.club/

2, mounting method: http://www.datatables. Club / Manual / Install.html

Note: It will be a bit problem after introducing the plugin according to the method of the official document, and the style is not very beautiful, so I made a modification.

Since the template syntax is used in the HTML file under DjangoteMplate, the CSS, JS file is placed under the corresponding template tag The following is one of my sample:

Note: Table’s ID is changed to “DataTables”, and the style will look better.


DataTable_test.html
   
{% Extends ‘Common / Base.html’%} {% Block CSS%}

{% Endblock%} {% block content%}

{#
 UHOST Information  #}  UHOST Information  
Host Name
IP address
Service group expiration time { % For host in uhosts%} {{host.name}} {{host.ip}} {host.price}} {host.tag}} [Host.expiRetime}} {% endfor%} {% endblocK%} {% block script%} -> {% endblock%} DATATABLE_CUSTOM.JS is a JS file for style, custom style, as follows:
[ {{Host.zone.Name}}
/ ** * Created by CENGCHENGPENG ON 2018/1/10. * / $ (Document) .ready ("": ":": ":": ":": ":": ":": "Processing ... "," SLENGTHMENU ":" Show _Menu_ Item ":" No Match Results "," SINFO ":" Show Question _Start_- "," SINFOEMPTY ":" Show 0 to 0 results, total 0 "," SINFOFILTERED ":" "SINFOPOSTFIX": "," SINFOPOSTFIX ":" Search: "Search:", "SURL": "" ":" Table in the table "," SloadingRecords ":" load .."," Sinfothousousans ":", "opaginate": {"sfirst": "Home": "Previous", "Snext": "Next", "Slast": "Last": "Last": "Last" }, "Oaria": {"ssortascending":: "SSORTDESCENDING": "SSORTDESCENDING": ":"}}});});
<!--  Base.html file


CMDB management

   
{% Block css%}


{% include “common / menu.html”%}

{% block content%} {% endblock%}




   ->  $ ('# side-menu'). Find ('li> a [href]'). Each (Function () {if (location.href.indexof ($ (this) .attr ('href'). TOLOWERCASE ())! = -1) {$ (this) .closest ('^); addclass (' active ');}}; $ (' # foldpage '). click (Function () {var fold = $ (this) .data ('fold'); var $ div = $ ('# Accordion Div [ID]'); if (fold == "0") {$ Div.Addclass ('IN'). Removeattr ('Style'); $ (this) .data ('fold', 1);} else {$ div r ('in'); $ (this) .data ('fold' , 0);}});  {% endblock%}       Effect:       How many rows of rows of rows of rows per page can alsoAdjust by modifying the JS file 
© Copyright Notice
THE END
Just support it if you like
like0
share
comment Grab the couch

Please log in to comment