Logo Questions Linux Laravel Mysql Ubuntu Git Menu
HTML CSS JAVASCRIPT SQL PYTHON PHP BOOTSTRAP JAVA JQUERY R React Kotlin
 

jquery.dataTables: how to change totally contained data / aaData?

Tags:

javascript

jquery

datatable

i need to totally change the content of a datatable, doing it from a javascript perspective. Not with any Ajax call or so as i have read manytimes. Actually make the following script work and switching the content of the table will do the trick.

i thought that i can use the :

    oTable.fnClearTable();
    oTable.fnAddData(R);
    oTable.fnAdjustColumnSizing();

but it do not work.

and i get: 

    DataTables warning (table id = 'example'): Cannot reinitialise DataTable.

To retrieve the DataTables object for this table, pass no arguments or see the docs for bRetrieve and bDestroy

here is a sample script:

<html>
<head>
<!--
<script type="text/javascript" src="ressources/json2.js"></script>
<script type="text/javascript" src="ressources/jsonwspclient.js"></script>
-->
<script type="text/javascript" src="ressources/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
jQuery.noConflict(); // absolutely needed for others json libaries... so i use jQuery instead of $
</script>
<script type="text/javascript" language="javascript" src="ressources/jquery.dataTables.js"></script>
<script type="text/javascript">

function s1()
{
    var R = [
    {"col0":"resultForCol0","co11WithFloatingValue":0.9523809523809523,"col2":"aåaa_utf8","col3WithInt":71},
    {"col0":"resultForCol0","co11WithFloatingValue":0.9523809523809523,"col2":"bbb","col3WithInt":40},
    {"col0":"resultForCol0","co11WithFloatingValue":0.7830687830687831,"col2":"c'ccc","col3WithInt":19},
    {"col0":"resultForCol0","co11WithFloatingValue":0.7167011732229124,"col2":"dd dd dd","col3WithInt":10},
    {"col0":"resultForCol0","co11WithFloatingValue":0.7159975101151571,"col2":"eee","col3WithInt":14}
    ];

    alert(JSON.stringify(R));

    var oTable = jQuery('#example').dataTable( {
        "aaData": R,
        "aoColumns": [
                { "mData": "col0" },
                { "mData": "co11WithFloatingValue" },
                { "mData": "col2" },
                { "mData": "col3WithInt" },
        ]
    } );
}

function s2()
{
    var R = [
    {"col0":"new","co11WithFloatingValue":0.9523809523809523,"col2":"aåaa_utf8","col3WithInt":51},
    {"col0":"other","co11WithFloatingValue":0.9523809523809523,"col2":"bbb bbbbb  bbb bbb","col3WithInt":42},
    {"col0":"whatever","co11WithFloatingValue":0.7830687830687831,"col2":"c'ccc cccc ","col3WithInt":14},
    {"col0":"changed","co11WithFloatingValue":0.7167011732229124,"col2":"dd dd dddddd ","col3WithInt":20},
    {"col0":"here","co11WithFloatingValue":0.7159975101151571,"col2":"eee eee e eeee ","col3WithInt":15},
    {"col0":"more","co11WithFloatingValue":0.7159975101151571,"col2":"eeeeeeeeeeee","col3WithInt":18},
    {"col0":"again","co11WithFloatingValue":0.7159975101151571,"col2":"eeeeeee","col3WithInt":16}
    ];

    alert(JSON.stringify(R));

    if(typeof oTable === 'undefined') 
    {

//    oTable.fnClearTable(); // can this be used?

    var oTable = jQuery('#example').dataTable( {
        "aaData": R,
        "aoColumns": [
                { "mData": "col0" },
                { "mData": "co11WithFloatingValue" },
                { "mData": "col2" },
                { "mData": "col3WithInt" },
        ]
    } );
    }
    else {
    // how to change the data contained inside datatable?
        oTable.fnClearTable();
        oTable.fnAddData(R);
        oTable.fnAdjustColumnSizing();
    }
}


</script>

</head>
<body style="text-align: center; width: 100%;">
    <div>
            <input type="button" id="btnS1" onclick="s1();" value="populate 1" />
            <input type="button" id="btnS2" onclick="s2();" value="populate 2" />
    </div>

    <div>
