load data to datatables when button is click

jemz

Hi @allan,

Need some help, I'm trying to load my data requested via ajax when button is click, but the code I have now is not working.

     $("#search").on('click',function(e){
               $.ajax({
               type:'post',
               dataType:'json',
               url:'tosearch.php',
               data:$('#form1').serialize()',
               success:function(data){
                
                   table1.clear().draw();
                   table1.rows.add(data).draw();

               }

           });
 
     });


           $('#form1').DataTable( {
            "scrollCollapse": true,
            "deferRender": true,
            "responsive": true,
            "retrieve": true,
            "columns": [

                { "data":"id"},
                { "data": "name"},
                { "data": "age" }
           


            ]


        });

        var table1= $('#form1').DataTable();

Thank you in advance

ThomD

Does the data load from the ajax call when you just load it directly without relying on the onClick?

I'm pretty sure this line is putting the cart before the horse:

  data:$('#form1').serialize()',

You are telling DT to get the data from the #form1, but nowhere do you tell anything to put the data into #form1.

You need the .refresh() call to get DT to swap the new data in. Search on that term for some discussions on it.