django项目中datatables详细使用教程

专职

已于 2024-05-19 11:26:34 修改

阅读量4.1k

点赞数 6

分类专栏： Django 文章标签： django python 后端

于 2020-10-31 23:47:04 首次发布

本文链接：https://blog.csdn.net/weixin_42289273/article/details/109408689

版权

Django 专栏收录该内容

105 篇文章 15 订阅

订阅专栏

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": "尾页"
                        }
                }
            });

总结：datatables真的太强大了，更详细讲解参考datatables官网：DataTables example - Zero configuration

专职

关注

6
点赞
踩
20

收藏

觉得还不错? 一键收藏
打赏
0
评论
django项目中datatables详细使用教程

1.bootstrap-datatables使用教程Datatables是一款jquery表格插件。它是一个高度灵活的工具，可以将任何HTML表格添加高级的交互功能。分页，即时搜索和排序几乎支持任何数据源：DOM， javascript， Ajax 和服务器处理支持不同主题 DataTables, jQuery UI, Bootstrap, Foundation 各式各样的扩展: Editor, TableTools, FixedColumns …… 丰富多样的option和强大的A.
复制链接

扫一扫