Question

我有一个ajax事件，该事件向我显示了一个表，该表我希望在数据表中显示它，因此使用ajax时，两个ajax调用位于同一页面中，并且该表位于filtre.php中，这是我的代码：

$('#form').on('submit',function(){        
           var date= $('#date').val();
           var fact= $('#fact').val();    
           var matr= $('#matr').val(); 
           var type= $('#type').val(); 
           var dest= $('#dest').val(); 
           $.ajax({    
              url:"filtre.php",
              method:"post",
              data:{date:date,fact:fact,matr:matr,type:type,dest:dest},
              dataType: "html",
              success:function(data)
               {       
                $('#result').html(data);                  
               }
            });  
            return false;
     });


$('#mytable').DataTable({
           responsive: true,
           searching: false,
           aoColumnDefs: [
                {"aTargets": [0], "bSortable": true},
                {"aTargets": [2], "asSorting": ["asc"], "bSortable": true},
            ],
            "language": {
                "url": "//cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/French.json"
            }
    };

Answer 1

在函数内编写数据表触发事件，并在ajax成功内调用该函数。

function myDataTable(){
    $('#mytable').DataTable({
       "responsive": true,
       "searching": false,
       "aoColumnDefs": [
            {"aTargets": [0], "bSortable": true},
            {"aTargets": [2], "asSorting": ["asc"], "bSortable": true},
        ],
        "language": {
            "url": "//cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/French.json"
        }
    });
}


 $('#form').on('submit',function(){        
       var date= $('#date').val();
       var fact= $('#fact').val();    
       var matr= $('#matr').val(); 
       var type= $('#type').val(); 
       var dest= $('#dest').val(); 
       $.ajax({    
          url:"filtre.php",
          method:"post",
          data:{date:date,fact:fact,matr:matr,type:type,dest:dest},
          dataType: "html",
          success:function(data)
           {       
            $('#result').html(data);
            myDataTable();                  
           }
        });  
        return false;
 });

Answer 2

您提供的代码末尾缺少“ ）。见下文；

$('#mytable').DataTable({
           responsive: true,
           searching: false,
           aoColumnDefs: [
                {"aTargets": [0], "bSortable": true},
                {"aTargets": [2], "asSorting": ["asc"], "bSortable": true},
            ],
            "language": {
                "url": "//cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/French.json"
            }
    } /*Here->*/ );

您没有提供有关在何处调用DataTable函数的任何详细信息，但您只需放置构造函数即可

$('#mytable').DataTable();

紧接着

$('#result').html(data);

在您的ajax调用中；假设您的id的{{1}}属性是table，例如mytable。

Answer 3

尝试使用此解决方案，希望对您有所帮助：

 $('#form').on('submit',function(){        
               var date= $('#date').val();
               var fact= $('#fact').val();    
               var matr= $('#matr').val(); 
               var type= $('#type').val(); 
               var dest= $('#dest').val(); 
               $.ajax({    
                  url:"filtre.php",
                  method:"post",
                  data:{date:date,fact:fact,matr:matr,type:type,dest:dest},
                  dataType: "html",
                  success:function(data)
                   {       
                    $('#result').html(data);   
                   $('#mytable').DataTable().destroy(); // destroy datatable if already exist.
                   initDataTable();               
                   }
                });  
                return false;
         });



$(document).ready(function () {
    initDataTable(); // initialize datatable on PageLoad
});
 function initDataTable() {

     $('#mytable').DataTable({
               responsive: true,
               searching: false,
               aoColumnDefs: [
                    {"aTargets": [0], "bSortable": true},
                    {"aTargets": [2], "asSorting": ["asc"], "bSortable": true},
                ],
                "language": {
                    "url": "//cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/French.json"
                }
        };
}

Ajax调用后的Ajax事件

3 个答案: