How create datatables dynamically on button click

Question

I want to create jquery Datatables onclick of button a function will be called and inside function ajax will get data from database. I am passing certain data to server on click via url parameter.

Below is my ajax call on button click.

$(document).ready(function() {
$('#example').DataTable();

}

function loadData() {

var strUrl = "batch.jsp?patientname=" + patientname
+ "&dobstart=" + dobstart + "&dobend=" + dobend
+ "&startage=" + startage + "&endage=" + endage
+ "&location=" + location + "&account="
+ account;


$.ajax({
url : strUrl,
type : "POST",
dataType: 'json',
success : function(data) {
    formdata += "<table id='patientdata' class='display' cellspacing='0' width='100%'>"
                                        +"<thead>"
                    +"<tr>"
                    +"<th>ID</th>"
                    +"<th>Name</th>"
                    +"<th>Date of Birth</th>"
                    +"<th>Location</th>"
                    +"<th>Email Address</th>"
                    +"</tr>"
                    +"</thead>"
                    +"<tbody>";

$.each(data.patientdata, function(index, item) {
    formdata += "<tr>"
            +"<td>"+item.uid+"</td>"
            +"<td>"+item.name+"</td>"
            +"<td>"+item.dob+"</td>"
            +"<td>"+item.location+"</td>"
            +"<td>"+item.email+"</td>"
            +"</tr>";

  });                   

formdata += "</tbody></table>";
$("#ptdata").html(formdata); // div in html
$('#exampledata').dataTable(); 

},
error : function(thrownError) {
    alert("Error in ajax post call "+thrownError);
}

}); }

I found one code but here server is called on load in document ready but I want to call it during onclick of button.

Below code which makes a call to server on load

// POST data to server
$(document).ready( function() {
$('#example').dataTable( {
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "xhr.php",
"fnServerData": function ( sSource, aoData, fnCallback, oSettings ) {
  oSettings.jqXHR = $.ajax( {
    "dataType": 'json',
    "type": "POST",
    "url": sSource,
    "data": aoData,
    "success": fnCallback
  } );
}
} );
} );

Initialize the dataTable after you create the table. I suspect that if your table isn't being created then it is because when you initialize the table it can't find it — thedevlpr
– thedevlpr, Commented Jul 22, 2014 at 16:13
@Rafa, you mean to say I should write this $('#example').DataTable(); code in loadData function after $("</tbody></table>").appendTo("#ptdata"); this line. — pise
– pise, Commented Jul 22, 2014 at 16:16
yes I believe that it should be done that way. When the document is ready it will run $('#example').DataTable(); but since this is a dynamic table it hasn't been created yet therefore there is nothing to initialize. — thedevlpr
– thedevlpr, Commented Jul 22, 2014 at 16:22
@Rafa I made few changes in code created one var formdata and appended the value and initialized $('#example').DataTable() in my onclick button function after table creation as you told and it worked for me. But there are few things which I need to do, like pagination I will do that. Thank You — pise
– pise, Commented Jul 22, 2014 at 16:33
Glad I could help out I'll post a summarized answer you can choose as the answer to this question. The great thing about the dataTables plugin is that pagination is made easy just take a look at the Options section here datatables.net/reference/option and define them when you are initializing the tables. — thedevlpr
– thedevlpr, Commented Jul 22, 2014 at 16:42

thedevlpr · Accepted Answer · 2014-07-22 16:39:20Z

1

Since you are creating the tables dynamically you need to initialize them after you create them. Some rough examples of this behavior can be seen here where the tables are initialized in the $(document).ready seen here http://jsfiddle.net/SAXRd/1/ compared to your onclick function seen here http://jsfiddle.net/SAXRd/2/. Also remember to give unique IDs for the tables or give them a common class so they can all be initialized properly.

answered Jul 22, 2014 at 16:39

thedevlpr

1,11112 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How create datatables dynamically on button 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