How to use DataTable for Dynamic table create in javascript

Question

Hello everyone I am new in django and i wnt to refresh the datatable without page refresh if some data added in database i am add a refresh button in my page and i call the ajax function and i am add the all data in my data table everything is runing but by defult row is select 10 and if my data row is 30 then it give me 30 row

in short my datatable is not work if i am create a dynamic table in ajax this is my html page sse this is live http://hp30405.pythonanywhere.com/savedata/

html :

     <form id="myForm" method="POST">

       <input type="submit" value="Refresh">
     </form>


    <table id="example" class="display nowrap" style="width:100%">
            <thead>
                <tr>
                    <th style="text-align:center;">id</th>
                    <th style="text-align:center;">Username</th>
                    <th style="text-align:center;">Password</th>
                    <th style="text-align:center;">Email</th>
                </tr>
            </thead>
            <tbody>
                <tr>

                </tr>
            </tbody>
    </tbody>

        </table>

    <script>
$(document).ready(function() {
    var table = $('#example').DataTable( {
         "order": [[ 0, "desc" ]],
        rowReorder: {
            selector: 'td:nth-child(2)'
        },
        responsive: true,
        bInfo: false,
        "searching": false,
        "paging": true,
        columnDefs: [{ }],

    } );

    } );

    $(document).on('submit','#myForm',function(e){
            e.preventDefault();
            $.ajax({
                type:'POST',
                url: '/refresh/',
                data:{
                    csrfmiddlewaretoken : "{{ csrf_token }}"
                },
                success: function(d){
                    $("#example tbody tr").remove();
                    for (var i = 0; i < d['data'].length; i++){
                    var tableRef = document.getElementById('example').getElementsByTagName('tbody')[0];

                     // Insert a row in the table at row index 0
                    var newRow   = tableRef.insertRow(tableRef.rows.length);

                    // Insert a cell in the row at index 0
                    var newCell1  = newRow.insertCell(0);
                    var newCell2  = newRow.insertCell(1);
                    var newCell3  = newRow.insertCell(2);
                    var newCell4  = newRow.insertCell(3);

                    // Append a text node to the cell
                    var newText1  = document.createTextNode( d['data'][i].id )
                    var newText2  = document.createTextNode( d['data'][i].username )
                    var newText3  = document.createTextNode( d['data'][i].password )
                    var newText4  = document.createTextNode( d['data'][i].email )

                    newCell1.appendChild(newText1);
                    newCell2.appendChild(newText2);
                    newCell3.appendChild(newText3);
                    newCell4.appendChild(newText4);                                }

                },
                error: function(xhr, status, error) {
                    alert(xhr.responseText);
                }
            });
        });

    </script>

if i am click on refresh button everythin is work but my datatable options is not work how to solve this problem please tell me

Answer 1

when I used Datatable i allways refresh it with this code , so you create var table = $('#example').DataTable(); then refresh it like this

table.ajax.reload();