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

javascript jquery datatable
15,787

Solution 1

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();
    }
}

Solution 2

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>
Share:
15,787

Related videos on Youtube

user1340802
Author by

user1340802

Updated on October 09, 2022

Comments

  • user1340802
    user1340802 over 1 year

    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>
  • user1340802
    user1340802 almost 11 years
    thx for your answer, but it looks like it did not work. Actually i can not change the R naming, the code provided is a simplification, if i can make it work, i will be able to solve my problem. BTW, according to my understandings, the naming is ok with the mData and aoColumns, even if i'm not sure. Using the bRetrieve prevent the error message, but do not change anything, "populate2" never change the content of the table. This is what i need, when clicking on "populate1" having one content, when clicking on "populate2" having another, changing whole table each time. best regards
  • Yogesh
    Yogesh almost 11 years
    Please see the updated answer. I guess you need to destroy the existing datatable using jQuery('#example').dataTable().fnDestroy(); so that it will have new data in same table for both the click
  • Yogesh
    Yogesh almost 11 years
    I found one more way, Just add "bDestroy": true, in datatable declaration. Hope this will help this time. No need to call fnDestory method
  • Yogesh
    Yogesh almost 11 years
    @user1340802 great! :) I got to learn something by finding this answer.

Recents

Why Is PNG file with Drop Shadow in Flutter Web App Grainy?
How to troubleshoot crashes detected by Google Play Store for Flutter app
Cupertino DateTime picker interfering with scroll behaviour
Why does awk -F work for most letters, but not for the letter "t"?
Flutter change focus color and icon color but not works
How to print and connect to printer using flutter desktop via usb?
Critical issues have been reported with the following SDK versions: com.google.android.gms:play-services-safetynet:17.0.0
Flutter Dart - get localized country name from country code
navigatorState is null when using pushNamed Navigation onGenerateRoutes of GetMaterialPage
Android Sdk manager not found- Flutter doctor error
Flutter Laravel Push Notification without using any third party like(firebase,onesignal..etc)
How to change the color of ElevatedButton when entering text in TextField

Related

Datepicker within jquery datatables not working
How to enable search for hidden column in datatable?
Jquery DataTable Sorting Numeric value column not working properly
Getting the row ids for the checked checkboxes in jquery dataTable?
Datatables. How to loop through all rows and get id of each tr entry
How to pass extra parameter on AJAX call of jQuery DataTable
how to get the dynamic column header and result from ajax call in jquery datatable
DataTable exporting buttons in AngularJS
Datatables - Responsive not working?
How to get Id value by clicking Edit button on the same row of DataTable