Django视图组件没有对齐?

时间:2015-12-02 09:05:10

标签: javascript html css django twitter-bootstrap

我是Django程序员的新手。我创建了简单的视图类并放入了bootstrap数据表。根据以下链接,我添加了按钮以不同的格式保存我的数据表。 refer this library 现在我的观点看起来像这样。 enter image description here

但我想要这样的观点。(免费测试搜索对齐不正确)。如果我在表格底部添加按钮,我最喜欢。最低要求就像这个视图一样。

enter image description here

我尝试了很多个小时但仍然无法成功。期待一些专家帮助。

------------ key_list_form.html -------------------------------- ---------

{% extends "base.html" %}

{% block title %}Key List{% endblock %}

{% block heading %}
    <h2>Serial Keys</h2>
{% endblock %}

{% block content %}
    <table id="example" class="table table-bordered table-striped" cellspacing="0" width="100%">
        <col width='100'>
        <col width='100'>
        <thead>
            <tr>
                <th>Product Code</th>
                <th>Serial Key</th>
            </tr>
        </thead>

        <tbody>
            {% for x in key %}
                <tr>
                    <td>{{ x.b_p_code  }}</td>
                    <td>{{ x.key }}</td>
                </tr>
            {% endfor %}
        </tbody>

        <tfoot>
            <tr>
                <th>Product Code</th>
                <th>Serial Key</th>
            </tr>
        </tfoot>
    </table>

{% endblock %}

----------- base.html文件------------------------------

{% load staticfiles %}

<!doctype html>

<html class="no-js" lang="">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title>Key Code - {% block title %}{% endblock %}</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="apple-touch-icon" href="{% static "apple-touch-icon.png" %}">
        <link rel="stylesheet" href="{% static "css/bootstrap.min.css" %}">
        <style>
            body {
                padding-top: 50px;
                padding-bottom: 20px;
            }
        </style>
        <link rel="stylesheet" href="{% static "css/bootstrap-theme.min.css" %}">
        <link rel="stylesheet" href="{% static "css/main.css" %}">

        <!-- DataTables -->
        <link rel="stylesheet" href="https://cdn.datatables.net/1.10.10/css/dataTables.bootstrap.min.css">
        <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
        <link rel="stylesheet" href="{% static "plugins/datatables/extensions/TableTools/css/dataTables.tableTools.css" %}">
        <link rel="stylesheet" href="{% static "plugins/datatables/extensions/TableTools/css/style.css" %}">
    </head>

    <body>
        <div class="container">
            <header>
                {% block toggle_login %}
                    {% include "toggle_login.html" %}
                {% endblock %}
            </header>
            <div>
                {% block heading %}{% endblock %}
            </div>
            <div>
                {% block content %}{% endblock %}
            </div>

            <hr>


        </div>

        <script src="{% static "js/vendor/modernizr-2.8.3-respond-1.4.2.min.js" %}"></script>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
        <script>window.jQuery || document.write('<script src="{% static "js/vendor/jquery-1.11.2.min.js" %}"><\/script>')</script>
        <script src="{% static "js/vendor/bootstrap.min.js" %}"></script>
        <script src="{% static "js/main.js" %}"></script>
        <script src="https://cdn.datatables.net/1.10.10/js/jquery.dataTables.min.js"></script>
        <script src="https://cdn.datatables.net/1.10.10/js/dataTables.bootstrap.min.js" ></script>
        <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
        <script src="{% static "plugins/datatables/extensions/TableTools/js/dataTables.tableTools.js" %}"></script>

        <!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
        <script>
            (function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
            function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
            e=o.createElement(i);r=o.getElementsByTagName(i)[0];
            e.src='//www.google-analytics.com/analytics.js';
            r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
            ga('create','UA-XXXXX-X','auto');ga('send','pageview');
        </script>

        <script>
            $(function() {
                $( "#datepicker" ).datepicker();
            });
        </script>

        <script>
            $(document).ready( function () {
                $('#example').dataTable( {
                    "dom": 'T<"clear">lfrtip',
                    "tableTools": {
                        "sSwfPath": "{% static "plugins/datatables/extensions/TableTools/swf/copy_csv_xls_pdf.swf" %}"
                    }
                });
            });
        </script>
    </body>
</html>

请帮助一些专家帮助。

1 个答案:

答案 0 :(得分:0)

替换

<table id="example" class="table table-bordered table-striped bootstrap-datatable" cellspacing="0" width="100%">

bootstrap-datatable

你错过了Sub SetFormat() With Sheets(1) .Cells.Font.Name = "Segoe UI" .Cells.Font.Size = 10 .Cells.VerticalAlignment = xlCenter End With End Sub 课程。