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>' +
'<i class="fa fa-pencil"></i>Edit<br /> <i class="fa fa-trash-o"></i>Delete' + '</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.
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();
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.
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>' + '<i class="fa fa-pencil"></i>Edit<br /> <i class="fa fa-trash-o"></i>Delete' + '</td></tr>';
});
$('#table-list-data').html(trHTML);
},
error: function (jqXHR, textStatus, errorThrown) {
}
});
Related
I would like to have the database table id on each row as checkbox value of a dynamic html table
I am using ajax to fetch data from mysql database and create a new variable as html text to append on tbody of table
Code of HTML
<div class="col-sm-6" id="ftbl">
<label for="urbandata">View urban data</label>
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>Check</th>
<th>ID</th>
<th>Type</th>
<th>Master</th>
<th>Slave</th>
<th>Orbit</th>
<th>Mode</th>
<th>Action</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
Code of JS
$.ajax({
url: "fetchurban.php",
method: "POST",
data:{id:id},
dataType: "JSON",
success: function(data){
if (data){
var trHTML = '';
$.each(data, function (i, item) {
trHTML +='<tr><td><input type="checkbox" id="checkview" onclick="QuickView()" name="'+ item.TblID +'"></td><td>' + item.Type + '</td><td>' + item.Master + '</td><td>' + item.Slave + '</td><td>' + item.Orbit + '</td><td>' + item.Mode + '</td><td><span class="glyphicon glyphicon-download"> </span><span class="glyphicon glyphicon-cloud-download"></span></td></tr>' ;
});
$('#ftbl tbody').append(trHTML);
}
}
})
})
If the user select the checkbox I would like to have the id of database table.
Now with this code I have the same id to all rows of table
You could set the identifier as a data- element of the input:
function QuickView(element) {
var rowId = $(element).data('id');
// here comes the rest of your code.
}
$.ajax({
url: "fetchurban.php",
method: "POST",
data:{id:id},
dataType: "JSON",
success: function(data){
if (data){
var trHTML = '';
$.each(data, function (i, item) {
trHTML +='<tr><td><input type="checkbox" data-id="'+ item.TblID +'" onclick="QuickView(this)"></td><td>' + item.Type + '</td><td>' + item.Master + '</td><td>' + item.Slave + '</td><td>' + item.Orbit + '</td><td>' + item.Mode + '</td><td><span class="glyphicon glyphicon-download"> </span><span class="glyphicon glyphicon-cloud-download"></span></td></tr>' ;
});
$('#ftbl tbody').append(trHTML);
}
}
})
})
Here's a demo of the above.
EDIT:
I removed the initial sentence regarding not being allowed to use an integer for the ID attribute as it is no longer valid as Quentin pointed out in the comments. It's sometimes hard to forget what you once learned.
I'm using Ajax for Crud operations in laravel 5.6 and I want to reload my table after insertion of data into the table.
This is how my table looks like without data:
After insertion, table looks like this:
Even after the data is added, when i search it doesn't consider the newly appended data in the table so my search result remains - no data available in the table.
The site.js
$(".complete-table").each(function(){
$(this).DataTable( {
dom: 'Bfrtip',
buttons: [
// 'copyHtml5',
// 'excelHtml5',
// 'csvHtml5',
// 'pdfHtml5'
]
} );
});
I tried a couple of things but it didn't work for me.
The HTML for the table
<table id="asset-{{ $asset_receive->asset_received_id }}" class="complete-table table toggle-circle table-hover" data-page-size="15">
<thead>
<tr>
<th> Tag ID</th>
<th> Asset Category </th>
<th> Manufacturer</th>
<th> Serial Number </th>
<th> Model Number </th>
<th> Colour</th>
</tr>
</thead>
<tbody id="asset-table-{{ $asset_receive->asset_received_id }}">
#foreach($assets->where('asset_received_id', '=', $asset_receive->asset_received_id) as $asset)
<tr>
<td>{{ $asset->tag_id}}</td>
<td>{{ $asset->asset_categories['category']}}</td>
<td>{{ $asset->manufacturers['manufacturer']}}</td>
<td>{{ $asset->serial_number}}</td>
<td>{{ $asset->model_number}}</td>
<td>{{$asset->colour}}</td>
</tr>
#endforeach
</tbody>
Here is my Js function for the adding data into the table.
$(document).on('click', 'button.submit-asset-received', function() {
assetReceivedId = $(this).data('asset-received-id');
assetFormId = 'form#form-assets-record-' + assetReceivedId;
$('.error').addClass('hidden');
$.ajax({
type: 'post',
url: '/addAsset',
indexForm: assetFormId,
indexValue: $(assetFormId + ' input[name=asset_a_category_name]').val(),
indexManufacturer: $(assetFormId + ' select[name=a_manufacturer_id] option:selected').text(),
data: {
'_token': $(assetFormId + ' input[name=_token]').val(),
'tag_id': $(assetFormId + ' input[name=tag_id]').val(),
'asset_category_id': $(assetFormId + ' input[name=asset_a_category_id]').val(),
'manufacturer_id': $(assetFormId + ' select[name=a_manufacturer_id] option:selected').val(),
'serial_number': $(assetFormId + ' input[name=serial_number]').val(),
'model_number': $(assetFormId + ' input[name=model_number]').val(),
'colour': $(assetFormId + ' input[name=colour]').val(),
'asset_received_id': assetReceivedId,
},
success: function(data) {
if((data.errors)){
var errors = data.errors;
$.each(errors, function (key, value) {
$('input[name=' + key + ']').next('p').removeClass('hidden');
$('input[name=' + key + ']').next('p').text(value);
if(key === 'manufacturer_id'){
$('select[name=a_manufacturer_id]').next('p').removeClass('hidden');
$('select[name=a_manufacturer_id]').next('p').text(value);
}
});
}else{
$('#asset-table-'+data.assets.asset_received_id).append("<tr>"+
// "<td>" + data.asset_category_id + "</td>"+
"<td>" + data.assets.tag_id + "</td>"+
"<td>" + this.indexValue + "</td>"+
"<td>" + this.indexManufacturer +"</td>"+
"<td>" + data.assets.serial_number + "</td>"+
"<td>" + data.assets.model_number + "</td>"+
"<td>" + data.assets.colour + "</td>"+
"</tr>");
var aTable = $('#asset-'+data.assets.asset_received_id).parent('table').dataTable();
aTable.ajax.reload();
$('#unassigned').html(data.view_1);
if(data.asset_received.qty_received != data.asset_received.qty_recorded){
$("form#form-assets-record-" + data.assets.asset_received_id).show();
}else{
$("form#form-assets-record-" + data.assets.asset_received_id).hide();
}
//increase quantity recorded of this asset by taking current value and increasing by one
var currentRecordedQuantity = parseInt($("td#qty_recorded_"+data.assets.asset_received_id).text());
console.log(currentRecordedQuantity);
$("td#qty_recorded_"+data.assets.asset_received_id).text(currentRecordedQuantity+1);
$('input[name=tag_id]').val('');
$('select[name=a_manufacturer_id]').val('');
$('input[name=serial_number]').val('');
$('input[name=model_number]').val('');
$('input[name=colour]').val('');
}
}
});
});
I tried using two different ways(in the js function for adding the asset) to solve the problem but they both failed and i don't know whether i did it wrongly.
First method
var aTable = $('#asset-table-'+data.assets.asset_received_id).parent('table').dataTable();
aTable.ajax().reload();
Second method
var aTable = $('#asset-table-'+data.assets.asset_received_id).parent('table').dataTable();
aTable.fnDraw();
is there a better way of reloading the table to notice any newly added data?
Any suggestions will be welcomed, thanks in advance.
I think you are looking for .draw()
https://datatables.net/reference/api/draw()
In success of your ajax call, simply do:
var table = $('.complete-table').DataTable();
table.draw();
There is method called
var table = $('.complete-table').DataTable();
table.ajax.reload();
Ok you first to tell your ajax request what you will receive so
$.ajax({
type: 'post',
url: '/addAsset',
indexForm: assetFormId,
dataType:'html',
now your return will be in separated blade file
in your controller will return
return view('table',compact('data_that_you_fetched_form'));
now in your table.blade file add the html
#foreach($data_that_you_fetched_form as $asset)
<tr>
<td>{{ $asset->tag_id}}</td>
<td>{{ $asset->asset_categories['category']}}</td>
<td>{{ $asset->manufacturers['manufacturer']}}</td>
<td>{{ $asset->serial_number}}</td>
<td>{{ $asset->model_number}}</td>
<td>{{$asset->colour}}</td>
</tr>
#endforeach
and finally add it to your table
success: function(data) {
$(asset-table-'{{ $asset_receive->asset_received_id }}').html(data);
}
I think that will work fine and clean and easy to modify
I'm having trouble outputting a JSON to a HTML table within my tab (for part of a javascript/jQuery evening course assignment).
Please could someone have a look, and advise what sort of amendments I would have to make to output in a table format?
I get the success alert, but the table doesn't populate.
Thanks.
// Tabs
$(function() {
$( "#tabs" ).tabs();
});
// Spanish
$(document).ready(function(){
$.ajax({
url: "http://learn.cf.ac.uk/webstudent/sem5tl/javascript/assignments/spanish.php", // path to file
dataType: 'jsonp',
jsonp: 'callback',
jsonpCallback: 'jsonpCallback',
success: function () {
alert('success');
}
});
});
function drawTable(data) {
for (var i = 0; i < data.length; i++) {
drawRow(data[i]);
}
}
function drawRow(rowData) {
var row = $("<tr />")
$("#table").append(row);
row.append($("<td>" + rowData.course + "</td>"));
row.append($("<td>" + rowData.name + "</td>"));
row.append($("<td>" + rowData.price + "</td>"));
}
And the HTML:
<div id="tabs">
<ol start="50">
<li>
Italian
</li>
<li>
Spanish
</li>
</ol>
<p id="tab-1"></p>
<p id="tab-2">
<table id='table'>
<thead>
<tr>
<th>Course</th>
<th>Name</th>
<th>Price</th>
</tr>
</thead>
<tbody></tbody>
</table>
</p>
<p id="tab-3"></p>
</div>
The main issue with your code was that you didn't call any function after the AJAX request completed successfully. You needed at least call drawTable() to populate the data.
However there are several improvements you can make to your code. Firstly, remove jsonp: 'callback'. It's the default value, and also redundant as you're supplying jsonpCallback. You can also then change jsonpCallback to 'drawTable'. This negates the need for the success handler function and means all the request data will be directly provided to your drawTable() function. Lastly, rather than creating DOM elements in memory and appending in each iteration of the loop it's much quicker to build a single string with all the table's HTML and append it once when finalised.
With all that said, try this:
$(document).ready(function() {
$.ajax({
url: "http://learn.cf.ac.uk/webstudent/sem5tl/javascript/assignments/spanish.php",
dataType: 'jsonp',
jsonpCallback: 'drawTable'
});
});
function drawTable(data) {
var html = '';
for (var i = 0; i < data.length; i++) {
html += '<tr><td>' + data[i].course + '</td><td>' + data[i].name + '</td><td>' + data[i].price + '</td></tr>';
}
$('#table tbody').append(html);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="table">
<thead>
<tr>
<th>Course</th>
<th>Name</th>
<th>Price</th>
</tr>
</thead>
<tbody></tbody>
</table>
Note that I reduced the HTML shown here to only the relevant parts.
// Tabs
$(function() {
$( "#tabs" ).tabs();
});
// Spanish
$(document).ready(function(){
$.ajax({
url: "http://learn.cf.ac.uk/ webstudent/sem5tl/javascript/assignments/spanish.php",
// path to file
dataType: 'jsonp',
jsonp: 'callback',
jsonpCallback: 'jsonpCallback',
// The var you put on this func will store data
success: function (data) {
alert('success');
// Call the function passing the data recieved
drawTable(data);
}
});
});
function drawTable(data) {
for (var i = 0; i < data.length; i++) {
drawRow(data[i]);
}
}
function drawRow(rowData) {
var row = $("<tr />")
$("#table").append(row);
row.append($("<td>" + rowData.course + "</td>"));
row.append($("<td>" + rowData.name + "</td>"));
row.append($("<td>" + rowData.price + "</td>"));
}
I have a dropdown selection where the user can select a name and related data will be loaded with the selection. Everything works fine except it always keeps the first data after the second or third selection. How do I remove the first selected data's when I am selecting a value the second time?
<table class="table table-striped table-bordered" id="example">
<thead>
<tr>
<td>Course Code</td>
<td>Name</td>
<td>Grade</td>
</tr>
</thead>
</table>
<script type="text/javascript">
$('#student').on('change', function(e) {
$('#example tr:last').remove().end();
var std_id = $('#student option:selected').attr('value');
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
$.ajax({
type: "POST",
url: "{{url('ajax-student-result')}}",
data: {
std_id: std_id
},
success: function(data) {
$.each(data, function(index, subcatObj) {
$('#example tr:last').after('<tr><td id="code">' + subcatObj.c_code + '</td><td id="course_name">' + subcatObj.c_name + '</td><td id="grade">' + subcatObj.grade + '</td></tr>');
});
}
});
});
</script>
I guess you are using Symfony and Twig.
I think a CSRF token is to be used only once so if you don't renew your csrf token for each ajax post request it may be the reason why it works only once.
Edit : Found this question which might help you :
Generate new CSRF token without reloading the entire form
Change the code to include removal:
success: function(data) {
$('#example tr:last')remove();
$.each(data, function(index, subcatObj) {
$('#example tr:last').after('<tr><td id="code">' + subcatObj.c_code + '</td><td id="course_name">' + subcatObj.c_name + '</td><td id="grade">' + subcatObj.grade + '</td></tr>');
});
}
I have this ajax code below which is returning a List of products of a specific category ID which is passed in the data :
THe list is then looped through and displayed one by one.
The code below works in both chrome and firefox, but in IE9 it will only display the first product.
function getProducts(catID) {
$('#ChangeContent').html('');
$.ajax({
type: "POST",
url: "Mainpage.aspx/GetProducts",
data: "{categoryID:" + catID + " }",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (msg) {
allProducts = msg.d;
$.each(msg.d, function (i, value) {
var desc = "";
if (value.description.length > 70) {
desc = value.description.substring(0, 67);
desc += " ...";
}
else {
desc = value.description;
}
var htmll = "<div class='OutsideDiv' onclick='displayProduct(" + value.productID + " )'><table class='DivBorder'> <tr > <td class='imageBox'><img alt='' src='" + value.image + "' /></td> </tr> <tr > <td class='title'>" + value.name + "</td>";
htmll += " </tr> <tr> <td class='desc'>" + desc + " </td> </tr> <tr> <td class='price'>€" + value.price + "</td> </tr> </table></div>";
htmll += " <script type='text/javascript'>$('.DivBorder').mouseover(function (){$(this).css('border-color', '#cb510a');$(this).css('background-color', '#e2e2e2');});$('.DivBorder').mouseout(function (){$(this).css('border-color', '#bdbdbd');$(this).css('background-color', '#f6f6f6');});";
$('#ChangeContent').append(htmll);
});
},
error: function (error) {
alert("Errorrrrrr");
}
});
};
I did try searching for this problem, but couldnt find this same problem which includes .each inside .ajax
Any help would be much appreciated.
...maybe because the element you're appending has no closing
. Why are you appending a script like that anyway? You're
going to bind the same events to the same .DivBorder elements over and
over again.
As cookie monster said