Datatables - Cannot get Editor to work - php

I am using the follwing version of datatables:
<script src="https://cdn.datatables.net/r/bs-3.3.5/jqc-1.11.3,dt-1.10.8/datatables.min.js"></script>
And the following version of Editor, Buttons and Select:
<script type="text/javascript" src="/jquery/Editor-PHP-1.5.5/js/dataTables.editor.js"></script>
<script src="https://cdn.datatables.net/buttons/1.1.2/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/select/1.1.2/js/dataTables.select.min.js"></script>
This is my js file which calls my API and reads into Datatables and Editor:
var editor; // use a global for the submit and return data rendering in the examples
$(document).ready(function() {
editor = new $.fn.dataTable.Editor( {
ajax: {
create: {
type: 'POST',
url: '../php/rest/create.php'
},
edit: {
type: 'PUT',
url: '../php/rest/edit.php?id=_id_'
},
remove: {
type: 'DELETE',
url: '../php/rest/remove.php?id=_id_'
}
},
table: "#list_blogs_table",
fields: [ {
label: 'entry_id',
name: 'entry_id'
},
{
label: 'entry_name',
name: 'entry_name'
},
{
label: 'entry_body',
name: 'entry_body'
},
{
label: 'entry_date',
name: 'entry_date'
},
{
label: 'status',
name: 'status'
},
{
label: 'created_timestamp',
name: 'created_timestamp'
},
{
label: 'updated_timestamp',
name: 'updated_timestamp'
},
]
} );
$('#list_blogs_table').DataTable( {
dom: "Bfrtip",
url: "http://www.example.com/api/v1/blog/blogs/format/json",
dataSrc: "message",
columns: [
{ data: "entry_id" },
{ data: "entry_name" },
{ data: "entry_body" },
{ data: "entry_date" },
{ data: "status" },
{ data: "created_timestamp" },
{ data: "updated_timestamp" },
],
select: true,
buttons: [
{ extend: "create", editor: editor },
{ extend: "edit", editor: editor },
{ extend: "remove", editor: editor }
]
} );
} );
This is my HTML:
<table id="list_blogs_table" class="table table-hover table-striped table-bordered">
<thead>
<tr>
<th>Id</th>
<th>Title</th>
<th>Article Text</th>
<th>entry_date</th>
<th>Status</th>
<th>Created</th>
<th>Updated</th>
</tr>
</thead>
<tfoot>
<th>Id</th>
<th>Title</th>
<th>Article Text</th>
<th>entry_date</th>
<th>Status</th>
<th>Created</th>
<th>Updated</th>
</tfoot>
<tbody>
</tbody>
</table>
Here is my JSON file (have shortened it)
{
"status": "success",
"message": [{
"entry_id": "1",
"entry_name": "12345678",
"entry_body": "this is just the beginning update",
"entry_date": "2016-05-02 20:13:12",
"status": "active",
"created_timestamp": "2016-05-01 21:25:51",
"updated_timestamp": "2016-05-01 21:25:51"
}, {
"entry_id": "2",
"entry_name": "one one one",
"entry_body": "this is just the beginning update 1",
"entry_date": "2016-05-02 20:13:16",
"status": "active",
"created_timestamp": "2016-05-02 14:44:03",
"updated_timestamp": "2016-05-01 21:25:51"
},
[snip]
Unfortunately, I get a table with no data as following

I found the solution. Here is the revised code. Silly over looking things.
$('#list_blogs_table').DataTable( {
dom: "Bfrtip",
"ajax": {
"url": "http://www.example.com/api/v1/blog/blogs/format/json",
"dataSrc": "message",
},
columns: [
{ data: "entry_id" },
{ data: "entry_name" },
{ data: "entry_body" },
{ data: "entry_date" },
{ data: "status" },
{ data: "created_timestamp" },
{ data: "updated_timestamp" },
],
select: true,
buttons: [
{ extend: "create", editor: editor },
{ extend: "edit", editor: editor },
{ extend: "remove", editor: editor }
]
} );

Related

$(document).ready(function () unable to call function in controller

I am using data table to display large number of rows from database.I was using below code to display data fetched from database but as data started increasing,it takes lots of time to load as there are multiple joins in select query.
Below is the code which takes lots of time to load view:
<script>
$(document).ready(function() {
$('#fileData').dataTable({
"aLengthMenu": [[5,10, 25, 50, 100, -1], [5,10, 25, 50, 100, "All"]],
//"aaSorting": [[ 4, "desc" ]],
"iDisplayLength": <?php echo 5; ?>,
'bProcessing' : true,
'bServerSide' : false,
"oTableTools": {
"sSwfPath": "assets/media/swf/copy_csv_xls_pdf.swf",
"aButtons": []
},
"oLanguage": {
"sSearch": "Filter: "
},
"aoColumns": [
null,
null,
null,
null,
null,
null,
null,
null,
null,
null
],
"aoColumns": [
{"bVisible": true},
{"bVisible": true},
{"bVisible": true},
{"bVisible": true},
{"bVisible": true},
{"bVisible": true},
{"bVisible": true},
{"bVisible": true},
{"bVisible": true},
{"bVisible": true},
{"bVisible": true}
]
}).columnFilter({ aoColumns: [
{ type: "text", bRegex:true },
{ type: "text", bRegex:true },
{ type: "text", bRegex:true },
{ type: "text", bRegex:true },
{ type: "text", bRegex:true },
{ type: "text", bRegex:true },
{ type: "text", bRegex:true },
{ type: "text", bRegex:true },
{ type: "text", bRegex:true },
{ type: "text", bRegex:true },
{ type: "text", bRegex:true }
]});
});
</script>
<table id="fileData" class="table table-striped table-bordered table-hover table-full-width">
<thead>
<tr>
<th>Sl.No</th>
<th>Type</th>
<th>No </th>
<th>0-15 yrs M</th>
<th>0-15 yrs F</th>
<th>15-45 yrs M</th>
<th>15-45 yrs F</th>
<th>Above 45 yrs M</th>
<th>Above 45 yrs F</th>
<th>Cumulative Since April</th>
<th>Remarks</th>
</tr>
</thead>
<tbody>
<?php //if(is_object($proj_workers_report)) {
?>
<?php foreach ($nreports->result() as $index=>$row) { ?>
<tr>
<td> <?php echo $index + 1; ?> </td>
<td><?php echo $row->test1; ?></td>
<td><?php echo $row->test2; ?></td>
<td><?php echo $row->test3; ?></td>
<td><?php echo $row->test4; ?></td>
<td><?php echo $row->test5; ?></td>
<td><?php echo $row->test; ?></td>
</td>
<td></td>
</tr>
<?php
} ?>
</tbody>
</table>
After searching for solution to reduce loading time i found solution as enabling "serverSide":true.so i changed the code as below
$(document).ready(function () {
var year="<?php echo base_url() . 'reportc/new_disease_morbidity_report'; ?>";
alert(year);
var dataTable = $('#example2').DataTable({
"processing":true,
"serverSide":true,
"order":[[ 0, "desc" ]],
"ajax":{
url:"<?php echo base_url() . 'test/nreport'; ?>",
type:"POST",
data:"{'id':year}",
success: function (data) {
alert("success");
},
error: function () {
alert('error');
}
},
'language': {
"emptyTable":"No patient available"
},
"columnDefs":[
{
//"targets":[0, 3],
//"orderable":false,
},
],
});
controller:
function new_disease_morbidity_report()
{
$year = $this->input->post('id');
echo $year;
}
But issue with new code is that it is unable to call function in controller.can anyone help me out with this issue.Is there something i am missing ?
Just by adding "serverSide": true you are telling Datatable let me handle Pagination
In order to do so Datatable will append few request parameter in request API and in response you need to set few parameter to let Server Side pagination work smoothly.
You are on right track. Just need to implement correctly.
Note: As Datatable will append few parameter you need to handle them at your controller level. Add those parameters as #RequestParam. Inspect your API call to get exact parameters.
1 Datatable will add following parameter in your request POST/GET
order: asc
start: 20
length: 10
This will help you in passing LIMIT parameter in DB Query.
SELECT * FROM User LIMIT 20,10;
2 Your API should return following fields in addition
"draw": 3, // unique ID
"recordsTotal": 57, // total number of records
"recordsFiltered": 57 // total number of filtered records
You can see a sample demo here Please inspect and check request and response
Refer this answer for more detail.

Datatable default ordering not applying

I have this code for jQuery Datatables, it works fine, everything is working as it should aside from the order function is not sorting the column on page load (or at all).
What am I doing wrong here? I've read Datatables documentation and this appears to be correct.
$(document).ready(function() {
$('#data').DataTable( {
"ajax": {
"dataType": 'json',
"url": "package.json",
"dataSrc": "search_result",
"order": [ 0, "desc" ]
},
"columns": [
{ "data": "num" },
{ "data": "domain_name",
"render": function(data, type, row, meta)
{
if(type === 'display')
{
data = '<a class="intel_link" href="http://www.' + data + '" target="_blank">' + data + '</a>';
}
return data;}
},
{ "data": "query_time"},
{ "data": "create_date" },
{ "data": "update_date" },
{ "data": "expiry_date" }
]
} );
} );
Problem is with sort attr, its written inside ajax block.
$(document).ready(function() {
$('#data').DataTable( {
"ajax": {
"dataType": 'json',
"url": "package.json",
"dataSrc": "search_result"
},
"order": [ 0, "desc" ]
"columns": [
{ "data": "num" },
{ "data": "domain_name",
"render": function(data, type, row, meta)
{
if(type === 'display')
{
data = '<a class="intel_link" href="http://www.' + data + '" target="_blank">' + data + '</a>';
}
return data;}
},
{ "data": "query_time"},
{ "data": "create_date" },
{ "data": "update_date" },
{ "data": "expiry_date" }
]
} );
} );
For more detail ref Datable Order

How to make Datatable Jquery dynamically

I need to make a table dynamically with DataTable Jquery, the table must be Server-side processing type and in the same request (Ajax) and answer the columns are made and obviously the results.
DatosColumna=""//Json with Response of ajax
$('#table_query_info').dataTable({
columnDefs: DatosColumna,//Here its the headers
destroy: true,
processing: true,
serverSide: true,
ajax: {
url: myBaseUrl + "consults/find_docs",
type: "post",
data: function (d) {
d.datos = make_info()//Send Json with info
},
statusCode: {
200: function (resp) {
alert("OK");//That Good
}
}
}
});
I tried with this code but it has not worked
Thank you very much
steps for resolution:
make a html code
<table class="table" id="tablaindex" style="width:100%"></table>
Obtengo las columnas, antes de inicializar la tabla
$.ajax({
type: "POST",
url: "AtencionTurno/ColumnasDatatable",
data: TblOficina,
success: function (response) {
inicializarTabla(response);
}, error: function (request, status, error) {
console.log("Error");
}
});
The reques obtain the follow json
[
{
"title": "Column 1",
"data": "Id_Turno",
"orderable": false
},
{
"title": "Column 2",
"data": "Turno",
"orderable": false
},
{
"title": "Column 3",
"data": "Clasificacion",
"orderable": false
},
{
"title": "Column 4",
"data": "Concepto",
"orderable": false
},
{
"title": "Column 5",
"data": "Hora",
"orderable": false
}]
now I initialize the table with the columns that were obtained
inicializarTabla = function (columnas) {
var dataTable = $('#tablaindex').DataTable({
"processing": true,
"serverSide": true,
stateSave: true,
orderable: false,
"order": [],
columns: columnas,
"lengthChange": false,
searching: false,
colReorder: false,
"ajax": {
url: "AtencionTurno/IndexTurnos",
type: "post",
data: TblOficina
}
});
};
response from server:
{
"draw": "1",
"recordsTotal": 4,
"recordsFiltered": 4,
"data": [
{
"Id_Turno": "358",
"Turno": "ALAT1",
"Clasificacion": "euismod",
"Concepto": "Convallis",
"Hora": "11:00:12",
"Tiempo_Espera": "2018/07/03 11:00:12",
"Tipo_Cliente": "Calendario",
"Transferencia": "",
"null": "358"
},
{
"Id_Turno": "354",
"Turno": "ALAK23",
"Clasificacion": "euismod",
"Concepto": "Pagos",
"Hora": "16:36:14",
"Tiempo_Espera": "2018/06/29 16:36:14",
"Tipo_Cliente": "Utiles Escolares ",
"Transferencia": "",
"null": "354"
}
]
}

Passing UserID into Datatables

Working a Project here and I need some help. I have a php page and an html page, trying to pass the username of the php into a DataTable that is in my html file. The code that I have for each is:
PHP is below:
public function __construct(Guard $auth)if (Auth::check() ||Auth::attempt()) {
$auth_id = Auth::user()->id;}
My HTML portion is the following:
var table = $('#example').DataTable( {
// Makes one continuous line
"autoWidth": false,
// How many rows to return
"pageLength": 25,
// Setup the search box with the current username to filter the values on the screen - jsg 2/12/2016
"search": {
"search": $('auth')
}, dom: "Bfrtip",
ajax: "../php/staff.php",
columns: [
{
data: null,
defaultContent: '',
className: 'select-checkbox',
orderable: false
},
{ data: "instructor", visible: false },
{ data: "first_name" },
{ data: "last_name" },
{ data: "category" },
{ data: "Metric_text" },
{ data: "response_value" },
{ data: "fkey_course_id", visible: false },
{ data: "course_code" },
{ data: "course_number" },
{ data: "course_section"}
],
My Question is how can I get $auth_id into the search portion of the HTML coding. As you can see I've tried this with $('auth') but its giving me an object error. If I trying a name like "search": "Test" then test populates and it works. Basically I want to pass the username into the search box of the DataTable so it ill show only the usernames rows.
you can use Ajax.
The code looks like this:
$(document).ready(function() {
$('#example').DataTable( {
"processing": true,
"serverSide": true,
"ajax": "scripts/ids-objects.php",
"columns": [
{ "data": "first_name" },
{ "data": "last_name" },
{ "data": "position" },
{ "data": "office" },
{ "data": "start_date" },
{ "data": "salary" }
]
} );
} );
Look at this sample.
Hope it can help you.

Basic DataTable Ajax Configuration Not Working

I'm trying to use DataTables with php and mysql. I have an ajax call that is pulling in data as such:
[
{
"id": 3,
"ptid":"blah",
"last_name":"blah",
"first_name":"blah",
"priv_application":"E",
"priv_document":"E",
"priv_note":"E",
}
]
I'm configuring DataTables with the following:
$('#listing').DataTable( {
"paging": false,
"searching": false,
"select": true,
ajax: {
url: '{{ url("administration/admindata") }}',
dataSrc: ''
},
columns: [
{ title: "ID" },
{ title: "PtID" },
{ title: "Last Name" },
{ title: "First Name" },
{ title: "Application" },
{ title: "Documents" },
{ title: "Notes" }
]
});
And the HTML for the table is as follows:
<table id="listing" class="display" width="100%"></table>
However, it doesn't want to load the data even though this configuration is exactly like the first example given here:
https://datatables.net/manual/ajax
I'm getting the following error:
DataTables warning: table id=listing - Requested unknown parameter '0' for row 0, column 0. For more information about this error, please see http://datatables.net/tn/4
Any assistance is greatly appreciated.
When using array of objects as your data source, you need to specify data source for each column using columns.data option.
$('#listing').DataTable( {
"paging": false,
"searching": false,
"select": true,
"ajax": {
"url": '{{ url("administration/admindata") }}',
"dataSrc": ''
},
columns: [
{ data: "id", title: "ID" },
{ data: "ptid", title: "PtID" },
{ data: "last_name", title: "Last Name" },
{ data: "first_name", title: "First Name" },
{ data: "priv_application", title: "Application" },
{ data: "priv_adocument", title: "Documents" },
{ data: "priv_note", title: "Notes" }
]
});
Try something like this.
ajax": {
type': 'POST',
'url': "<?=action('TestController#postTestfunction')?>"
},
try to use the ajax call without blade template code.
and make sure your route is written something like this.
Route::controller('test', 'TestController');
Also try with change your controller function name "admindata" to "postAdmindata"
Let me know still if you get stuck anywhere.

Categories