<table class="display" id="example">
  <thead>
    <tr>
      <th>col0</th>
      <th>co11WithFloatingValue</th>
      <th>col2</th>
      <th>col3WithInt</th>
    </tr>
  </thead>
  <tbody>
    <!-- data goes here -->
  </tbody>
</table>
    </div>

</body>
</html>
like image 398
user1340802 Avatar asked Jul 10 '13 16:07

user1340802

Video Answer

2 Answers

I guess adding jQuery('#example').dataTable().fnDestroy(); will do the required thing

function s1()
{
    var R = [
    {"col0":"resultForCol0","co11WithFloatingValue":0.9523809523809523,"col2":"aåaa_utf8","col3WithInt":71},
    {"col0":"resultForCol0","co11WithFloatingValue":0.9523809523809523,"col2":"bbb","col3WithInt":40},
    {"col0":"resultForCol0","co11WithFloatingValue":0.7830687830687831,"col2":"c'ccc","col3WithInt":19},
    {"col0":"resultForCol0","co11WithFloatingValue":0.7167011732229124,"col2":"dd dd dd","col3WithInt":10},
    {"col0":"resultForCol0","co11WithFloatingValue":0.7159975101151571,"col2":"eee","col3WithInt":14}
    ];
   // alert(JSON.stringify(R));
    jQuery('#example').dataTable().fnDestroy(); // **please note this**
    var oTable = jQuery('#example').dataTable( {
        "aaData": R,
        "aoColumns": [
                { "mData": "col0" },
                { "mData": "co11WithFloatingValue" },
                { "mData": "col2" },
                { "mData": "col3WithInt" },
        ]
    } );
}

function s2()
{
    var R = [
    {"col0":"other","co11WithFloatingValue":0.9523809523809523,"col2":"bbb bbbbb  bbb bbb","col3WithInt":42},
    {"col0":"new","co11WithFloatingValue":0.9523809523809523,"col2":"aåaa_utf8","col3WithInt":51},
    {"col0":"whatever","co11WithFloatingValue":0.7830687830687831,"col2":"c'ccc cccc ","col3WithInt":14},
    {"col0":"changed","co11WithFloatingValue":0.7167011732229124,"col2":"dd dd dddddd ","col3WithInt":20},
    {"col0":"here","co11WithFloatingValue":0.7159975101151571,"col2":"eee eee e eeee ","col3WithInt":15},
    {"col0":"more","co11WithFloatingValue":0.7159975101151571,"col2":"eeeeeeeeeeee","col3WithInt":18},
    {"col0":"again","co11WithFloatingValue":0.7159975101151571,"col2":"eeeeeee","col3WithInt":16}
    ];

    //alert(JSON.stringify(R));

    if(typeof oTable === 'undefined') 
    {
    console.log('in if');
//    oTable.fnClearTable(); // can this be used?
    jQuery('#example').dataTable().fnDestroy(); // **please note this**
    var oTable = jQuery('#example').dataTable( {
        "aaData": R,
        "aoColumns": [
                { "mData": "col0" },
                { "mData": "co11WithFloatingValue" },
                { "mData": "col2" },
                { "mData": "col3WithInt" },
        ]
    } );
    }
    else {
        console.log('in else');
    // how to change the data contained inside datatable?
        oTable.fnClearTable();
        oTable.fnAddData(R);
        oTable.fnAdjustColumnSizing();
    }
}
like image 109
Yogesh Avatar answered Sep 21 '22 07:09

Yogesh

here is a full working answer, if it could help anyone:

<html>
<head>

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.10/css/jquery.dataTables.min.css"></link>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
jQuery.noConflict(); // absolutely needed for others json libaries...
</script>

<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.10/js/jquery.dataTables.min.js"></script>
<script type="text/javascript">

var oTable = null;

function displayData( datas ) {
  var dataIsEmpty = (datas != undefined) && (datas.length == 0);
  if (oTable != null || dataIsEmpty) 
  {
    oTable.fnClearTable();
    if (! dataIsEmpty)
      oTable.fnAddData(datas);
  }
  else {              
    oTable = jQuery('#example').dataTable( {
      "bDestroy": true,
      "aaData": datas,
      "aoColumns": [
      { "mData": "col0" },
      { "mData": "co11WithFloatingValue" },
      { "mData": "col2" },
      { "mData": "col3WithInt" },
      ]
    });                 

    // Allow to resize manually the width of the columns
    // jQuery("#example").colResizable(); // do not work...
  }
}

