load data when button is click

Question

I want to load data when button is click but I am having problem it will not load.

$("#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.

Share error in your console and please remove single quote from your ajax call data parameter at last. — Andi AR
– Andi AR, Commented Sep 20, 2015 at 6:39
data:$('#form1').serialize()', has a rogue single quote in it. — Derek
– Derek, Commented Sep 20, 2015 at 7:50

Dave · Accepted Answer · 2015-09-20 12:13:54Z

Added code in this jsfiddle. Clicking on Load data button will add json response to datatable. Hope it helps you to move forward.

Check code in action here jsfiddle

$(document).ready(function () { 

    $("#load").on("click", function () {
       loader()
    });

    function loader() { 
        $.ajax({
          type: 'POST',
          dataType: 'json',
          url: '/echo/json/',
          data : { json: JSON.stringify( jsonData ) },
          success: function(data) {
              console.log(data.counters);
              var table = $('#example').DataTable();
              table.clear().draw();
              table.rows.add(data.counters).draw();

          }  
        }); 
    } 

   Table = $('#example').dataTable({
        "data": [],
            "columns": [{
            "title": "id",'data': 'id'
        }, {
            "title": "name",'data': 'name'
        } , {
            "title": "age",'data': 'age'
        } 

        ]
    });

});



var jsonData = {
"success": true,
"counters": [
    {
        "id": "1",
        "name": "Akhil",
        "age": "22"
    },
    {
        "id": "2",
        "name": "Dave",
        "age": "33"
    },
    {
        "id": "3",
        "name": "Chitrank",
        "age": "24"   
    } 

    ]
}

Collectives™ on Stack Overflow

load data when button is click

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related