2
我是Django程序员的新角色。我创建简单的视图类，并把引导数据表。根据下面的链接，我添加按钮来保存我的数据表格不同的格式。 refer this library 现在我的看法是这样的。 
Django视图组件未对齐？
但我想要这个视图（自由测试搜索对齐不正确）。我最喜欢如果我添加按钮设置表底部。最低要求创建像这个视图。
我尝试了很多小时，但还是没能成功。期待一些专家的帮助。
------------ 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>
请帮助一些高手帮忙。
从屏幕截图中可以看到一些静态文件丢失，屏幕截图不足以进行调试，请检查控制台是否在任何资源上都有404。如果是，请尝试'python manage.py collectstatic'。还可以在'urls.py'中查看静态文件。 –
@AnkitPopli先生，我检查，没有404错误。 – uma