function s1()
{
    var R = [
    {"col0":"resultForCol0","co11WithFloatingValue":0.9523809523809523,"col2":"aåaa_utf8","col3WithInt":71},
    {"col0":"resultForCol0","co11WithFloatingValue":0.9523809523809523,"col2":"bbb","col3WithInt":40},
    {"col0":"resultForCol0","co11WithFloatingValue":0.7830687830687831,"col2":"c'ccc","col3WithInt":19},
    {"col0":"resultForCol0","co11WithFloatingValue":0.7167011732229124,"col2":"dd dd dd","col3WithInt":10},
    {"col0":"resultForCol0","co11WithFloatingValue":0.7159975101151571,"col2":"eee","col3WithInt":14},
    {"col0":"resultForCol0","co11WithFloatingValue":0.9523809523809523,"col2":"aåaa_utf8","col3WithInt":71},
    {"col0":"resultForCol0","co11WithFloatingValue":0.9523809523809523,"col2":"bbb","col3WithInt":40},
    {"col0":"resultForCol0","co11WithFloatingValue":0.7830687830687831,"col2":"c'ccc","col3WithInt":19},
    {"col0":"resultForCol0","co11WithFloatingValue":0.7167011732229124,"col2":"dd dd dd","col3WithInt":10},
    {"col0":"resultForCol0","co11WithFloatingValue":0.9523809523809523,"col2":"aåaa_utf8","col3WithInt":71},
    {"col0":"resultForCol0","co11WithFloatingValue":0.9523809523809523,"col2":"bbb","col3WithInt":40},
    {"col0":"resultForCol0","co11WithFloatingValue":0.7830687830687831,"col2":"c'ccc","col3WithInt":19},
    {"col0":"resultForCol0","co11WithFloatingValue":0.7167011732229124,"col2":"dd dd dd","col3WithInt":10},
    {"col0":"resultForCol0","co11WithFloatingValue":0.7159975101151571,"col2":"eee","col3WithInt":14}
    ];

    alert(JSON.stringify(R));

    displayData(R);
}

