Reputation: 113
The HTML Code :
<div class="" style='overflow: scroll; overflow-y: hidden;'>
<table id="datatable" class="table table-striped table-bordered">
<thead>
<tr>
<th>ID</th>
<th>Company Name</th>
<th>Customer Type</th>
<th>First Name</th>
<th>Last Name</th>
<th>Mobile1</th>
<th>Action</th>
</tr>
</thead>
<tbody id="table-list-data">
</tbody>
</table>
</div>
The Java Script Code:
$.ajax({
dataType: "json",
type: "POST",
url: 'http://localhost:52235/api/AdminPanel/GetCustomer',
data: data,
async: true,
success: function (data) {
var trHTML = '';
$.each(data.response.customers, function (i, item) {
trHTML += '<tr><td>' + item.customerID + '</td><td>' + item.companyname + '</td><td>' + item.customertypelovid + '</td><td>' + item.firstname + '</td><td>' + item.lastname + '</td><td>' + item.mobile1 + '</td><td>' +
'<a href="#" class="on-default edit-row"><i class="fa fa-pencil"></i>Edit</a><br /> <a href="#dialog" class="on-default remove-row"><i class="fa fa-trash-o"></i>Delete</a>' + '</td></tr>';
});
$('#datatable').append(trHTML);
},
error: function (jqXHR, textStatus, errorThrown) {
}
});
I am Getting like this as output it is displaying the data but it is not binding the data to data-table please help regarding the binding of the data-table.
Upvotes: 0
Views: 380
Reputation: 3491
There are several ways to work with this tool after getting the data from the server:
You can go through each row and populate the table by your self like you do , or you can let datatables do it for you.
I recommend you to follow this datatables tutorial.
I suggest you to follow the tutorial because if you won't you will have to use the datatables api for almost every action.
For example ,your delete action will have to use the row remove api, just deleting the row from the DOM without using the api won't update the table and will cause errors while Sorting/Searching..
This is a demo with your problem And this is WORKING DEMO
*Notice that you first populate your table and only after that convert it to DataTable. For your code, just add after you finished to append the rows to the table:
$('#datatable tbody').append(trHTML);
$('#datatable').DataTable();
Upvotes: 1
Reputation: 6994
Did you try like this..
$.ajax({
dataType: "json",
type: "POST",
url: 'http://localhost:52235/api/AdminPanel/GetCustomer',
data: data,
async: true,
success: function (data) {
var trHTML = '';
$.each(data.response.customers, function (i, item) {
trHTML += '<tr><td>' + item.customerID + '</td><td>' + item.companyname + '</td><td>' + item.customertypelovid + '</td><td>' + item.firstname + '</td><td>' + item.lastname + '</td><td>' + item.mobile1 + '</td><td>' + '<a href="#" class="on-default edit-row"><i class="fa fa-pencil"></i>Edit</a><br /> <a href="#dialog" class="on-default remove-row"><i class="fa fa-trash-o"></i>Delete</a>' + '</td></tr>';
});
$('#table-list-data').html(trHTML);
},
error: function (jqXHR, textStatus, errorThrown) {
}
});
Upvotes: 0
Reputation: 9829
The problem in your code is that you are just appending html rows to an initialized datatable.
You need to tell the control to bind data e.g. coming from your controller.
https://code.msdn.microsoft.com/jQuery-Datatable-With-b4f844e3#content is an example to get you startet.
Give it a try, this should fit your needs.
Upvotes: 0