Why after destroy datatable and empty the reload data but without column name.

Why after destroy datatable and empty the reload data but without column name.

marco.rudello@gmail.commarco.rudello@gmail.com Posts: 12Questions: 4Answers: 0
edited September 2016 in General

Hi,
I need to reload table with new e different column:
I create first datatable:

       var tb = $("#grdScarti").DataTable({
            "ajax": "DATA/employesOBJ.txt",
            "columns": [
            { "data": "name" },
            { "data": "position" },
            { "data": "office" },
            { "data": "extn" },
            { "data": "start_date" },
            { "data": "salary" }]
           });

after I destroy e reload with new data and column:

     $('#Button1').on('click', function () {
            $.getJSON('DATA/customersOBJ.txt', null,function (json) {
                tb.destroy();
                $('#grdScarti').empty(); // empty in case the columns change
                tb = $('#grdScarti').DataTable({
                    columns: json.columns,
                    data: json.data

I look any data but without colomn name. What wrong?

Edited by Allan - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

Answers

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    That looks like it should work to me. Could you link to a test case showing the issue please?

    Allan

  • marco.rudello@gmail.commarco.rudello@gmail.com Posts: 12Questions: 4Answers: 0

    Sorry but this project is'nt on internet. I send you html page and json file. With this you can try it. regards
    {
    "columns": [

      {"data":"name"},
      {"data":"position"},
      {"data":"salary"},
      {"data":"office"},
      {"data":"extn"}
    

    ],
    "data":[
    {
    "name":"Marco Rudello",
    "position":"System Architect",
    "salary":"$320,800",
    "office":"Edinburgh",
    "extn":"5421"
    },
    {
    "name":"Giovanni Chirico",
    "position":"Accountant",
    "salary":"$170,750",
    "office":"Tokyo",
    "extn":"8422"
    },
    {
    "name":"Antonella Preziosi",
    "position":"Junior Technical Author",
    "salary":"$86,000",
    "office":"San Francisco",
    "extn":"1562"
    },
    {
    "name":"Pippo Nucera",
    "position":"System Architect",
    "salary":"$320,800",
    "office":"Edinburgh",
    "extn":"5421"
    },
    {
    "name":"Anselmo Dominic",
    "position":"Accountant",
    "salary":"$170,750",
    "office":"Tokyo",
    "extn":"8422"
    },
    {
    "name":"laura Capua",
    "position":"Junior Technical Author",
    "salary":"$86,000",
    "office":"San Francisco",
    "extn":"1562"
    },
    {
    "name":"Alessandro Barilla",
    "position":"Customer Support",
    "salary":"$112,000",
    "office":"New York",
    "extn":"4226"
    }
    ]
    }

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <title>SCTR - Estrazione Scarti </title>
    <!-- script jquery-->
    <script src="js/jquery-2.2.3.min.js"></script>
    <script src="scripts/bootstrap.min.js"></script>
    <script src="media/js/jquery.dataTables.min.js"></script>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="media/css/jquery.dataTables.min.css" rel="stylesheet">

    <!-- Bootstrap -->
    <!-- Fav and touch icons -->
    <!-- <link rel="apple-touch-icon-precomposed" href="images/fav-57.png">-->
    <!--<link rel="shortcut icon" href="images/fav.png">-->
    </head>
    <body ><input id="Button1" type="button" value="button" />
    <table width="100%" class="display" id="grdScarti">
    <thead>
    <tr>
    <!--<th>Name</th>
    <th>Position</th>
    <th>Office</th>
    <th>Extn.</th>
    <th>Start date</th>
    <th>Salary</th>-->
    </tr>
    </thead>
    <tfoot>
    <tr>
    <!--<th>Name</th>
    <th>Position</th>
    <th>Office</th>
    <th>Extn.</th>
    <th>Start date</th>
    <th>Salary</th>-->
    </tr>
    </tfoot>
    </table>
    <!-- Footer Ends -->
    <!-- Template JS Files -->
    <script>
    $('#Button1').on('click', function () {
    $.getJSON('DATA/customersOBJ.txt', null,function (json) {
    tb.destroy();
    $('#grdScarti').empty(); // empty in case the columns change
    tb = $('#grdScarti').DataTable({
    columns: json.columns,
    data: json.data
    });
    });
    });
    var tb = $("#grdScarti").DataTable({
    "ajax": "DATA/employesOBJ.txt",
    "columns": [
    { "data": "name" },
    { "data": "position" },
    { "data": "office" },
    { "data": "extn" },
    { "data": "start_date" },
    { "data": "salary" }]
    });
    function test(){
    tb.ajax.url("DATA/employes.txt");
    tb.ajax.reload();
    }
    </script>
    </body>
    </html>

  • marco.rudello@gmail.commarco.rudello@gmail.com Posts: 12Questions: 4Answers: 0

    If possible to answer a this problem?
    thanks

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    I would need a link to a page showing the issue.

    Information on how to create a test page, if you can't provide a link to your own page can be found here.

    Thanks,
    Allan

This discussion has been closed.