如何使用 Jquery 将数据添加到已初始化的数据表？

Question

我的 html;

中有一个 table（数据table）

<table id="datatable-table" class="table table-striped table-hover">
    <thead>
    <tr>
        <th>Id</th>
        <th>Band Name</th>
        <th>Members</th>
        <th>Bio</th>
        <th>Song List</th>
    </tr>
    </thead>

</table>

我在脚本标签中有一些 JQuery，其中包含有关如何获取 JSON 数据以填充它的信息；

<script>

    $(document).ready(function() {
        $.ajax({
            url: 'bands',
            type: 'GET',
            dataType: 'json',
            success: function(data) { 
                $('#datatable-table').dataTable({
                    "sAjaxDataProp": "",
                    "bProcessing": true, 
                    "aaData": data,
                        "aoColumnDefs": [
                            { "mData": "id"},
                            { "mData": "bandname"},
                            { "mData": "members"},
                            { "mData": "bio"},
                            { "mData": "songlist"}
                    ]
                });
            },
            error: function() { console.log('error retrieving customers'); }
        });
    });

</script>

当我运行执行此操作时，出现错误；

DataTables warning: table id=datatable-table - Cannot reinitialise DataTable. For more information about this error, please see http://datatables.net/tn/3

有什么想法吗？ :-)

* 编辑 *

我正在使用我得到的主题，但我看不到 table 在哪里已经初始化？

这是完整的代码；

<!DOCTYPE html>
<html>
<head>
    <title>bandsly</title>

        <link href="css/application.css" rel="stylesheet">
    <link rel="shortcut icon" href="img/favicon.png">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
    <meta charset="utf-8">
    <script>
        /* yeah we need this empty stylesheet here. It's cool chrome & chromium fix
           chrome fix https://code.google.com/p/chromium/issues/detail?id=167083
                      https://code.google.com/p/chromium/issues/detail?id=332189
        */
    </script>
</head>
<body class="background-dark">

                <div class="container">

                <br><br>
                <div class="row">
                    <div class="col-xs-6">
                        <div class="animated fadeInLeftBig">
                            <h1 class="slide-one-header"><strong>bands</strong>ly</h1>
                                <h4>Australia's best <strong>band matching</strong> site - find the band for you, <strong>now.</strong></h4>
                                <br>
                            <p class="lead hidden-xs">
                                We exists to make it easy for people to find a good <br>band for their wedding, birthday, barmitzvah, you name it.<br><br>
                                Our mission is to connect people & help organise <br>some amazing events for you on your special day.
                                <br><br>
                                Best of all, it's... <strong>Easy. Fun. Free</strong>
                            </p>

                        </div>
                    </div>
                    <div class="col-xs-6">
                        <div class="text-align-center animated fadeInRightBig">
                            <img src="img/music.png" width="90%">
                        </div>
                    </div>
                </div>
                </div>

        <div class="content container">

        <section class="widget">

            <div class="body">

                <div class="mt">
                    <table id="datatable-table" class="table table-striped table-hover">
                        <thead>
                        <tr>
                            <th>Id</th>
                            <th>Band Name</th>
                            <th>Members</th>
                            <th>Bio</th>
                            <th>Song List</th>
                        </tr>
                        </thead>

                    </table>
                </div>
            </div>
        </section>
        </div>

<!-- common libraries. required for every page-->
<script src="lib/jquery/dist/jquery.min.js"></script>
<script src="lib/jquery-pjax/jquery.pjax.js"></script>
<script src="lib/bootstrap-sass-official/assets/javascripts/bootstrap.js"></script>
<script src="lib/widgster/widgster.js"></script>
<script src="lib/underscore/underscore.js"></script>

<!-- common application js -->
<script src="js/app.js"></script>
<script src="js/settings.js"></script>

<!-- page specific libs -->
<script src="lib/bootstrap-select/dist/js/bootstrap-select.min.js"></script>
<script src="lib/underscore/underscore.js"></script>
<script src="lib/backbone/backbone.js"></script>
<script src="lib/backbone.paginator/lib/backbone.paginator.min.js"></script>
<script src="lib/backgrid/lib/backgrid.min.js"></script>
<script src="lib/backgrid-paginator/backgrid-paginator.js"></script>
<script src="lib/datatables/media/js/jquery.dataTables.min.js"></script>

<!-- page application js -->
<script src="js/tables-dynamic.js"></script>



<script>

    $(document).ready(function() {
        $.ajax({
            url: 'bands',
            type: 'GET',
            dataType: 'json',
            success: function(data) { 
                $('#datatable-table').dataTable({
                    "sAjaxDataProp": "",
                    "bProcessing": true, 
                    "aaData": data,
                        "aoColumnDefs": [
                            { "mData": "id"},
                            { "mData": "bandname"},
                            { "mData": "members"},
                            { "mData": "bio"},
                            { "mData": "songlist"}
                    ]
                });
            },
            error: function() { console.log('error retrieving customers'); }
        });
    });

</script>



</body>
</html>

哦，实时站点位于：http://bandsly.com/index3.html

Answer 1

您已经在第 228 行 tables-dynamic.js 中设置了数据表。

您要么想要将两个 init 合并在一起，要么停止删除 tables-dynamic.js

中的 initDataTables() 调用

您似乎还想使用 ajax 源数据。

尝试将您的 ajax 呼叫替换为

$('#datatable-table').dataTable({
    "ajax": 'bands',
    "sAjaxDataProp": "",
        "bProcessing": true,
        "aoColumnDefs": [{
        "mData": "id"
    }, {
        "mData": "bandname"
    }, {
        "mData": "members"
    }, {
        "mData": "bio"
    }, {
        "mData": "songlist"
    }]
});

Answer 2

Try bdestroy

假设您有一个数据集 a['aaData'] 并且您想要清空数据表然后用 ['aaData']

填充它

$('#datatable-table').dataTable({
                "sAjaxDataProp": "",
                "bProcessing": true, 
                "aaData": data,
                 bDestroy:true,
                    "aoColumnDefs": [
                        { "mData": "id"},
                        { "mData": "bandname"},
                        { "mData": "members"},
                        { "mData": "bio"},
                        { "mData": "songlist"}
                ]
            });

Answer 3

这是最适合的例子...

使用您要更改的变量在函数下初始化数据表，就像这里我正在尝试使用 AJAX LOAD

 function dbt(url){
  //===== Datatables =====//
  oTable = $('#datatable').dataTable({
      "serverSide": true,
      "ajax":url
  })}

完成上述所有处理后，只需使用您自己选择的变量自动加载函数

$(document).ready(function() {
var url='../tbdata/get_users.php';

  dbt(url);
} );

如何使用 Jquery 将数据添加到已初始化的数据表？

How to add data to an initialized dataTable with Jquery?

datatable

jquery