How to clear datatable when created dynamically using ajax?

Question

For the first time when i insert data into table it get inserted into datatable tbody. next time when i change data tbody get appened with datatable tbody. I want to remove tbody of datatable for my code to work.

 <table frame="hsides" id="table">
        <thead>
            <tr>
                <th>Rules</th>
            </tr>
     </thead>
 </table>


$.ajax({url: '../controllers/manage_rule_controller.php',

    type: 'POST',
    data: { "operation": "get_rule"},
    dataType:"json",
        },

         success: function (data) {
         keys = Object.keys(data);
         var table = document.getElementById("table");
         $("#table").find("tr:not(:first)").remove();
         var tBody = document.createElement("tbody");
         table.appendChild(tBody);

        for(i=0;i<keys.length;i++)
        {
            var row = tBody.insertRow(i);
            var cell1 = row.insertCell(0);
            cell1.innerHTML = "<div class='col-md-12 col-sm-12 col-xs-12 testdiv' id='fullrule"+keys[i]+"'><div style='border-bottom:1px solid #f2f2f2' class='col-md-10 col-sm-10 col-xs-8'  id='rule"+keys[i]+"' onclick='updaterule(this)'>"+data[keys[i]]+" </div></div>"

        } var dataTable = $('#table').DataTable();  
    }, 
  });

Try adding tBody.html("");before the for loop

Stephan Sutter
– Stephan Sutter

2016-07-19 10:43:13 +00:00
Commented Jul 19, 2016 at 10:43 — Stephan Sutter
– Stephan Sutter, Commented Jul 19, 2016 at 10:43
No it is not working

ParminderBrar
– ParminderBrar

2016-07-19 10:55:08 +00:00
Commented Jul 19, 2016 at 10:55 — ParminderBrar
– ParminderBrar, Commented Jul 19, 2016 at 10:55

Lucky · Accepted Answer · 2016-07-19 11:16:18Z

1

Before calling your ajax and redrawing your datatable,

var dataTable = $('#table').DataTable();
dataTable.rows().remove().draw();

answered Jul 19, 2016 at 11:16

Lucky

17.4k20 gold badges121 silver badges156 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mayank Pandeyz · Accepted Answer · 2016-07-19 11:12:00Z

0

its because of you are using table.appendChild(tBody), this will append not over write the newly generated html each time. So try to use html() or clear old html before appending new one.

answered Jul 19, 2016 at 11:12

Mayank Pandeyz

26.3k4 gold badges43 silver badges61 bronze badges

Collectives™ on Stack Overflow

How to clear datatable when created dynamically using ajax?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related