I've been working on datatables server side processing and slim framework and I always get this error in my browser:
When I check chrome developer tools, I am seeing this in the console:
Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:8000/user/ssp-data.php?draw=1&columns%5B0%5D%5Bdata%5D=0&c…art=0&length=10&search%5Bvalue%5D=&search%5Bregex%5D=false&_=1440509303609
My html code is here:
<table id="dataTableUsers" class="table table-striped table-bordered" cellspacing="0" width="100%">
<thead>
<tr>
<th>ID</th>
<th>Nickname</th>
<th>Email</th>
</tr>
</thead>
<tfoot>
<tr>
<th>ID</th>
<th>Nickname</th>
<th>Email</th>
</tr>
</tfoot>
</table>
My script:
$(document).ready(function() {
$('#dataTableUsers').dataTable( {
"processing": true,
"serverSide": true,
"ajax": "ssp-data.php"
} );
} );
ssp.data.php
http://pastebin.com/iBnWgAHd
I successfully used datatables but not server side processing. It loads 1000+ rows for about 5 seconds and I don't want my client to wait every time like that. I tried searching and found that datatables server side processing can be helpful. What have I done wrong with my code? Thank you in advance.
Using slims Framework 3, you need to have 2 routes for this, the first one:
$app->get('/datatable-example',function(){
... // your html code goes here
});
is for rendering the HTML page, the '/datatable-example' could be changed into whatever you want. The second route:
$app->get('/datatable-data',function(){
... // your server-side handler goes here
});
is for returning the data. The 'datatable-data' could be changed but it must be consistent with the JS code below:
$(document).ready(function() {
$('#dataTableUsers').dataTable( {
"processing": true,
"serverSide": true,
"ajax": "datatable-data"
});
});
notice that the value of "ajax" is also "datatable-data", the same as the second route.
I'll copy the whole example below, but it's kinda dirty and hacky, but it should work when you copy to your route file:
$app->get('/datatable-example',function(){
return
'
<head><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script></head>
<head><script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script></head>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css" />
<table id="dataTableUsers" class="table table-striped table-bordered" cellspacing="0" width="100%">
<thead>
<tr>
<th>ID</th>
<th>Nickname</th>
<th>Email</th>
</tr>
</thead>
<tfoot>
<tr>
<th>ID</th>
<th>Nickname</th>
<th>Email</th>
</tr>
</tfoot>
</table>
<script>
$(document).ready(function() {
$("#dataTableUsers").dataTable( {
"processing": true,
"serverSide": true,
"ajax": "/datatable-data"
} );
} );
</script>
';
});
$app->get('/datatable-data',function(){
return
'{
"draw": 1,
"recordsTotal": 2,
"recordsFiltered": 2,
"data": [
["1", "Nick" ,"nick#mail.com"],["2", "John" ,"john#mail.com"]
]
}';
});
hope it helps.
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'm working on adding a new row in my datatable on button click. Here's my code:
HTML:
<table id="datatable-batches" class="table table-striped table-bordered forex-datatable">
<thead>
<tr>
<th>Batch #</th>
<th>Qty</th>
<th>Date</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Batch #</th>
<th>Qty</th>
<th>Date</th>
</tr>
</tfoot>
</table>
Script:
<script type="text/javascript">
var table;
$(document).ready(function() {
//datatables
var batches_table = $('#datatable-batches').DataTable({
"processing": true, //Feature control the processing indicator.
"serverSide": true, //Feature control DataTables' server-side processing mode.
"order": [], //Initial no order.
"ajax": {
"url": "<?php echo site_url('oss/admin/ajax_batches'); ?>",
"type": "POST",
data: {
'<?php echo $this->security->get_csrf_token_name(); ?>' : '<?php echo $this->security->get_csrf_hash(); ?>'
},
dataSrc: function ( json ) {
if(json.csrf_token !== undefined) $('meta[name=csrf_token]').attr("content", json.csrf_token);
return json.data;
}
}
});
$(function() {
$('#new-batch').on('click', function(){
$('#receiving-box').css('display', 'block');
batches_table.row.add( ["3", "5", "2017-06-24 08:55:41"] ).draw();
});
});
});
</script>
Both are in the same file. When I hit the button, only the 'draw' number is increased but the data is still the same.
I also copied and pasted the example table here to make sure row.add() is working. Here's the debugger data for additional info.
Any help is highly appreciated. Thanks!
I am rendering a DataTable with php, getting the data from a MySQL-Database.
The table get rendered, but the are columns in the table, which contain links of images (4th column) or links to other websites (on the 6th column). How can I render the links of the images, as images directly? And the links of the websites, as an Hypertext-Link not a text?
Here is my jquery code:
$(document).ready(function() {
var dataTable = $('#oShopTab').DataTable( {
"processing": true,
"serverSide": true,
"ajax":{
url :"aPage-data.php", // json datasource
type: "post"
}
});
});
HTML:
<table id="oShopTab" class="display">
<thead>
<tr>
<th>pId</th>
<th>sName</th>
<th>lName</th>
<th>logo Link</th>
<th>Incentiv</th>
<th>Go To Shop URL..</th>
</tr>
</thead>
<tfoot>
<tr>
<th>pId</th>
<th>sName</th>
<th>lName</th>
<th>logo Link</th>
<th>Incentiv</th>
<th>Go To Shop URL..</th>
</tr>
</tfoot>
</table>
I have a datatable that loads about 20,000 (minimum) numbers (rows of data) . With that said , i use the pipeline feature of jquery datatables since it easily handles a large chunk of data .
The issue is that i want to know how to add a new row dynamically by passing the id to it .
Below is my jquery code :
$(document).ready(function() {
available_numbers();
function available_numbers(){
$('#available_numbers').dataTable( {
"processing": true,
"serverSide": true,
"ajax": $.fn.dataTable.pipeline( {
url: 'fetch_available_numbers.php',
pages: 5
})
} );
}
} );
And below is the table :
<table id="available_numbers" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Phone Number</th>
<th>Assigned To (User Group)</th>
</tr>
<tfoot>
<tr>
<th>Phone Number</th>
<th>Assigned To (User Group)</th>
</tr>
</tfoot>
</table>
The values are fetched in json format , just like the server side script in datatables .
Thanks.
I'm building an administration panel app using Codeigniter and would like to fetch my member records using the Server Side Processing method of jQuery DataTables (since i've got quite a large number of member records). I'm using the Ignited DataTables CI library to fetch and attempt to display my data. I was able to get this working with the standalone version of Datatables Server Side Implementation found here, but would like to get this working with CodeIgniter in order to be in line with the rest of my app. Here's my code so far:
CI Controller:
$this->load->library('DataTables');
$this->load->model('table_model', 'table');
$this->datatables->select('member_id, username,email, first_name, last_name')
->from($this->table->getTable('members'))
->join($this->table->getTable('groups'), 'members.group_id = member_groups.group_id', 'left')
->select('group_title');
echo $this->datatables->generate();
exit;
HTML:
<table id="members">
<thead>
<tr>
<th>Member ID</th>
<th>Username</th>
<th>Email</th>
<th>First Name</th>
<th>Last Name</th>
<th>Group Name</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="7" class="dataTables_empty">Loading members...</td>
</tr>
</tbody>
</table>
jQuery:
$(document).ready(function() {
$("#members").dataTable({
"bProcessing" : true,
"bServerSide" : true,
"sAjaxSource" : "/members/fetch_members",
"sPaginationType" : "full_numbers"
});
});
JSON response:
{
"sEcho": 0,
"iTotalRecords": 11007,
"iTotalDisplayRecords": 11007,
"aaData": [ //member records here],
"sColumns": "member_id,username,email,first_name,last_name,group_title"
}
Any and all help would be appreciated!
You have to modify the library to work with POST instead of GET
or
You have to configure datatable to work with GET
here is an example of configuring method, use it to suit your need
http://www.datatables.net/release-datatables/examples/server_side/post.html