8

我需要完全改变数据表的内容，从 javascript 的角度来做。没有任何 Ajax 调用，或者我读过很多次。实际上使以下脚本工作并切换表格的内容就可以了。

我以为我可以使用：

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

但它不起作用。

我得到：

    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

这是一个示例脚本：

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

2 回答 2

6

我猜想添加jQuery('#example').dataTable().fnDestroy(); 会做要求的事情

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();
    }
}
于 2013-07-10T16:48:47.930 回答
6

这是一个完整的工作答案，如果它可以帮助任何人：

<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>
于 2013-07-12T08:19:09.530 回答