我是 Django 程序员的新手。我创建了简单的 View 类并放置了 Bootstrap 数据表。根据下面的链接，我添加了按钮以不同的格式保存我的数据表。
refer this library
现在我的观点是这样的。
但我想要这样的 View 。(免费测试搜索对齐不正确)。我最喜欢在表格底部添加按钮集。最低要求创建这样的 View 。
我试了好几个小时还是没成功。期待一些专家的帮助。
------------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>
请高手帮忙。
最佳答案
替换
<table id="example" class="table table-bordered table-striped" cellspacing="0" width="100%">
与
<table id="example" class="table table-bordered table-striped bootstrap-datatable" cellspacing="0" width="100%">
您错过了 bootstrap-datatable 类。
关于javascript - Django View 组件没有对齐？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34038633/