datatable插件实现分页功能

注意：按照官方文档的方法引入插件后会有点问题，样式也不是很美观，所以我做了修改。

由于通常djangotemplate 下的html文件使用了模板语法，所以要把CSS、JS文件放在对应的模板标签下面

下面是我的一个样例：

注意：table的id要改成“dataTables”，样式会好看一些。

<code>id="dataTables"</code>

DataTable_Test.html

<code>{% extends 'common/base.html' %}</code>

<code>{% block css %}</code>

<code> </code><code><</code><code>link</code> <code>rel</code><code>=</code><code>"stylesheet"</code> <code>type</code><code>=</code><code>"text/css"</code> <code>href</code><code>=</code><code>"/static/DataTables-1.10.15/media/css/jquery.dataTables.css"</code><code>></code>

<code>{% endblock %}</code>

<code>{% block content %}</code>

<code><</code><code>div</code> <code>class</code><code>=</code><code>"row"</code><code>></code>

<code> </code><code><</code><code>div</code> <code>class</code><code>=</code><code>"ibox"</code><code>></code>

<code> </code><code><</code><code>div</code> <code>class</code><code>=</code><code>"ibox-title"</code><code>></code>

<code>{# <</code><code>h5</code><code>>Uhost信息</</code><code>h5</code><code>>#}</code>

<code> </code><code><</code><code>h5</code> <code>style</code><code>=</code><code>"font-size: large"</code><code>>Uhost信息</</code><code>h5</code><code>></code>

<code> </code><code><</code><code>div</code> <code>class</code><code>=</code><code>"ibox-content"</code><code>></code>

<code> </code><code><</code><code>div</code> <code>class</code><code>=</code><code>"row"</code><code>></code>

<code> </code><code><</code><code>table</code> <code>id</code><code>=</code><code>"dataTables"</code> <code>class</code><code>=</code><code>"table table-striped table-hover"</code><code>></code>

<code> </code><code><</code><code>thead</code><code>></code>

<code> </code><code><</code><code>th</code> <code>class</code><code>=</code><code>"col-lg-2"</code><code>>主机名称</</code><code>th</code><code>></code>

<code> </code><code><</code><code>th</code> <code>class</code><code>=</code><code>"col-lg-2"</code><code>>IP地址</</code><code>th</code><code>></code>

<code> </code><code><</code><code>th</code> <code>class</code><code>=</code><code>"col-lg-2"</code><code>>价格</</code><code>th</code><code>></code>

<code> </code><code><</code><code>th</code> <code>class</code><code>=</code><code>"col-lg-2"</code><code>>可用区</</code><code>th</code><code>></code>

<code> </code><code><</code><code>th</code> <code>class</code><code>=</code><code>"col-lg-2"</code><code>>业务组</</code><code>th</code><code>></code>

<code> </code><code><</code><code>th</code> <code>class</code><code>=</code><code>"col-lg-2"</code><code>>到期时间</</code><code>th</code><code>></code>

<code> </code><code></</code><code>thead</code><code>></code>

<code> </code><code><</code><code>tbody</code><code>></code>

<code> </code><code>{% for host in uhosts %}</code>

<code> </code><code><</code><code>td</code><code>>{{ host.price }}</</code><code>td</code><code>></code>

<code> </code><code><</code><code>td</code><code>>{{ host.expiretime }}</</code><code>td</code><code>></code>

<code> </code><code>{% endfor %}</code>

<code> </code><code></</code><code>tbody</code><code>></code>

<code> </code><code></</code><code>table</code><code>></code>

<code>{% block script %}</code>

<code> </code><code><</code><code>script</code> <code>type</code><code>=</code><code>"text/javascript"</code> <code>charset</code><code>=</code><code>"utf8"</code> <code>src</code><code>=</code><code>"/static/DataTables-1.10.15/media/js/jquery.dataTables.js"</code><code>></</code><code>script</code><code>></code>

<code> </code><code><</code><code>script</code> <code>type</code><code>=</code><code>"text/javascript"</code> <code>charset</code><code>=</code><code>"utf8"</code> <code>src</code><code>=</code><code>"/static/DataTables-1.10.15/media/js/dataTables.bootstrap.min.js"</code><code>></</code><code>script</code><code>></code>

<code> </code><code><</code><code>script</code> <code>type</code><code>=</code><code>"text/javascript"</code> <code>src</code><code>=</code><code>"/static/js/datatable_custom.js"</code><code>></</code><code>script</code><code>></code>

datatable_custom.js是为了样式好看，自定义样式的一个js文件，内容如下：

<code> </code><code>* Created by cengchengpeng on 2018/1/10.</code>

<code>$(document).ready(function () {</code>

<code> </code><code>$('#dataTables').DataTable({</code>

<code> </code><code>language: {</code>

<code> </code><code>"sProcessing": "处理中...",</code>

<code> </code><code>"sLengthMenu": "显示 _MENU_ 项结果",</code>

<code> </code><code>"sZeroRecords": "没有匹配结果",</code>

<code> </code><code>"sInfo": "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",</code>

<code> </code><code>"sInfoEmpty": "显示第 0 至 0 项结果，共 0 项",</code>

<code> </code><code>"sInfoFiltered": "(由 _MAX_ 项结果过滤)",</code>

<code> </code><code>"sInfoPostFix": "",</code>

<code> </code><code>"sSearch": "搜索:",</code>

<code> </code><code>"sEmptyTable": "表中数据为空",</code>

<code> </code><code>"sLoadingRecords": "载入中...",</code>

<code> </code><code>"sInfoThousands": ",",</code>

<code> </code><code>"oPaginate": {</code>

<code> </code><code>"sFirst": "首页",</code>

<code> </code><code>"sPrevious": "上页",</code>

<code> </code><code>"sNext": "下页",</code>

<code> </code><code>"sLast": "末页"</code>

<code> </code><code>"oAria": {</code>

<code> </code><code>"sSortAscending": ": 以升序排列此列",</code>

<code> </code><code>"sSortDescending": ": 以降序排列此列"</code>

base.html文件

<code> </code><code><</code><code>meta</code> <code>charset</code><code>=</code><code>"utf-8"</code><code>></code>

<code> </code><code><</code><code>meta</code> <code>name</code><code>=</code><code>"viewport"</code> <code>content</code><code>=</code><code>"width=device-width, initial-scale=1.0"</code><code>></code>

<code> </code><code><</code><code>title</code><code>>CMDB管理</</code><code>title</code><code>></code>

<code> </code><code><</code><code>link</code> <code>rel</code><code>=</code><code>"icon"</code> <code>href</code><code>=</code><code>"/static/images/bitbug_favicon.ico"</code><code>></code>

<code> </code><code><</code><code>link</code> <code>href</code><code>=</code><code>"/static/inspinia/css/bootstrap.min.css"</code> <code>rel</code><code>=</code><code>"stylesheet"</code><code>></code>

<code> </code><code><</code><code>link</code> <code>href</code><code>=</code><code>"/static/inspinia/font-awesome/css/font-awesome.css"</code> <code>rel</code><code>=</code><code>"stylesheet"</code><code>></code>

<code> </code><code><</code><code>link</code> <code>href</code><code>=</code><code>"/static/inspinia/css/animate.css"</code> <code>rel</code><code>=</code><code>"stylesheet"</code><code>></code>

<code> </code><code><</code><code>link</code> <code>href</code><code>=</code><code>"/static/inspinia/css/style.css"</code> <code>rel</code><code>=</code><code>"stylesheet"</code><code>></code>

<code> </code><code><</code><code>link</code> <code>href</code><code>=</code><code>"/static/css/css.css?v={{ verion }}"</code> <code>rel</code><code>=</code><code>"stylesheet"</code><code>></code>

<code> </code><code>{% block css %}{% endblock %}</code>

<code> </code><code><</code><code>div</code> <code>id</code><code>=</code><code>"wrapper"</code><code>></code>

<code> </code><code>{% include "common/menu.html" %}</code>

<code> </code><code><</code><code>div</code> <code>id</code><code>=</code><code>"page-wrapper"</code> <code>class</code><code>=</code><code>"white-bg dashbard-1"</code><code>></code>

<code> </code><code>{% block content %}{% endblock %}</code>

<code><</code><code>script</code> <code>src</code><code>=</code><code>"/static/inspinia/js/jquery-2.1.1.js"</code><code>></</code><code>script</code><code>></code>

<code><</code><code>script</code> <code>src</code><code>=</code><code>"/static/inspinia/js/bootstrap.min.js"</code><code>></</code><code>script</code><code>></code>

<code><</code><code>script</code> <code>src</code><code>=</code><code>"/static/inspinia/js/plugins/metisMenu/jquery.metisMenu.js"</code><code>></</code><code>script</code><code>></code>

<code><</code><code>script</code> <code>src</code><code>=</code><code>"/static/inspinia/js/plugins/slimscroll/jquery.slimscroll.min.js"</code><code>></</code><code>script</code><code>></code>

<code><</code><code>script</code> <code>src</code><code>=</code><code>"/static/inspinia/js/inspinia.js"</code><code>></</code><code>script</code><code>></code>

<code><</code><code>script</code> <code>src</code><code>=</code><code>"/static/inspinia/js/plugins/pace/pace.min.js"</code><code>></</code><code>script</code><code>></code>

<code><</code><code>script</code> <code>src</code><code>=</code><code>"/static/inspinia/js/bootstrap-typeahead.js"</code><code>></</code><code>script</code><code>></code>

<code><</code><code>script</code> <code>src</code><code>=</code><code>"/static/js/jquery.numeric.js"</code><code>></</code><code>script</code><code>></code>

<code><</code><code>script</code> <code>src</code><code>=</code><code>"/static/js/common.js?v={{ verion }}"</code><code>></</code><code>script</code><code>></code>

<code><</code><code>script</code><code>></code>

<code> </code><code>$('#side-menu').find('li>a[href]').each(function(){</code>

<code> </code><code>if(location.href.indexOf($(this).attr('href').toLowerCase()) != -1){</code>

<code> </code><code>$(this).closest('li').addClass('active');</code>

<code> </code><code>$('#foldPage').click(function(){</code>

<code> </code><code>var $div = $('#accordion div[id]');</code>

<code> </code><code>$div.addClass('in').removeAttr('style');</code>

<code> </code><code>$div.removeClass('in');</code>

<code></</code><code>script</code><code>></code>

<code>{% block script %}{% endblock %}</code>

效果：

每页显示多少行结果也可以通过修改js文件来调整

本文转自曾哥最爱 51CTO博客，原文链接：http://blog.51cto.com/zengestudy/2059909，如需转载请自行联系原作者

datatable插件实现分页功能

继续阅读

主流浏览器四大综合性能测试

JavaScript自学笔记【4】函数的声明与调用目录二、函数的声明三、函数的调用

请求超时VUE axios重新再次请求

nodejs微信开发---授权登录+获取用户信息微信网页授权

debian9升级4.9.0内核到4.19.2内核过程

Javascript构建Bingo卡片游戏

JavaScript的那些坑之事件代理事件代理事件阶段

javascript的for (var i in data)慎用javascript中的for (var i in data)谨慎用

tab鼠标经过菜单切换

vue （vue2.0）使用总结(从大体结构总结)

vue搭建过程及出现问题

/\B(?=(?:\d{3})+$)/g 一条令人费解的正则表达式

适用于JavaScript的ECMAScript 2020规范向前发展

JS生成uuid的四种方法

layui多任务上传添加进度条