2

http://www.datatables.net/releases/DataTables-1.9.3.zip

I am trying to use the above plugin. I call function paging() at onload and it works fine

<body id="dt_example" onload='paging()'>

But when i reload the table's innerHTML with the same data (static data that I had in my table) on a button click as (example is id of mytable)

<input type ='button' value='click To reload Table contents' onclick='remake()'/>

function remake() 
{
    var ht='<thead><tr><th>dfsdd</th><th>Browser</th></tr></thead>';
    ht = ht + '<tbody>';
    ht = ht + '<tr><td> shjhds</td><td></td></tr>';
    ht = ht + '<tr><td>dsdsd</td><td>xsax</td></tr>';
    ht = ht + '<tr><td>dasdd</td><td>bdsffa</td></tr>';
    ht = ht + '<tr><td>fsdfsd</td><td></td></tr>';
    ht = ht + '<tr><td>kghfagh</td><td>xzxz</td></tr>';
    ht = ht + '<tr><td></td><td>kghfagh</td></tr>';
    ht = ht + '<tr><td>rgsg</td><td>bnfjf</td></tr>';
    ht = ht + '<tr><td></td><td>fsdfs</td></tr>';
    ht = ht + '</tbody>';

    $("#example").html(ht);
    paging();
 }

 function paging()
 {
     $('#example').dataTable();
 }

Nothing works after dynamically changing the contents of a table neither sorting nor pagination

datatables.net have clearly guided to use $('#example').dataTable(); still I am not getting it working when I load contents dynamically. I need to know what I am doing wrong?

Optional to view (My Complete Code)

<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        
        <title>DataTables example</title>
        <style type="text/css" title="currentStyle">
            @import "css/demo_page.css";
            @import "css/demo_table.css";
        </style>
        <script type="text/javascript" language="javascript" src="js/jquery.js">
</script>
<script type="text/javascript" language="javascript" src="js/jquery.dataTables.js">
</script>

<script type="text/javascript" charset="utf-8">
function paging()
{
    $('#example').dataTable();
}

 function remake()
 {
    var ht='<thead><tr><th>dfsdd</th><th>Browser</th></tr></thead>';
    ht = ht + '<tr><td> shjhds</td><td></td></tr>';
    ht = ht + '<tr><td>dsdsd</td><td>xsax</td></tr>';
    ht = ht + '<tr><td>dasdd</td><td>bdsffa</td></tr>';
    ht = ht + '<tr><td>fsdfsd</td><td></td></tr>';
    ht = ht + '<tr><td>kghfagh</td><td>xzxz</td></tr>';
    ht = ht + '<tr><td></td><td>kghfagh</td></tr>';
    ht = ht + '<tr><td>rgsg</td><td>bnfjf</td></tr>';
    ht = ht + '<tr><td></td><td>fsdfs</td></tr>';
    ht = ht + '</tbody>';
    $("#example").html(ht);
    paging();
    }
</script>
</head>

<body id="dt_example" onload='paging()'>
    <div id="container">
    <input type ='button' value='click To reload Table contents' onclick='remake()' />
            <div id="demo">
            <table cellpadding="0" cellspacing="0" border="5" class="display" id="example" width="100%">
                <thead>
                    <tr>
                        <th>dfsdd</th>
                        <th>Browser</th>
                    </tr>
                </thead>
                <tbody>
                    <tr><td> shjhds</td><td></td></tr>
                    <tr><td>dsdsd</td><td>xsax</td></tr>
                    <tr><td>dasdd</td><td>bdsffa</td></tr>
                    <tr><td>fsdfsd</td><td></td></tr>
                    <tr><td>kghfagh</td><td>xzxz</td></tr>
                    <tr><td></td><td>kghfagh</td></tr>
                    <tr><td>rgsg</td><td>bnfjf</td></tr>
                    <tr><td></td><td>fsdfs</td></tr>
                    <tr><td>dfsas</td><td>caadada</td></tr>
                </tbody>
            </table>
            </div>
            </div>
    </body>
</html>
Sami
  • 8,168
  • 9
  • 66
  • 99
  • can you show how you call $("#example").html do you call it onload onclick – COLD TOLD Sep 12 '12 at 18:36
  • @COLDTOLD. I have updated...I missed tbody once but now added that too. Its all my code. The css and js classes are as it is downloaded and all working fine before reloading table contents – Sami Sep 12 '12 at 19:01

