datatable插件實(shí)現(xiàn)分頁(yè)功能

發(fā)布時(shí)間：2020-10-02 16:33:43 來(lái)源：網(wǎng)絡(luò) 閱讀：18245 作者：zenge_blog 欄目：web開(kāi)發(fā)

1、下載datatable插件，下載地址：http://www.datatables.club/

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

注意：按照官方文檔的方法引入插件后會(huì)有點(diǎn)問(wèn)題，樣式也不是很美觀，所以我做了修改。

由于通常djangotemplate 下的html文件使用了模板語(yǔ)法，所以要把CSS、JS文件放在對(duì)應(yīng)的模板標(biāo)簽下面

下面是我的一個(gè)樣例：

注意：table的id要改成“dataTables”，樣式會(huì)好看一些。

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">主機(jī)名稱(chēng)</th>
                        <th class="col-lg-2">IP地址</th>
                        <th class="col-lg-2">價(jià)格</th>
                        <th class="col-lg-2">可用區(qū)</th>
                        <th class="col-lg-2">業(yè)務(wù)組</th>
                        <th class="col-lg-2">到期時(shí)間</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文件所以這里要注釋掉，否則可能引起函數(shù)方法沖突 -->
   <!-- <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是為了樣式好看，自定義樣式的一個(gè)js文件，內(nèi)容如下：

/**
 * Created by cengchengpeng on 2018/1/10.
 */
$(document).ready(function () {
    $('#dataTables').DataTable({
        language: {
            "sProcessing": "處理中...",
            "sLengthMenu": "顯示 _MENU_ 項(xiàng)結(jié)果",
            "sZeroRecords": "沒(méi)有匹配結(jié)果",
            "sInfo": "顯示第 _START_ 至 _END_ 項(xiàng)結(jié)果，共 _TOTAL_ 項(xiàng)",
            "sInfoEmpty": "顯示第 0 至 0 項(xiàng)結(jié)果，共 0 項(xiàng)",
            "sInfoFiltered": "(由 _MAX_ 項(xiàng)結(jié)果過(guò)濾)",
            "sInfoPostFix": "",
            "sSearch": "搜索:",
            "sUrl": "",
            "sEmptyTable": "表中數(shù)據(jù)為空",
            "sLoadingRecords": "載入中...",
            "sInfoThousands": ",",
            "oPaginate": {
                "sFirst": "首頁(yè)",
                "sPrevious": "上頁(yè)",
                "sNext": "下頁(yè)",
                "sLast": "末頁(yè)"
            },
            "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>

效果：

datatable插件實(shí)現(xiàn)分頁(yè)功能

每頁(yè)顯示多少行結(jié)果也可以通過(guò)修改js文件來(lái)調(diào)整

向AI問(wèn)一下細(xì)節(jié)

datatable插件實(shí)現(xiàn)分頁(yè)功能

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