function s2()
{
    var R = [
    {"col0":"new","co11WithFloatingValue":0.9523809523809523,"col2":"aåaa_utf8","col3WithInt":51},
    {"col0":"other","co11WithFloatingValue":0.9523809523809523,"col2":"bbb bbbbb  bbb bbb","col3WithInt":42},
    {"col0":"whatever","co11WithFloatingValue":0.7830687830687831,"col2":"c'ccc cccc ","col3WithInt":14},
    {"col0":"changed","co11WithFloatingValue":0.7167011732229124,"col2":"dd dd dddddd ","col3WithInt":20},
    {"col0":"here","co11WithFloatingValue":0.7159975101151571,"col2":"eee eee e eeee ","col3WithInt":15},
    {"col0":"more","co11WithFloatingValue":0.7159975101151571,"col2":"eeeeeeeeeeee","col3WithInt":18},
    {"col0":"whatever","co11WithFloatingValue":0.7830687830687831,"col2":"c'ccc cccc ","col3WithInt":14},
    {"col0":"changed","co11WithFloatingValue":0.7167011732229124,"col2":"dd dd dddddd ","col3WithInt":20},
    {"col0":"here","co11WithFloatingValue":0.7159975101151571,"col2":"eee eee e eeee ","col3WithInt":15},
    {"col0":"more","co11WithFloatingValue":0.7159975101151571,"col2":"eeeeeeeeeeee","col3WithInt":18},
    {"col0":"other","co11WithFloatingValue":0.9523809523809523,"col2":"bbb bbbbb  bbb bbb","col3WithInt":42},
    {"col0":"whatever","co11WithFloatingValue":0.7830687830687831,"col2":"c'ccc cccc ","col3WithInt":14},
    {"col0":"changed","co11WithFloatingValue":0.7167011732229124,"col2":"dd dd dddddd ","col3WithInt":20},
    {"col0":"here","co11WithFloatingValue":0.7159975101151571,"col2":"eee eee e eeee ","col3WithInt":15},
    {"col0":"more","co11WithFloatingValue":0.7159975101151571,"col2":"eeeeeeeeeeee","col3WithInt":18},
    {"col0":"whatever","co11WithFloatingValue":0.7830687830687831,"col2":"c'ccc cccc ","col3WithInt":14},
    {"col0":"changed","co11WithFloatingValue":0.7167011732229124,"col2":"dd dd dddddd ","col3WithInt":20},
    {"col0":"here","co11WithFloatingValue":0.7159975101151571,"col2":"eee eee e eeee ","col3WithInt":15},
    {"col0":"more","co11WithFloatingValue":0.7159975101151571,"col2":"eeeeeeeeeeee","col3WithInt":18},
    {"col0":"new","co11WithFloatingValue":0.9523809523809523,"col2":"aåaa_utf8","col3WithInt":51},
    {"col0":"other","co11WithFloatingValue":0.9523809523809523,"col2":"bbb bbbbb  bbb bbb","col3WithInt":42},
    {"col0":"whatever","co11WithFloatingValue":0.7830687830687831,"col2":"c'ccc cccc ","col3WithInt":14},
    {"col0":"changed","co11WithFloatingValue":0.7167011732229124,"col2":"dd dd dddddd ","col3WithInt":20},
    {"col0":"here","co11WithFloatingValue":0.7159975101151571,"col2":"eee eee e eeee ","col3WithInt":15},
    {"col0":"more","co11WithFloatingValue":0.7159975101151571,"col2":"eeeeeeeeeeee","col3WithInt":18},
    {"col0":"whatever","co11WithFloatingValue":0.7830687830687831,"col2":"c'ccc cccc ","col3WithInt":14},
    {"col0":"changed","co11WithFloatingValue":0.7167011732229124,"col2":"dd dd dddddd ","col3WithInt":20},
    {"col0":"here","co11WithFloatingValue":0.7159975101151571,"col2":"eee eee e eeee ","col3WithInt":15},
    {"col0":"more","co11WithFloatingValue":0.7159975101151571,"col2":"eeeeeeeeeeee","col3WithInt":18},
    {"col0":"again","co11WithFloatingValue":0.7159975101151571,"col2":"eeeeeee","col3WithInt":16}
    ];

    alert(JSON.stringify(R));


    displayData(R);
}


</script>

</head>
<body style="text-align: center; width: 100%;">
    <div>
            <input type="button" id="btnS1" onclick="s1();" value="populate 1" />
            <input type="button" id="btnS2" onclick="s2();" value="populate 2" />
    </div>


<table class="display" id="example">
  <thead>
    <tr>
      <th>col0</th>
      <th>co11WithFloatingValue</th>
      <th>col2</th>
      <th>col3WithInt</th>
    </tr>
  </thead>
  <tbody>
    <!-- data goes here -->
  </tbody>
</table>

<!--

    DataTables warning (table id = 'example'): Cannot reinitialise DataTable.

To retrieve the DataTables object for this table, pass no arguments or see the docs for bRetrieve and bDestroy

-->

</body>
</html>
like image 29
user1340802 Avatar answered Sep 17 '22 07:09

user1340802
Sign in to Comment

Related questions

Jquery on event is not binding for non existing elements
Dont ask confirm if user submit the form
Allow window.open to open new window and not popup
new popup window on every click
Twitter Bootstrap Typeahead force selection
Passing values to javascript onClick()
Save flot graph as image
Why is it always faster to access object properties than array items? [closed]
Simple tic-tac-toe AI [closed]
jQuery .append() not rendering html entity
Call each function in the list
Javascript enter key pressed event alternative for mobile site
Overlay a canvas over a div
Check if an object has a user defined prototype?
window.open behaviour in chrome tabs/windows
JavaScript - How to hide global scope from eval'd script
Is it possible to check the value of Firefox DNT with javascript?
Understanding functions and undefined
How to add multiple files to a zip with zip.js?
Google Maps "center_changed" is firing my function more than once

Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!