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多任務上傳添加進度條