3 Answers3

2

A quick look at the API shows that you can destroy/remake the table or manipulate it. I'll just show you the destroy and remake method. But you can use javascript to remove/clear the table and add new rows to the table without directly editing the DOM.

var myTable;
function paging() {
    myTable = $('#example').dataTable();
}
function remake() {
myTable.fnDestroy();
var ht='<thead><tr><th>dfsdd</th><th>Browser</th></tr></thead>';
ht = ht + '<tr><td> shjhds</td><td></td></tr>';
ht = ht + '<tr><td>dsdsd</td><td>xsax</td></tr>';
ht = ht + '<tr><td>dasdd</td><td>bdsffa</td></tr>';
ht = ht + '<tr><td>fsdfsd</td><td></td></tr>';
ht = ht + '<tr><td>kghfagh</td><td>xzxz</td></tr>';
ht = ht + '<tr><td></td><td>kghfagh</td></tr>';
ht = ht + '<tr><td>rgsg</td><td>bnfjf</td></tr>';
ht = ht + '<tr><td></td><td>fsdfs</td></tr>';
ht = ht + '</tbody>';
$("#example").html(ht);
paging();
}
Daniel Moses
  • 5,872
  • 26
  • 39
  • Yes it did some work but not required. As it is not working lead me to see a new message "no data found in the table" but i have filled data also I am getting the html(text) of head and body's cells in alert :( – Sami Sep 12 '12 at 21:45
  • No i made a mistake. I am fixing it. Hoping for the better result. Thanks for kind reply. I test and update – Sami Sep 12 '12 at 21:53
  • @Sami I'm sorry but I don't understand your question. – Daniel Moses Sep 13 '12 at 00:46
  • 1
    It was fine. I just don't usually upvote unless it is an interesting question to me. – Daniel Moses Sep 13 '12 at 16:22
0

instead of making paging a separate functions just use in your remake function

 function remake() {
    var ht='<thead><tr><th>dfsdd</th><th>Browser</th></tr></thead>';
    ht = ht + '<tr><td> shjhds</td><td></td></tr>';
    ht = ht + '<tr><td>dsdsd</td><td>xsax</td></tr>';
    ht = ht + '<tr><td>dasdd</td><td>bdsffa</td></tr>';
    ht = ht + '<tr><td>fsdfsd</td><td></td></tr>';
    ht = ht + '<tr><td>kghfagh</td><td>xzxz</td></tr>';
    ht = ht + '<tr><td></td><td>kghfagh</td></tr>';
    ht = ht + '<tr><td>rgsg</td><td>bnfjf</td></tr>';
    ht = ht + '<tr><td></td><td>fsdfs</td></tr>';
    ht = ht + '</tbody>';
    $("#example").html(ht);
    $('#example').dataTable();
    }

COLD TOLD
  • 13,513
  • 3
  • 35
  • 52
0

Make your life easier. Just reload the whole table instead of thead and tbody and then use

$('#demo').html(tableHtml); //Demo is id container of your table
$('#example').dataTable();//example is id of table

And tableHtml be like 

vr tableHtml ='';
function remake() {
var ht = '<table id="example">';
ht = ht + '<thead><tr><th>dfsdd</th><th>Browser</th></tr></thead>';
ht = ht + '<tr><td> shjhds</td><td></td></tr>';
ht = ht + '<tr><td>dsdsd</td><td>xsax</td></tr>';
ht = ht + '<tr><td>dasdd</td><td>bdsffa</td></tr>';
ht = ht + '<tr><td>fsdfsd</td><td></td></tr>';
ht = ht + '<tr><td>kghfagh</td><td>xzxz</td></tr>';
ht = ht + '<tr><td></td><td>kghfagh</td></tr>';
ht = ht + '<tr><td>rgsg</td><td>bnfjf</td></tr>';
ht = ht + '<tr><td></td><td>fsdfs</td></tr>';
ht = ht + '</tbody>';
ht = ht + '</table>';
tableHtml = ht;
$("#demo").html(tableHtml);
$('#example').dataTable();
}
Sami
  • 8,168
  • 9
  • 66
  • 99