<a class="checkModelButton" href="addrow.php">ADD ROW</a>
<table>
<thead>
<th>Name</th>
</thead>
<tboby id="model_row">
<tr>Nokia N70</tr>
</tbody>
</table>
And jQuery:
jQuery('.checkModelButton').click(function(){
var url = jQuery(this).attr('href');
jQuery.ajax({
type:'get',
cache: false,
url: url,
success: function(html){
jQuery('#model_row').html(html);
}
});
});
in file addrow.php
<tr>Nokia N71</tr>
When I click on a tag is result is:
<table>
<thead>
<th>Name</th>
</thead>
<tboby id="model_row">
<tr>Nokia N71</tr>
</tbody>
</table>
How to fix it to result is:
<table>
<thead>
<th>Name</th>
</thead>
<tboby id="model_row">
<tr>Nokia N70</tr>
<tr>Nokia N71</tr>
</tbody>
</table>
Use .append() OR .appendTo() instead of .html()
Like
success: function(html){
jQuery('#model_row').append(html);
}
OR
success: function(html){
jQuery(html).appendTo('#model_row');
}
Using .html() will overwrite the content.
You need to append it.
$('#model_row').append(html);
Related
I using Jquery to clear the table tbody and reinsert in via ajax call. after the data is showed, but the sorting function is not working properly. here is my codes..
<table class="table table-bordered table-striped table-condensed flip-content table-hover" style="table-layout:fixed;" id="datatable1">
<thead>
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5</th>
</tr>
</thead>
<tbody id="agtBody">
<?php
foreach($results as $result) :
?>
<tr>
<?php if(isset($game_name['gpname'])){?>
<td><?=$game_name['gpname']?></td>
<?php }else{ ?>
<td><?=$result['gpid']?></td>
<?php } ?>
<td style="text-align:right;"><?=Helper::money($result['betAmt'])?></td>
<td style="text-align:right;"><?=Helper::money($result['payout'])?></td>
<td style="text-align:right;"><?=Helper::money($result['winLoss'])?></td>
<td style="text-align:right;"><?=Helper::money($result['validbetamount'])?></td>
</tr>
<?php endforeach; ?>
</tbody>
<tfoot id ="agtFoot">
<tr style="background-color:#FFEEDD;">
<td>Total</td>
<td style="text-align:right;"><?=Helper::money($totalbetAmt)?></td>
<td style="text-align:right;"><?=Helper::money($totalpayout)?></td>
<td style="text-align:right;"><?=Helper::money($totalwinLoss)?></td>
<td style="text-align:right;"><?=Helper::money($totalvalidbetamount)?></td>
</tr>
</tfoot>
</table>
<script type="text/javascript">
function search_agtdetail(agentcode) {
if($("#agt_StartTime").val() == "" || $("#agt_EndTime").val() == "") {
alert("<?php echo 'Not Valid' ?>");
} else {
$("#agtBody").empty();
$("#agtFoot").empty();
$.ajax({
type: "post",
url: "/report/agentBoxAjax",
dataType: "json",
data: {
start_date: $("#agt_StartTime").val(),
end_date: $("#agt_EndTime").val(),
agent_code : agentcode,
},
success: function (data) {
$('#datatable1').dataTable().fnDestroy();
$('#agtBody').html(data.html);
$('#agtFoot').html(data.html_foot);
$('#datatable1').css('width', '');
$('#datatable1').dataTable({
'bPaginate':false,
'bSort': true,
});
}
});
}
}
$(document).ready(function(){
$('#datatable1').dataTable({
'bPaginate':false,
'bSort': true,
});
});
</script>
Can someone help me? The sorting is not working properly..
Its look like using the old data for sorting it.
i had less experience on jquery, someone please help. Thank you so much.
Extending on Bhushan Kawadkar comment you need to use the API method for this.Also you should be using the ajax methods for your datatable.
For example, lets say that i get the server side data from a script called data.php, i would just call it like this:
$('#datatable1').dataTable({
'bPaginate':false,
'bSort': true,
"ajax": {
"url": "data.php",
"type": "GET"
}
});
the post.php needs to return the data in json format like this (using car as example):
{
"data":[
[
"Ford",
"Fiesta",
"2015"
],
]
}
in your success section in the ajax call instead of destroying the table just use:
$('#datatable1').ajax.reload()
Here's a snippet just in case.
$(document).ready(function() {
var table = $('#example').DataTable({
"ajax": 'https://raw.githubusercontent.com/DataTables/DataTables/master/examples/ajax/data/arrays.txt',
});
$("#reload_table").on("click",function(){
console.log("reloading data");
table.ajax.reload();
});
});
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.css">
<html>
<body>
<table id="example" class="display" style="width:100%">
<thead>
<tr>
<th>Name</th>
<th>Profession</th>
<th>City</th>
<th>Date</th>
<th>Salary</th>
</tr>
</thead>
</table>
</body>
<input id="reload_table" type="button" value="RELOAD TABLE">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.js"></script>
</html>
I am trying to display dataTable data using ajax but it didn't work.
This is my jquery code :
$('#example').DataTable({
ajax: {
type: 'GET',
url: 'data.php',
success: function (msg) {
$("#tbody_example").html(msg);
}
}
});
This is my data.php page :
<?php echo '<td>Name</td>
<td>Position</td>
<td>Office</td>
<td>Extn.</td>
<td>Start date</td>
<td>Salary</td>'; ?>
and This is my dataTable :
<table id="example" class="display" style="width:100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Extn.</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tbody id="tbody_example">
</tbody>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Extn.</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
</table>
My dataTable still empty and I get MOCK GET: data.php as error.
Any one can help me.
That will not work.
Please, reference DataTables documentation to see that success must not be overridden as it is used internally in DataTables.
Instead you might use function ajax( data, callback, settings )
$('#example').DataTable({
ajax: function(data, callback, settings) {
$.get({
type: 'GET',
url: 'data.php',
success: function (msg) {
$("#tbody_example").html(msg); // this is NOT how the table should be populated
// invoke callback(msg) to populate the table
});
}
});
Thus, you populate the table by calling callback(response_data) with the response_data that is either string[][] or object[] type. In case of the latter you might need to add "columns" property to DataTables config.
It works for me.I just add dataType
ajax: {
type: 'GET',
url: 'data.php',
dataType : 'html',
success: function (msg) {
$("#tbody_datatable").html(msg);
},
error: function (req, status, err) {
console.log('Something went wrong', status, err);
}
}
Try the below thing, It should work
In php file
$content = "<td>Name</td>
<td>Position</td>
<td>Office</td>
<td>Extn.</td>
<td>Start date</td>
<td>Salary</td>";
$return["json"] = json_encode();
echo json_encode($return);
In ajax
ajax: {
type: 'GET',
url: 'data.php',
success: function (msg) {
$("#tbody_example").html(msg["json"]);
}
}
I use Datatable in my web application.
Following is my simple code to get data using ajax.
<script>
$(document).ready(function() {
$('#mytable').DataTable();
} );
</script>
<body>
<h2>AJAX SELECT</h2><hr>
<div align="center">
Select Team :
<select name="select" id ='teamSelect'>
<option value="">Select Value</option>
<option value="op2">Company 1</option>
</select>
</div>
<div id='tableContainer' align="center"></div>
<script>
$(function() {
$("#teamSelect").bind("change", function() {
$.ajax({
type: "GET",
url: "getData.php",
"dataSrc": "tableData",
success: function(html) {
$("#tableContainer").html(html);
}
});
});
});
</script>
and Getdata.php Code
<table id="mytable" class="display" cellspacing="0" width="50%">
<thead>
<tr>
<th>First name</th>
<th>Last Name</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>Airi Satou</td>
<td>Accountant</td>
<td>Tokyo</td>
</tr>
<tr>
<td>Brielle Williamson</td>
<td>Integration Specialist</td>
<td>New York</td>
</tr>
<tr>
<td>Herrod Chandler</td>
<td>Sales Assistant</td>
<td>San Francisco</td>
</tr>
<tr>
<td>Rhona Davidson</td>
<td>Integration Specialist</td>
<td>Tokyo</td>
</tr>
</tbody>
I Link Jquery, datatable css and js both.but still It return output as normal HTML table.
No console error founded.
I need that data in datatable. So how can i get that.
and i also tested datatable in index.php page. It working quite good.
You are initializing datatable before table added. You need to initialize it in ajax
remove following script
<script>
$(document).ready(function() {
$('#mytable').DataTable();
} );
</script>
update ajax as below:
<script>
$(function() {
$("#teamSelect").bind("change", function() {
$.ajax({
type: "GET",
url: "getData.php",
"dataSrc": "tableData",
success: function(html) {
$("#tableContainer").html(html);
$('#mytable').DataTable({
"destroy": true, //use for reinitialize datatable
});
}
});
});
});
</script>
Put
<script>
$(document).ready(function() {
$('#mytable').DataTable();
} );
</script>
At the bottom of your Getdata.php file also links to the datatable css and js.
Or use ajaxComplete function() to call the datatable.
I am using DataTables where onload it shows a list of records example 10 record , After i add next record ie eleventh record(ajax) ,i brings all record after addition without refresh and append it to <tbody> part of DataTables, Now my datatable is showing 11 records. but on first page of pagination . In this condition 10 record should be present on first page of pagination and 11th on second page of pagination .But it is not working
function save_data(){
$(document).ready(function(){
var form_data = $("#myform").serialize();
$.ajax({
url:'<?php echo base_url('reclist/save');?>',
type:'post',
datatype:'json',
data: form_data,
success: function(info){
var json = JSON.parse(info);
if(json.status){
var i;
for(i=0;i < json.err_input.length;i++){
$('input[name="'+json.err_input[i]+'"]').addClass('error');
$('input[name="'+json.err_input[i]+'"]').next().addClass('error_msg');
$('input[name="'+json.err_input[i]+'"]').next().text(json.err_msg[i]);
}
}
else{
**var op = '';
$.each(json.record,function(k,v){
op+= "<tr>"+
"<td>"+v.fname+"</td>"+
"<td>"+v.lname+"</td>"+
"<td>"+v.email+"</td>"+
"</tr>";
op+= v.fname;**
});
$("#rec_list_div").html(op);
$("#result").html(json.response);
$("#result").html(json.response);
}
},
errror:function(XMLHttpRequest, textStatus, errorThrown){
alert("Status: " + textStatus); alert("Error: " + errorThrown);
}
});
});
//});
}
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
</tr>
</thead>
<tfoot>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
</tr>
</tfoot>
<tbody id="rec_list_div">
<?php foreach($result as $k):?>
<tr>
<td><?php echo $k->fname;?></td>
<td><?php echo $k->lname;?></td>
<td><?php echo $k->email;?></td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
</table>
How can I retrieve this line of echo code from my php file to my jquery and I am expecting rows of values.
my php file
foreach($stmt as $warrior){
echo '<td>'.$warrior['warrior_id'].'</td><td>'.$warrior['warrior_name'].'</td><td>'.$warrior['warrior_type'].'</td>';
}
my js script
<script>
function createWarrior() {
$.post( "create_warrior.php", {
"wname": $("#txtWname").val(),
"wtype": $("#txtWtype").val()
},
function(msg){
//What should I put here
});
return false;
}
</script>
my html code
<table>
<tr>
<th colspan="3">Warrior</th>
</tr>
<tr>
<th>Warrior ID</th>
<th>Warrior Name</th>
<th>Warrior Type</th>
</tr>
<tr>
//the output should be here
</tr>
add tags <tr> at the beginning and end
foreach($stmt as $warrior){
echo '<tr><td>'.$warrior['warrior_id'].'</td><td>'.$warrior['warrior_name'].'</td><td>'.$warrior['warrior_type'].'</td></tr>';
}
the result will be
<tr><td>warrior_id_1</td><td>warrior_name_1</td><td>warrior_type_1</td></tr>
<tr><td>warrior_id_2</td><td>warrior_name_2</td><td>warrior_type_2</td></tr>
....
this answer you need to get in the js and append to html:
<script>
$.ajax({
url: 'create_warrior.php',
//Send data to php if you need. In php use $_POST['wname'] to read this data.
data: {wname: $("#txtWname").val(),wtype: $("#txtWtype").val() },
success: function(data) {
$('#dataTable').append(data);
}
});
</script>
HTML
<table id = "dataTable">
<tr>
<th colspan="3">Warrior</th>
</tr>
<tr>
<th>Warrior ID</th>
<th>Warrior Name</th>
<th>Warrior Type</th>
</tr>
</table>
Something like (note the added <tr></tr>)
foreach($stmt as $warrior){
echo '<tr><td>'.$warrior['warrior_id'].'</td><td>'.$warrior['warrior_name'].'</td><td>'.$warrior['warrior_type'].'</td></tr>';
}
with
<script>
function createWarrior() {
$.post( "create_warrior.php", {
"wname": $("#txtWname").val(),
"wtype": $("#txtWtype").val()
},
function(msg){
$('#mytable').append(msg);
});
return false;
}
</script>
and
<table id="mytable">
<tr>
<th colspan="3">Warrior</th>
</tr>
<tr>
<th>Warrior ID</th>
<th>Warrior Name</th>
<th>Warrior Type</th>
</tr>
</table>
should work I believe, didn't try it.