DataTables with Codeigniter MYSQL query - mysql

I'm trying to display three data tables as shown on this page with the variant of getting the data from my database, as shown here.
I first tested the page with the static data (from arrays.txt - first link) and it worked fine. However I'm now struggling with the MYSQL data and the JSON.
An info message showing "Processing..." shows up but the tables stay empty.
My Javascript:
$(document).ready(function(){
$('a[data-toggle="tab"]').on( 'shown.bs.tab', function (e) {
$.fn.dataTable.tables( {visible: true, api: true} ).columns.adjust();
} );
$('table.table').DataTable( {
"processing": true,
"serverSide": true,
"ajax": {
"dataSrc": "Data", // Tried adding this but didn't help
"url": "/hireStaffController/getDataTable",
"type": "POST"
},
"columns": [
{ "data": "id_staff" },
{ "data": "name_english" },
{ "data": "name_french" },
{ "data": "position" },
{ "data": "efficiency" },
{ "data": "salary" }
]
} );
}
My controller:
public function getDataTable(){
$data = $this->staffModel->get_all_staff_DB();
echo json_encode($data);
}
My Model:
public function get_all_staff_DB(){
$query = $this->db
->select('*')
->from('game_staff')
->get();
return $query->result();
}
The JSON Response from Firebug seems correct:
[{
"id_staff": "1",
"name_english": "Ski patrol 1",
"name_french": "Pisteur secouriste 1",
"position": "skipatrol",
"efficiency": "50",
"salary": "1500"
}, {
"id_staff": "10",
"name_english": "Bus driver 2",
"name_french": "Chauffeur de bus 2",
"position": "driver",
"efficiency": "55",
"salary": "1380"
}]
Firebug throws this error:
TypeError: c is undefined
...iRecordsDisplay=parseInt(f,10);d=0;for(e=c.length;d<e;d++)N(a,c[d]);a.aiDisplay=...
^
So I've tried to add "dataSrc": "Data", in the Ajax, as described here but no luck, same error. WHat is this Data? I tried with a small "d" as well.
Can you see what is wrong?
My HTML code:
<div class="tab-pane active" id="tab-table1">
<table id="myTable1" class="table table-striped table-bordered" cellspacing="0" 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>
</table>
</div>
<div class="tab-pane" id="tab-table2">
<table id="myTable2" class="table table-striped table-bordered" cellspacing="0" width="100%">
//same ...
</table>
</div>

try including "Data" as key to the echoed data:
public function getDataTable(){
$data = $this->staffModel->get_all_staff_DB();
echo json_encode(array('Data' => $data));
}
When you specify dataSrc as "Data", datatables looks for a "Data" property in the json returned by the ajax call, and uses that property as source for the table.

I hope the HTML table with is present there.
Try using ID instead of class.
Everything else you have done looks fine.
$('#ID').DataTable( {
"processing": true,
"serverSide": true,
"ajax": {
"url": "/hireStaffController/getDataTable",
"type": "POST"
},
"columns": [
{ "data": "id_staff" },
{ "data": "name_english" },
{ "data": "name_french" },
{ "data": "position" },
{ "data": "efficiency" },
{ "data": "salary" }
]
} );

Related

How to bind array of string in html using aspose.html?

I am having my json like that and i am trying to bind this in Html and convert into pdf using aspose.html but i am not able to bind readings data i.e; array of string . HTML code which i tried that i also pasting here please go through this also.
Now i am getting my result in pdf like this
Date 2/1/2022,2/2/2022,2/3/2022
Time 10AM,11AM,12PM
But i want my result in different column like
CL1 CL2 CL3
Date 2/1/2022 2/2/2022 2/3/2022
HTML:
<table class="poc_tbl" style="width:100%;margin-top:10px;" data_merge='{{#foreach data_pages}}'>
<tr>
<td>
<table class="poc_tbl" style="width:100%;margin-top:10px;" data_merge='{{#foreach data_readings}}'>
<tbody style="background-color: #f5fbfe;">
<tr>
<td style="width:30%";data_merge="{{#foreach data_readings}}">{{title}}</td>
<td>{{readings}}</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
JSON:
"data_pages": [
{
"data_readings": [
{
"title": "Date",
"readings": [ "2/1/2022", "2/2/2022", "2/3/2022" ]
},
{
"title": "Time",
"readings": [ "10AM", "11AM", "12PM" ]
},
{
"title": "Order",
"readings": [ "O1", "O2", "O3" ]
}
]
},
{
"data_readings": [
{
"title": "Date",
"readings": [ "3/1/2022", "3/2/2022", "3/3/2022" ]
},
{
"title": "Time",
"readings": [ "1AM", "2AM", "3aM" ]
},
{
"title": "Order",
"readings": [ "O11", "O12", "O13" ]
}
]
}
]

How to fetch nested JSON to table with VueJs?

I need to create a table with Vue and the data are from a JSON. I don't know how to set for the td table tag the "Jogosultsagok" two "Nev" values.
I tried row.Jogosultsagok[0].Nev format, but this not work, I write down the code parts and the final error for this.
HTML
<tbody>
<tr v-for="row in get_rows()">
<td>{{row.Id}}</td>
<td>{{row.Nev}}</td>
<td>{{row.Jogosultsagok[0].Nev}}</td>
<td>{{row.Jogosultsagok[1].Nev}}</td>
</tr>
</tbody>
Vue
data: {
rows:[]
},
created:function() {
fetch('https://api.myjson.com/bins/7jr55')
.then(res => res.json())
.then(res => {
this.rows = res;
})
},
methods: {
"get_rows": function get_rows() {
var start = (this.currentPage-1) * this.elementsPerPage;
var end = start + this.elementsPerPage;
return this.rows.slice(start, end);
},
},
JSON
[
{
"Id": 1,
"Nev": "László",
"Jogosultsagok": [
{
"Id": 1,
"Nev": "Módosítás"
},
{
"Id": 2,
"Nev": "Olvasás"
}
],
"Eletkor": 25,
"Regisztralt": "2019-01-31 06:45:51.557Z",
"Munkahely": {
"Id": 12,
"Nev": "Cég 1"
}
},
{
"Id": 2,
"Nev": "Péter",
"Jogosultsagok": [
{
"Id": 2,
"Nev": "Olvasás"
}
],
"Eletkor": 44,
"Regisztralt": "2011-01-31 09:23:51.234Z",
"Munkahely": {
"Id": 34,
"Nev": "Cég 2"
}
},
...
I get this error: TypeError: Cannot read property 'Nev' of undefined
The problem occures because the JSON response is not consistent:
row.Jogosultsagok[1] is not always defined as the nested Array sometimes only contains one element.
You can fix the error by leaving the table cell empty in case the value is missing:
<template>
<tbody>
<tr v-for="row in get_rows()">
<td>{{row.Id}}</td>
<td>{{row.Nev}}</td>
<td>{{row.Jogosultsagok[0].Nev}}</td>
<td v-if="row.Jogosultsagok[1]">{{row.Jogosultsagok[1].Nev}}</td>
<td v-else></td>
</tr>
</tbody>
</template>

Get DataTables to output an array of objects in appropriate columns

I'm working on a chemicals database web application. Using DataTables 1.10.16 and CakePHP 3.5
Cake is producing a JSON feed. A sample is below:
[
{
"id": 1,
"app_id": "ID000001",
"name": "Chromium",
"ecs": [
{
"id": 1,
"value": "123-456-7"
},
{
"id": 32,
"value": "222-333-444"
},
],
"cas": [
{
"id": 1,
"value": "987-654-3"
}
]
},
]
For certain chemicals there are multiple EC (ecs in the JSON) and CAS Numbers (cas in the JSON).
I don't know if/how it's possible to get DataTables to loop through these objects, outputting them in the appropriate columns, with a separator such as a <br> tag.
My table markup looks like this:
<table id="substancesTable" class="table responsive display table-striped" cellspacing="0" width="100%">
<thead>
<tr>
<th>Application ID</th>
<th>EC Number</th>
<th>CAS Number</th>
<th>Chemical Name</th>
</tr>
</thead>
</table>
And in my Javascript I'm doing this:
$('#substancesTable').DataTable({
"processing": true,
"serverSide": true,
"searching": false,
"ajax": {
"url" : "/get-substances.json",
"method" : "POST",
"dataSrc":""
},
"columns": [
{ "data": "app_id", "name" : "app_id" },
{ "data": "ecs", "name" : "ec_number" },
{ "data": "cas", "name" : "cas_number" },
{ "data": "name", "name" : "name" },
]
});
This works in terms of populating the "Application ID" and "Chemical Name" columns - but that's because there is a simple 1:1 mapping in the JSON (no arrays/objects).
The output for the "EC Number" and "CAS Number" columns is just [object Object] and is repeated the number of objects there are. In the example above there are 2 EC Numbers for this chemical so the output under "EC Number" is [object Object],[object Object]
Can anyone assist with this? I'd like the output to be generated by looping through my JSON and introducing a break between each item, e.g.
123-456-7<br>222-333-444
You'll be needing a render function like this:
{
"data": "ecs",
"name": "ec_number",
"title":"EC Number",
"render": function(d,t,r){
return d.map(function(e) {
return e.value;
}).join("<br/>");
}
}
Working JSFiddle here.

DataTables ajax on nested data

I am using DataTables ajax to fill a table. I was following this example and it works if my json looks like their example, however my 'data' is a nested object in my json and then it is not able to fill the table because fails in getting the values from the json.
This json works:
{
"data": [
{"id": "myid1", "name": "name1"},
{"id": "myid2", "name": "name2"}
]
}
But my json looks like this, and it does not work
{
"result": {
"data": [
{"id": "myid1", "name": "name1"},
{"id": "myid2", "name": "name2"}
]
}
}
That's my html (which works with the first json):
<table id="myTable" class="tabletable-bordered dataTable">
<thead>
<tr>
<th>name</th>
<th>id</th>
</tr>
</thead>
<tbody>
<td></td>
<td></td>
</tbody>
</table>
And that's my js:
$('#myTable').DataTable( {
"ajax": "/names",
"processing": true,
"dataSrc" : "result.data",
"columns": [
{ "data": "name" },
{ "data": "id" }
]
} );
As you can see I try to access to my nested data by setting dataSrc to result.data, but nothing is shown in the table.
I cannot change the format of the json response, do you know if then is not possible to use DataTables ajax with this json? Thanks!
MY SOLUTION
Finally (before getting an answer to my post) I went with the following solution, I first make an ajax call and then on success I create my DataTable.
so I only changed my js to this one:
$.ajax({
type: "GET",
url: '/names',
dataType: "json",
contentType: "application/json; charset=utf-8",
success: function (data) {
var myData = data.result.data;
$('#myTable').DataTable({
"data": myData,
"columns": [
{ "data": "id" },
{ "data": "name"},
]
});
}
});
I had more complex processing requirements so I implemented my own ajax function but I think you can get away with this:
$('#myTable').DataTable( {
"processing": true,
"ajax": {
"url": "/names",
"dataSrc" : function(jsonObj) {
// Just being safe here
if(!jsonObj.results || !json.results.data) {
return [];
}
return jsonObj.results.data;
}
},
"columns": [
{ "data": "name" },
{ "data": "id" }
]
});
Here is the reference for this: https://datatables.net/reference/option/ajax

Angular.js - Nested JSON scope with Angular

{
"imports": {
"imported": [
{
"date": "19/9/2014",
"item": [
{
"sn": "3366698",
"type": "Food",
"weight": "10tn."
},
{
"sn": "3366699",
"type": "Eqipment",
"weight": "20kg."
}
]
},
{
"date": "20/9/2014",
"item": [
{
"sn": "3366700",
"type": "Electronics",
"weight": "100pt."
},
{
"sn": "3366701",
"type": "Food",
"weight": "5tn."
}
]
}
]
}
}
I have this json and I am not sure if it's in the right structure. I am trying to render each item type (duplicates included) as table header by the following $.getJSON method:
$scope.items = data.imports.item;
and HTML as:
<table border="1" >
<thead>
<tr>
<th ng-repeat="item in items">{{item.type}}</th>
</tr>
</thead>
</table>
But I couldn't succeed. What am I doing wrong?
EDIT: jsfiddler
I don't see you are using the imported propery at all, try
$scope.items = data.imports.imported;
since imported is your array and not item.
<table border="1" >
<thead>
<tr>
<th ng-repeat="item in items">{{item.type}}</th>
</tr>
</thead>
</table>
Your json ist broken, paste your json here:
http://jsonformatter.curiousconcept.com/
You'll see that data.imports.item would be undefined.
Correct JSON to access would look like:
{
"imports": {
"item": [
{
"sn": "3366698",
"type": "Food",
"weight": "10tn."
},
{
"sn": "3366699",
"type": "Eqipment",
"weight": "20kg."
}
]
}
}
Also access your data after:
<th ng-repeat="item in items">
{{item["type"]}}
</th>