Jquery Datatable 1.10 : looses Sorting and styling when page refreshed

krn1231

I am refreshing the table for every 5 seconds

For the first time the table display and sorting is fine , but When the page is refreshed the table is being shown without any css and without any sorted order

This data i am computing it locally before the display so can't AJAX reload for my case

This is my fiddle link

http://jsfiddle.net/ehtmv1g1/1/

 <table  id="kiran">
         <thead>
            <tr>
               <th class="hidden-480">Name</th>
               <th class="hidden-480">Price</th>
            </tr>
         </thead>
         <tbody>
         </tbody>
      </table>

And my js code

$(function()
{
    displayData();
    var table = $('#kiran').dataTable(
    {
        "order": [
            [1, "desc"]
        ],
        "paging": false,
        "bDestroy": true,
        "sDom": 't<"bottom"filp><"clear">'
    });
    var refreshIntervalId = setInterval(displayData, 2000);
})

function displayData()
{
  var json = [
  {
    "Name": "ONE",
    "Price": "12"
  },
  {
    "Name": "TWO",
    "Price": "100"
  },
  {
    "Name": "THREE",
    "Price": "42"
  }]
  $("#kiran > tbody").html("");
  for (var i = 0; i < json.length; i++)
  {
    var name = json[i].Name;
    var price = json[i].Price;
    $('<tr>').append($("<td width='20%''>").text(name), $("<td  width='25%'>").text(price)).appendTo('#kiran');
  }
}

allan

but When the page is refreshed the table is being shown without any css and without any sorted order

Sounds like a Javascript error is occurring. What does the console in your browser say?

We would need a link to a test page showing the issue to offer any help further to that since it is impossible to say what is wrong at the moment though.

Allan