如何将 ajax 与数据表一起使用，django

Question

我正在尝试使用 ajax 获取数据，并将数据显示到 datatable 显示数据工作正常，但是当我尝试搜索或对数据表进行某种排序时，它丢失了数据，需要重新加载又翻页了？！

class MainGroup(models.Model):
    admin = models.ForeignKey(User,on_delete=models.CASCADE)
    main_type = models.CharField(max_length=40,unique=True)
    date = models.DateTimeField(auto_now_add=True)

我的意见.py

def list_maingroup(request):
    lists = MainGroup.objects.all().order_by('-pk')
    data = []
    for obj in lists:
       item = {
          'id':obj.id,
          'admin':obj.admin.username,
          'main_type':obj.main_type,
          'date':obj.date
          }
      data.append(item)
return JsonResponse({'data':data})

我的模板

    const form = document.getElementById('main_form')
    form.addEventListener("submit",submitHandler);

    function submitHandler(e) {
        e.preventDefault();
        $.ajax({
            type: 'POST',
            url: '{% url 'products:maingroup' %}',
            data : $('#main_form').serialize(),
            dataType: 'json', 
            success: successFunction,
        });
    }
    function successFunction(data) {
        if (data.success) {
            form.reset();

            alertify.success("added")          
        }
        else if(data.error_code=='invalid'){
            for(var key in data.error_msg){
                if(key == 'main_type'){
                    document.getElementById('main_error').removeAttribute('hidden')
                    document.getElementById('main_error').innerHTML = data.error_msg[key][0]

                }


            }
        }
    }
    
   
$.ajax({
    type:'GET',
    url:'{% url 'products:list-maingroup' %}',

    success:function(response){
    console.log(response)
    data = response.data
    var k = '<tbody>'
    for(i = 0;i < data.length; i++){
                  k+= '<tr>';
                  k+= '<td>' + data[i]['id'] + '</td>';
                  k+= '<td>' + data[i]["admin"] + '</td>';
                  k+= '<td>' + data[i]["main_type"] + '</td>';
                  k+= '<td>' + data[i]["date"] + '</td>';
                  k+= '</tr>'
    }
    k+='</tbody>'
              
    document.getElementById('tableData').innerHTML = k                 
    }
 })    

<div class="col-md-12">
    <!-- general form elements -->
    <div class="card card-info">
      <div class="card-header">
        <div class="card-tools">
            <button type="button" class="btn btn-tool" data-toggle="collapse" data-target="#main_form" aria-expanded="false" aria-controls="main_form">
              <i class="fas fa-minus"></i>
            </button>
        </div>
        <h3 class="text-center">main</h3>

      </div>
      <form id="main_form" role="form" method="POST">{% csrf_token %}
        <div class="card-body">
            <div class="form-group row">
                <label for="mainGroup" class="col-sm-2 control-label">name</label>
                <div class="col-sm-10">
                  {{form.main_type | attr:'id:mainGroup'}}
                  <p id="main_error" class="alert alert-danger" aria-disabled="true" hidden></p>
                </div>
              </div>
        </div>
        <!-- /.card-body -->
        <div class="card-footer">
            <button type="submit" class="btn btn-success">زیادکردن</button>
          </div>
      </form>
      
    </div>
  </div>

  <div class="col-md-12">
    <div class="card">
      <div class="card-header">
        <h3 class="text-center">infomations</h3>
      </div>
      <!-- /.card-header -->
      <div class="card-body table-responsive">
        <table id="maingroupid" class="table table-bordered table-striped text-center">
        <thead>              
          <tr>
            <th>#</th>
            <th>admin</th>
            <th>name</th>
            <th>date</th>
          </tr>
          </thead>
          <tbody id="tableData">

          </tbody>

          </tfoot>
        </table>
      </div>
      <!-- /.card-body -->
    </div>
    <!-- /.card -->
  </div>

  <script>
  $('#maingroupid').dataTable({})
  </script>

我也试过这个来序列化我的数据

def list_maingroup(request):
   lists = MainGroup.objects.all().order_by('-pk')
   list_serializers = serializers.serialize('json',lists)
   return HttpResponse(list_serializers,content_type='application/json')

使用这个 ajax 请求

      $.ajax({
        type:'GET',
        url:'{% url 'products:list-maingroup' %}',

        success:function(data){
          console.log(data)
          console.log(data)
          var k = '<tbody>'
          for(i = 0;i < data.length; i++){
            const date = new Date(data[i]["fields"]["date"]).toLocaleString();
              k+= '<tr>';
              k+= '<td>' + data[i]['fields']['id'] + '</td>';
              k+= '<td>' + data[i]['fields']["admin"] + '</td>';
              k+= '<td>' + data[i]['fields']["main_type"] + '</td>';
              k+= '<td>' + date + '</td>';
              k+= '</tr>'
        }
        k+='</tbody>'
          
        document.getElementById('tableData').innerHTML = k                 
        }
      })

但仍然在使用数据表搜索和排序过程中丢失了现有数据，需要重新加载页面才能再次显示！请问我做错了什么？！

Answer 1

对于那些遇到这个问题的人，我只是将 $('#maingroupid').dataTable({}) 移到了 ajax 调用函数，它工作正常 谢谢