CODEWITHSUNDEEP
jquerydatatable
Rob Alford
Rob Alford

Reputation: 99

How to add data to an initialized dataTable with Jquery?

I have a table (datatable) in my 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>

and i have some JQuery in a script tag with the info on how to source the JSON data to fill it;

<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>

When i run this, i get an error;

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

Any ideas? :-)

* EDIT *

I'm working within a theme I got, but i can't see where the table is already initialized?

Here is entire code;

<!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>

Oh, and live site is at: http://bandsly.com/index3.html

Upvotes: 0

Views: 4270

Answers (3)

Shailender Ahuja
Shailender Ahuja

Reputation: 312

Here is the best suited example ...

  1. Initialize datatable under a function with the variables you want to change, like here i am trying to play with AJAX LOAD
 function dbt(url){
  //===== Datatables =====//
  oTable = $('#datatable').dataTable({
      "serverSide": true,
      "ajax":url
  })}
  1. After doing all above processing just auto load the function with the variables of your own choice

$(document).ready(function() {

var url='../tbdata/get_users.php';

  dbt(url);
} );

Upvotes: 0

DGS
DGS

Reputation: 6025

You have already set up DataTables in your tables-dynamic.json line 228.

You will either want to merge the two init's together or stop remove the initDataTables() call in tables-dynamic.js

Also looks like you want to use ajax sourced data.

Try replacing your ajax call with

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

Upvotes: 1

Siddharth
Siddharth

Reputation: 869

Try bdestroy

lets assume you have a dataset a['aaData'] and you want to empty datatable and then fill it with a['aaData']

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

Upvotes: 0

Related Questions