Question

我的html中有一个表（数据表）;

<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警告：table id = datatable-table - 无法重新初始化数据表。有关此错误的详细信息，请参阅 http://datatables.net/tn/3

有什么想法吗？： - ）

*编辑*

我在一个主题中工作，但是我看不到桌子已经初始化了？

这是完整的代码;

<!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中设置了DataTable。

您要么将两个init合并在一起，要么停止删除initDataTables()

中的tables-dynamic.js来电

您还希望使用ajax源数据。

尝试用

替换你的ajax调用

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

Answer 2

尝试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将数据添加到初始化的dataTable？

3 个答案: