django项⽬中datatables详细使⽤教程1. bootstrap-datatables使⽤教程
Datatables是⼀款jquery表格插件。它是⼀个⾼度灵活的⼯具，可以将任何HTML表格添加⾼级的交互功能。
分页，即时搜索和排序
⼏乎⽀持任何数据源：DOM， javascript， Ajax 和 服务器处理
⽀持不同主题 DataTables, jQuery UI, Bootstrap, Foundation
各式各样的扩展: Editor, TableTools, FixedColumns ……
丰富多样的option和强⼤的API
2. 引⼊相关css/js⽂件
<link href="cdn.datatables/1.10.22/css/jquery.dataTables.min.css" rel="stylesheet">
<script src="../static/jquery-3.5.1.js"></script>  <!-- 此⽂件需要⾃⼰下载 -->
<script src="cdn.datatables/1.10.22/js/jquery.dataTables.min.js"></script>
3. js中的代码如下
$(document).ready(function() {
$('#example').DataTable();
} );
4. html中的代码
5. 效果如图所⽰
6. django项⽬中如何使⽤datatables
（1）⾸先是views：
from django.http import HttpResponse, JsonResponse
from .models import Commodity
import json
def index(request):
return render(request, "index.html")
def netinfo(request):  # ajax的url
data_list = []
query_set = Commodity.objects.all()
for data_info in query_set:
data_list.append({
'id': data_info.id,
'commodity_number': data_infomodity_number,
'three_type': data_info.three_type,
'two_type': data_info.two_type,
'commodity_name': data_infomodity_name,
'short_name': data_info.short_name,
'agent_price': str(data_info.agent_price),
"finance_sales": data_info.finance_sales,
"income": str(data_info.income),
'unit_price': str(data_info.unit_price),
"agent_cost": str(data_info.agent_cost),
"agent_profit": str(data_info.agent_profit),
"date": str(data_info.date)
})
data_dic = {}
data_dic['data'] = data_list  # 格式⼀定要符合官⽹的json格式，否则会出现⼀系列错误
return HttpResponse(json.dumps(data_dic))
（2）接下来是model：
from django.db import models
class Commodity(models.Model):
"""商品类"""
commodity_number = models.BigIntegerField(verbose_name="商品编号", db_column="商品编号")
three_type = models.CharField(max_length=50, verbose_name="三级分类", db_column="三级分类", db_index=True)
two_type = models.CharField(max_length=50, verbose_name="⼆级分类", db_column="⼆级分类")
commodity_name = models.TextField(verbose_name="名称", db_column="名称", null=True, blank=True)
short_name = models.CharField(max_length=255, verbose_name="简称", db_column="简称", null=True, blank=True)
agent_price = models.DecimalField(max_digits=10, decimal_places=2, verbose_name="经销价", db_column="经销价")
finance_sales = models.IntegerField(verbose_name="财务销量", db_column="财务销量")
income = models.DecimalField(max_digits=12, decimal_places=2, verbose_name="收⼊", db_column="收⼊")
unit_price = models.DecimalField(max_digits=10, decimal_places=2, verbose_name="成交单价", db
_column="成交单价")    agent_cost = models.DecimalField(max_digits=10, decimal_places=2, verbose_name="经销成本", db_column="经销成本")    agent_profit = models.DecimalField(max_digits=6, decimal_places=5, verbose_name="经销⽑利", db_column="经销⽑利")    date = models.DateField(verbose_name="⽇期", db_column="⽇期")
def __str__(self):
return str(selfmodity_number)
class Meta:
db_table = "commodity"
（3）然后是urls：
from django.urls import path
from . import views
urlpatterns = [
path("index/", views.index, name="index"),  # ⾸页
path("netinfo/", viewsinfo, name="netinfo"),  # ajax请求表格相关的数据]
（4）最后是HTML：
<!DOCTYPE html>
<html lang="en">
{% load static %}
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--第⼀步：引⼊Javascript / CSS （CDN）-->
<link href="cdn.datatables/1.10.22/css/jquery.dataTables.min.css" rel="stylesheet">    <script src="../static/jquery-3.5.1.js"></script>
<script src="cdn.datatables/1.10.22/js/jquery.dataTables.min.js"></script>
</head>
<body>
<!--第⼆步：添加如下 HTML 代码-->
<table id="example" class="display" >
<thead>
<tr>
<th>id</th>
<th>商品编号</th>
<th>三级分类</th>
<th>⼆级分类</th>
{#        <th>名称</th>#}
<th>简称</th>
<th>经销价</th>
<th>财务销量</th>
<th>收⼊</th>
<th>成交单价</th>
<th>经销成本</th>
<th>经销⽑利</th>
<th>⽇期</th>
</tr>
</thead>
</table>
</body>
<script type="text/javascript">
$(document).ready(function () {
$('#example').DataTable({
'ajax': '127.0.0.1:8000/netinfo/', // json的url
'columns': [
{'data': 'id'},
{'data': 'commodity_number'},
{'data': 'three_type'},
{'data': 'two_type'},
{#{'data': 'commodity_name'},#}
{'data': 'short_name'},
{'data': 'agent_price'},
{'data': 'finance_sales'},
{'data': 'income'},
{'data': 'unit_price'},
{'data': 'agent_cost'},
{'data': 'agent_profit'},
{'data': 'date'},
],
'language': {
'url': 'cdn.datatables/plug-ins/9dcbecd42ad/i18n/Chinese.json' // 以中⽂显⽰            }
})
})
</script>
</html>
（5）最终结果展⽰
7. datatables实现数据导出
（1）实现数据导出的功能只需要在JavaScript中添加以下代码
<!--需要导⼊的包-->
<script src="code.jquery/jquery-3.3.1.js"></script>
<script src="cdn.datatables/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="cdn.datatables/buttons/1.5.6/js/dataTables.buttons.min.js"></script>
<script src="cdn.datatables/buttons/1.5.6/js/buttons.flash.min.js"></script>
<script src="cdnjs.cloudflare/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script src="cdnjs.cloudflare/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
<script src="cdnjs.cloudflare/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
<script src="cdn.datatables/buttons/1.5.6/js/buttons.html5.min.js"></script>
<script src="cdn.datatables/buttons/1.5.6/js/buttons.print.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#example').DataTable({
dom: 'Bfrtip',
button: [
'copy', 'csv', 'excel', 'pdf', 'print'
],
})
})
</script>
（2）最终导出结果如图：
8. 隐藏列
django怎么学如果我们希望⽹站只看到⼀些重要的字段，但是导出的时候希望是全部字段，那就需要隐藏列

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。