datatable插件实现分页功能
更新:HHH   时间:2023-1-7


1、下载datatable插件,下载地址:http://www.datatables.club/


2、安装方法:http://www.datatables.club/manual/install.html

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

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

下面是我的一个样例:


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

id="dataTables"

DataTable_Test.html

{% extends 'common/base.html' %}
{% block css %}
    <link rel="stylesheet" type="text/css" href="/static/DataTables-1.10.15/media/css/jquery.dataTables.css">
    <link rel="stylesheet" type="text/css" href="/static/DataTables-1.10.15/media/css/dataTables.bootstrap.min.css">
{% endblock %}
{% block content %}

<div class="row">
    <div class="ibox">
        <div class="ibox-title">
{#            <h6>Uhost信息</h6>#}
            <h6 style="font-size: large">Uhost信息</h6>
        <div class="ibox-content">
            <div class="row">
                <table id="dataTables" class="table table-striped table-hover">
                <thead>
                    <tr>
                        <th class="col-lg-2">主机名称</th>
                        <th class="col-lg-2">IP地址</th>
                        <th class="col-lg-2">价格</th>
                        <th class="col-lg-2">可用区</th>
                        <th class="col-lg-2">业务组</th>
                        <th class="col-lg-2">到期时间</th>
                    </tr>
                </thead>
                <tbody>
                    {% for host in uhosts %}
                    <tr>
                        <td>{{ host.name }}</td>
                        <td>{{ host.ip }}</td>
                        <td>{{ host.price }}</td>
                        <td>{{ host.zone.name }}</td>
                        <td>{{ host.tag }}</td>
                        <td>{{ host.expiretime }}</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
            </div>
        </div>
        </div>
    </div>
</div>
{% endblock %}

{% block script %}
    
    <script type="text/javascript" charset="utf8" src="/static/DataTables-1.10.15/media/js/jquery.dataTables.js"></script>
    <!-- 由于base.html文件中引入了jquery.js文件所以这里要注释掉,否则可能引起函数方法冲突 -->
   <!-- <script type="text/javascript" charset="utf8" src="DataTables-1.10.15/media/js/jquery.js"></script> -->
    <script type="text/javascript" charset="utf8" src="/static/DataTables-1.10.15/media/js/dataTables.bootstrap.min.js"></script>
    <script type="text/javascript" src="/static/js/datatable_custom.js"></script>
{% endblock %}


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

/**
 * Created by cengchengpeng on 2018/1/10.
 */
$(document).ready(function () {
    $('#dataTables').DataTable({
        language: {
            "sProcessing": "处理中...",
            "sLengthMenu": "显示 _MENU_ 项结果",
            "sZeroRecords": "没有匹配结果",
            "sInfo": "显示第 _START_ 至 _END_ 项结果,共 _TOTAL_ 项",
            "sInfoEmpty": "显示第 0 至 0 项结果,共 0 项",
            "sInfoFiltered": "(由 _MAX_ 项结果过滤)",
            "sInfoPostFix": "",
            "sSearch": "搜索:",
            "sUrl": "",
            "sEmptyTable": "表中数据为空",
            "sLoadingRecords": "载入中...",
            "sInfoThousands": ",",
            "oPaginate": {
                "sFirst": "首页",
                "sPrevious": "上页",
                "sNext": "下页",
                "sLast": "末页"
            },
            "oAria": {
                "sSortAscending": ": 以升序排列此列",
                "sSortDescending": ": 以降序排列此列"
            }
        }
    });
});




base.html文件

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CMDB管理</title>
    <link rel="icon" href="/static/images/bitbug_favicon.ico">
    <link href="/static/inspinia/css/bootstrap.min.css" rel="stylesheet">
    <link href="/static/inspinia/font-awesome/css/font-awesome.css" rel="stylesheet">
    <link href="/static/inspinia/css/animate.css" rel="stylesheet">
    <link href="/static/inspinia/css/style.css" rel="stylesheet">
    <link href="/static/css/css.css?v={{ verion }}" rel="stylesheet">
    {% block css %}{% endblock %}
</head>
<body>
    <div id="wrapper">
        {% include "common/menu.html" %}
        <div id="page-wrapper" class="white-bg dashbard-1">
            {% block content %}{% endblock %}
        </div>
    </div>
</body>
<script src="/static/inspinia/js/jquery-2.1.1.js"></script>
<script src="/static/inspinia/js/bootstrap.min.js"></script>
<script src="/static/inspinia/js/plugins/metisMenu/jquery.metisMenu.js"></script>
<script src="/static/inspinia/js/plugins/slimscroll/jquery.slimscroll.min.js"></script>
<script src="/static/inspinia/js/inspinia.js"></script>
<script src="/static/inspinia/js/plugins/pace/pace.min.js"></script>
<script src="/static/inspinia/js/bootstrap-typeahead.js"></script>
<script src="/static/js/jquery.numeric.js"></script>
<script src="/static/js/common.js?v={{ verion }}"></script>
<!--<script src="/static/js/workflow.js?v={{ verion }}"></script>-->
<script>
    $('#side-menu').find('li>a[href]').each(function(){
        if(location.href.indexOf($(this).attr('href').toLowerCase()) != -1){
            $(this).closest('li').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.removeClass('in');
            $(this).data('fold', 0);
        }
    });
</script>
{% block script %}{% endblock %}
</html>


效果:


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



返回web开发教程...