jQuery DataTables with Codeigniter not displaying the data - php

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

Related

How to set thead in vertical in datatable?

I have used jquery datatable,
HTML Code
<table id="result_table" class="display table table-bordered" cellspacing="0" width="100%">
<thead>
<tr>
<th>#</th>
<th>Username</th>
<th>Activation Status</th>
<th>Recent Login</th>
<th>Total No. of login</th>
<th>Avg No. of login/day</th>
<th>Total No. of Exports</th>
<th>Total No. of access</th>
</tr>
</thead>
<tfoot>
<tr>
<th>#</th>
<th>Username</th>
<th>Activation Status</th>
<th>Recent Login</th>
<th>Total No. of login</th>
<th>Avg No. of login/day</th>
<th>Total No. of Exports</th>
<th>Total No. of access</th>
</tr>
</tfoot>
</table>
and I have to load the table data in ajax call in JSON datatype here my PHP code
while($row = mysql_fetch_array($run_query)){
$name = $row['first_name'];
$name_string = "<a edit_id='name_".trim($name)."' href='#' onClick=\"click_today('{$name}');\" data-toggle='modal' data-target='#myModal'>{$name}</a>";
//onClick=\"click_today('{$name}');\"
$result_array[] = array($row['id'], $name_string, $row['last_name'], $row['job_title'], $row['salary'],"-","-","-");
}
echo json_encode($result_array);
acutually my result is (sample output)
but i want following image output in datatable
I don't know how to implement vertical header in jquery data table I am always using horizontal thead but now I need vertical header because of needed pls share ur suggestion or solution
It is possible to make this kind of output from server side[php] only then
to assign datatable. I had also face this problem but I make way from server side
and another way is also there you change your expected format using PIVOT Table
using database

Rendering DataTable with php from JSON & MySQL Data

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>

Datatable sorting asc icon still appear on first column even being disabled

Hi I have the following table design. I dont want the first and last column to be sortable. I have set accordingly.But the icon asc still appears on the first column but not on the last column. But when I try to sort the second column it goes off.
<table id="userTable" name='userTable' class="table table-striped table-bordered bootstrap-datatable " data-column-defs='[{"sortable": false, "targets": [0,3]}]' style='table-layout: fixed;'>
<thead>
<tr>
<th class="no-sort" style='width: 10%;'>No.</th>
<th style='width: 25%;'>First Name</th>
<th style='width: 20%;'>last Name</th>
<th style='width: 25%;'>Details</th>
</tr>
</thead>
</table>
Even if you disable sorting for a column, the dataTables sort order still remain. By default order is [0, 'asc']; simply set order to target the #2 column instead :
var table = $('#example').DataTable({
//....
order: [[ 1, "asc" ]] //column indexes is zero based
})
demo -> http://jsfiddle.net/6k26o7mk/
Or use order: [] if you not want any default order at all (icons will be hidden until the user sort the table).
In version 1.10.20 it worked for me just like this:
$(document).ready(function(){
$('#example').DataTable({
ordering: false, //disable ordering
initComplete: function( settings, json ) {
$("th").removeClass('sorting_desc'); //remove sorting_desc class
}
});
});
<link href="//cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<table id="example" class="display">
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1 Data 1</td>
<td>Row 1 Data 2</td>
</tr>
<tr>
<td>Row 2 Data 1</td>
<td>Row 2 Data 2</td>
</tr>
</tbody>
</table>
I was not able to get this working on datatables version: 1.10.11 with the DataTables download builder
Being that case, I used jQuery as a workaround to remove the sorting class, which in turn will remove the icon.
$(document).ready(function () {
$('#my-dataTables').DataTable({
paging: false,
ordering: false,
info: false,
});
// Removes icon
$('.sorting_asc').removeClass('sorting_asc');
});

DataTables Server side and Slim Framework

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.

php Jquery - Server side - Add an edit button

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.

Categories