1. bootstrap-datatables使用教程
Datatables是一款jquery表格插件。它是一个高度灵活的工具,可以将任何HTML表格添加高级的交互功能。
- 分页,即时搜索和排序
- 几乎支持任何数据源:DOM, javascript, Ajax 和 服务器处理
- 支持不同主题 DataTables, jQuery UI, Bootstrap, Foundation
- 各式各样的扩展: Editor, TableTools, FixedColumns ……
- 丰富多样的option和强大的API
2. 引入相关css/js文件
<link href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css" rel="stylesheet">
<script src="../static/jquery-3.5.1.js"></script> <!-- 此文件需要自己下载 -->
<script src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js"></script>
3. js中的代码如下
$(document).ready(function() {
$('#example').DataTable();
} );
4. html中的代码
参考官网下载html代码即可:DataTables example - Zero configuration
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_info.commodity_number,
'three_type': data_info.three_type,
'two_type': data_info.two_type,
'commodity_name': data_info.commodity_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(self.commodity_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/", views.netinfo, 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="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css" rel="stylesheet">
<script src="../static/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js"></script>
</head>
<body>
<!--第二步:添加如下 HTML 代码-->
<table id="example" class="display" style="width:100%; font-size: 10px">
<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': 'http://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': 'http://cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/Chinese.json' // 以中文显示
}
})
})
</script>
</html>
(5)最终结果展示
7. datatables实现数据导出
(1)实现数据导出的功能只需要在JavaScript中添加以下代码
<!--需要导入的包-->
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.6/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.flash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/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. 隐藏列
如果我们希望网站只看到一些重要的字段,但是导出的时候希望是全部字段,那就需要隐藏列
<script type="text/javascript">
// 隐藏列
"columnDefs": [
{
"targets": [4], // 第几列
"visible": false, // 隐藏
"searchable": false // 不可以按隐藏列搜索
},
{
"targets": [5],
"visible": false,
"searchable": true // 可以按隐藏列搜索
}
]
</script>
8. 表格水平滚动和垂直滚动,并设置表格宽度和高度
(1)table标签中需加如下样式,新加:class="nowrap"
<table id="example" class="display nowrap" style="width:100%; font-size: 10px">
<thead>
<tr>
<th>id</th>
<th>商品编号</th>
<th>三级分类</th>
</tr>
</thead>
</table>
(2) js中需增加如下代码:
<script type="text/javascript">
$(document).ready(function () {
$('#example').DataTable({
"scrollX": true, // 水平滚动
"scrollY": 500, // 垂直滚动
})
})
</script>
(3)css中需增加如下代码:
div.dataTables_wrapper {
width: 1200px;
margin: 0 auto;
}
(4)结果如图:
9. 复杂的标头,colspan的用法
<thead>
<tr>
<th colspan="2">序号</th>
<th colspan="2">分类</th>
<th colspan="50">其它</th>
</tr>
<tr>
<th>id</th>
<th>商品编号</th>
<th>三级分类</th>
<th>二级分类</th>
<th>名称</th>
<th>简称</th>
</tr>
</thead>
效果图:
10. 修改DOM默认的定位
i:信息,f:搜索,l:每页显示多少条的下拉框,p:页码, B:数据导出按钮,t:table表格,r:加载时显示信息
js中的代码:
$(document).ready(function() {
$('#example').DataTable( {
"dom": '<"top"l><"top"B><"top"f>rt<"bottom"ip><"clear">',
} );
} );
css代码:
.dt-buttons {
display: inline-block;
margin-left: 30px;
}
效果图:
11. datatables中的常用配置项
$('#data').dataTable({
"bLengthChange": true, //开关,是否显示每页显示多少条数据的下拉框
"aLengthMenu": [[5, 10, 25, -1], [5, 10, 25, "所有"]],//设置每页显示数据条数的下拉选项
'iDisplayLength': 5, //每页初始显示5条记录
'bFilter': false, //是否使用内置的过滤功能(是否去掉搜索框)
"bInfo": true, //开关,是否显示表格的一些信息(当前显示XX-XX条数据,共XX条)
"bPaginate": true, //开关,是否显示分页器
"bSort": false, //是否可排序
"oLanguage":{ //语言转换
"sInfo": "显示第 _START_ 至 _END_ 项结果,共_TOTAL_ 项",
"sLengthMenu": "每页显示 _MENU_ 项结果",
"oPaginate": {
"sFirst": "首页",
"sPrevious": "前一页",
"sNext": "后一页",
"sLast": "尾页"
}
}
});