Question

大家好，我是django的新手，如果数据库中添加了一些数据，我将在不刷新页面的情况下刷新数据表，我在页面中添加了一个刷新按钮，并且我调用了ajax函数，并将所有数据添加到了我的页面中数据表中的所有数据都在运行，但按默认行选择10，如果我的数据行是30，则它给我30行

简而言之，如果我要在ajax中创建动态表，则我的数据表不起作用，这是我的html页面，这是实时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>

如果我单击“刷新”按钮，则一切正常，但我的数据表选项不起作用，如何解决此问题，请告诉我

Answer 1

当我使用Datatable时，我总是用此代码对其进行刷新，因此您创建了var table = $('#example').DataTable(); 然后像这样刷新它

table.ajax.reload();

如何使用DataTable在JavaScript中创建动态表

1 个答案: