Question

我一直在尝试将一个表集成到我的网站中，该表将数据从我的数据库中提取到网站上的表格中。我已经在互联网上阅读了所有可能的解决方案，但还无法解决问题。

我将我的代码放在下面看看。请指出我在哪里纠错，以及我该怎样做才能发挥作用。

否则建议我使用另一个选项，将数据从数据库加载到HTML网站的表格中。

我在代码之前使用的声明。

      <!--Import jQuery before export.js-->
<script type="text/javascript" src="//code.jquery.com/jquery.js"></script>
<script src="//cdn.datatables.net/1.10.13/js/jquery.dataTables.js"></script>

<!--Data Table-->
<script type="text/javascript"  src=" //cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
<script type="text/javascript"  src=" //cdn.datatables.net/buttons/1.2.4/js/dataTables.buttons.min.js"></script>

<!--Export table buttons-->
<script type="text/javascript"  src="//cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"></script>
<script type="text/javascript" src="//cdn.rawgit.com/bpampuch/pdfmake/0.1.24/build/pdfmake.min.js" ></script>
<script type="text/javascript"  src="//cdn.rawgit.com/bpampuch/pdfmake/0.1.24/build/vfs_fonts.js"></script>
<script type="text/javascript" src="//cdn.datatables.net/buttons/1.2.4/js/buttons.html5.min.js"></script>
<script type="text/javascript" src="//cdn.datatables.net/buttons/1.2.1/js/buttons.print.min.js"></script>

<!--Export table button CSS-->

<link rel="stylesheet" href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.2.4/css/buttons.dataTables.min.css">

这是我的HTML代码。

        <div style="width:90%; margin:0 auto;">
        <table id="myTable">
            <thead>
                <tr>
                    <th>Id</th>
                    <th>Name</th>
                </tr>
            </thead>
        </table>
    </div>

这是我的Javascript代码。

<script>
    $(document).ready(function () {
        $('#myTable').DataTable({
            "ajax": {
                "url": "/api/medical_inventory/",
                "type": "GET",
                "datatype": "json"
            },
            "columns" : [
                    { "data": "Id", "autoWidth": true },
                    { "data": "Name", "autoWidth": true },
                ]
        });
    });
</script>

感谢任何帮助。

提前致谢。

Answer 1

您可能希望让ajax调用实际返回数据，然后将其传递给DataTable。举个例子：

$.ajax({
    url: "/api/medical_inventory/",
    type: "GET",
    datatype: "json",
    success: function(data){
        $("#myTable").DataTable({
          data: data,
          columns : [
            { title: "Id", className: "myClass" },
            { title: "Name", className: "otherClass" },
          ]
        });
    }
});

$（...）。即使在dataTable之前包含js，DataTable也不是函数

1 个答案: