时间戳

首页 > 解决方案 > 数据不能在 django/bootstrap 4 中工作

django - 数据不能在 django/bootstrap 4 中工作

问题描述

目标： 我正在使用 django 和 bootstrap。我想在我的引导表中使用数据表 jquery 插件。

问题： 我的 html 中的表保持不变并且不使用数据表插件

我做了什么来解决这个问题？ 我已经在我的 base.html 文件中添加了这两行

base.html

<!-- Datatable -->
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.js"></script>

以及javascript代码：

<script>
    $(document).ready(function(){
        $('#dtBasicExample').DataTable();
    });
</script>

<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>

我的表在我的 html 文件中被命名为 dtBasicExample：

<div class="container-fluid">
    <div class="col-sm-20">      
            <table id="dtBasicExample" class="table table-striped table-hover">

我需要在 django 中添加什么才能使其正常工作吗？

非常感谢，

标签： djangobootstrap-4datatables

解决方案

我认为您包含库并以错误的顺序调用 .DataTable() 。

页面应该是这样的：

<head>
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.css">
<head>

<body>
    <table id="dtBasicExample" class="table table-striped table-hover">

    <script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
    <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.js"></script>
    <script>
        $(document).ready(function(){
            $('#dtBasicExample').DataTable();
        });
    </script>

</body>

笔记：

  • 我在包含数据表库之前包含了 jQuery
  • 我在包含数据表库后调用 .DataTable 方法

推荐阅读