Happy Evening All,
I am trying to add formatting to the data that was collected in MySql and display with its corresponding array value.
MySql
name, age, gender (1=M, 0=F)
Max, 18, 1
Current DataTable Display
Max, 18, 1
DataTable (desired version)
Max, 18, M
How to add array to datatable serverside php. Also tried using Formatter - unable to get the desired display. Any help would be greatful.
something tried at my end does't work.
array( 'db' => 'gender', $arrayName('dt') => 8 ),
Thanks,
you can define each column :
$('#table').DataTable({
"columns": [
{
"title": "gender.",
"data": "gender",
"render": function (data, type, row) {
return data ? "M" : "F";
}
}
]
});
Complete Working solution :)
<script type="text/javascript">
$(document).ready(function() {
var genderValue = [
"Female", //0
"Male", // 1
];
$('#example').DataTable( {
"processing": true,
"serverSide": true,
"ajax": "scripts/server_processing.php",
"columns": [
{ data : gender,
render: function (data, type, row) {
return genderValue[data]
}},
]
} );
} );
</script>
Related
I'm trying to convert an existing "select" dropdown filter on a table generated via the DataTables library to be able to handle multiple options, and though I think I have it correct on the front-end Javascript, I'm having trouble figuring out how to handle it in the back-end PHP.
The below is from the script in the front-end view, which makes the Ajax Post request:
<script>
function generateTable() {
var oTable = $('#MyData').dataTable({
"aaSorting": [
[1, "desc"]
],
"aLengthMenu": [
[10, 25, 50, 100, 200],
[10, 25, 50, 100, 200]
],
"iDisplayLength": <?= $Settings->rows_per_page ?>,
'bProcessing': true,
'bServerSide': true,
'sAjaxSource': '/my/getData/path',
'fnServerData': function(sSource, aoData, fnCallback) {
// ...SNIP...
aoData.push({
"name": "some_status",
"value": $("#some_status").val()
});
$.ajax({
'dataType': 'json',
'type': 'POST',
'url': sSource,
'data': aoData,
'success': fnCallback
});
},
"aoColumns": [],
}).fnSetFilteringDelay().dtFilter([
// ...SNIP...
{
column_number: 4,
filter_default_label: "[<?= lang('some_status'); ?>]",
filter_type: "multi_select",
data: []
},
// ...SNIP...
], "footer");
}
</script>
I can confirm that the selected values are added to an array by console logging the $("#some_status").val(). So my assumption was that it would be passed to the backend as an array as well, but apparently not.
What actually happens is the first selection goes fine, but any subsequent selection clears the table, and only works if there's a single value selected, leaving me to believe that only the first selection is pushed to the aoData array.
In PHP I have:
$this->load->library('datatables');
$this->datatables
->select("id, date, reference_no, supplier, some_status")
->from('purchases');
$some_status = $this->input->post('some_status');
if ($some_status != '') {
$this->datatables->where('status', $some_status);
}
How do I handle the some_status value if it's an array, or how do I make sure it even is an array after it was pushed toaoData?
Any help will be appreciated!
EDIT:
To clarify, by console logging the result like below returns the correct selection as I add and remove selections from the multi-select dropdown:
console.log($("#some_status").val());
If I select "Top option" from the dropdown, I get:
[
"top_option"
]
When I then select "Another option" as well, I get:
[
"top_option", "another_option"
]
So the JS side is handling the multi-select, but I don't know if the below is correct, as it works only with a single select, nothing more:
$some_status = $this->input->post('some_status');
if ($some_status != '') {
$this->datatables->where('status', $some_status);
}
I'm fresh, but I'm learning with the help of people like you :). I need to do a table on my site that will display sorted data by type and pagination. I thought to use this solution: https://legacy.datatables.net/examples/data_sources/server_side.html
But honestly, I do not know how to do this. Can someone give an example along with html how to do it? Or suggest a different solution?
First of you need to import some of the necessary files:
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
CSS :
<link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet">
Then using the id attribute of the table you have created use the following code :
var table = $('#myTable').DataTable(); // this creates a table object of the DataTable class
// myTable is the id of the table you have created
table.clear().draw();
table.destroy();
$.ajax({
url: 'abc.php',
type: 'POST',
data: {value:value},//value you want to send to backend
dataType: 'json',
success:function(result){
$('#myTable').DataTable( {
"pageLength": 10, // does pagination providing 10 records per page
"destroy": true,
"language": {
"zeroRecords": "No Data Found",
"infoEmpty": "No Data Found",
},
"ajax": "objects.txt",
// Data from backend is sent to objects.txt file in JSON format
"columns": [
{ "data": "Key value from backend for 1st column in table" },
{ "data": "Key value from backend for 2nd column in table" },
{ "data": "Key value from backend for 3rd column in table" },
{ "data": "Key value from backend for 4th column in table"},
{ "data": "Key value from backend for 5th column in table" },
{ "data": "Key value from backend for 6th column in table" }
]
});
},
error: function (xhr, ajaxOptions, thrownError) {
alert("readyState: "+xhr.readyState+"\nstatus: "+xhr.status);
alert("responseText: "+xhr.responseText);
}
});
You could import more datatable javascripts that can provide more functionality such as conversion of table data to pdf or export as an excel file using button datatable javascripts. You can find more related information here : https://cdn.datatables.net/
I have a Datatable which is a project list and i want to sort the date column into descending.
It works but it sorts only the day.
What I want is the last added project to come first.
My script is:
<script>
$(function(){
/* Initialize Bootstrap Datatables Integration */
App.datatables();
/* Initialize Datatables */
$('#manage-table').dataTable({
"aoColumnDefs": [ { "bSortable": false, "aTargets": [ 0 ] } ],
"iDisplayLength": 10,
"aLengthMenu": [[10, 20, -1], [10, 20, "All"]],
"aaSorting": [[ 3, "desc" ]] //date column
});
/* Add placeholder attribute to the search input */
$('.dataTables_filter input').attr('placeholder', 'Search');
});
</script>
You need to extend DataTables sorting functionality to sort dates in format DD-MM-YYYY. Judging from your initialization code, most likely you're using DataTables 1.9.x.
See updated code below, I omitted the code that hasn't been changed:
jQuery.extend(jQuery.fn.dataTableExt.oSort, {
"date-uk2-pre": function (a) {
if (a == null || a == "") {
return 0;
}
var ukDatea = a.split('-');
return (ukDatea[2] + ukDatea[1] + ukDatea[0]) * 1;
},
"date-uk2-asc": function (a, b) {
return ((a < b) ? -1 : ((a > b) ? 1 : 0));
},
"date-uk2-desc": function (a, b) {
return ((a < b) ? 1 : ((a > b) ? -1 : 0));
}
});
/* Initialize Datatables */
$('#manage-table').dataTable({
"aoColumnDefs": [
{ "bSortable": false, "aTargets": [ 0 ] },
{ "sType": "date-uk2", "aTargets": [ 3 ] }
],
"iDisplayLength": 10,
"aLengthMenu": [[10, 20, -1], [10, 20, "All"]],
"aaSorting": [[ 3, "desc" ]] //date column
});
I have modified original date_uk sorting plug-in to sort by DD-MM-YYYY instead of DD/MM/YYYY.
See DataTables 1.9.x date_uk sorting plug-in or DataTables 1.10.x date_uk sorting plug-in for more information.
I am trying to use javascript Highcharts to display a chart of rankings from JSON data. I can't seem to get the chart to display.
This is the javascript code:
$(document).ready(function() {
var options = {
chart: {
renderTo: 'drawing',
zoomType: 'x',
width: 900,
height: 222
},
exporting: {
enabled:true
},
title: {
text: url+' - '+keyword
},
credits: {
text: '****',
href: 'http://***/'
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
day: '%b %e '
}
},
yAxis: [{
//min: 1,
allowDecimals: false,
reversed: true,
///: .2,
//maxPadding: .2,
title: {
text: 'Rankings'
}
},],
tooltip: {
crosshairs: true,
shared: true
},
series: [{}]
};
var url = "http://*******/chart.php";
$.getJSON(url, function(data) {
$.each(data, function(arrayID,group) {
$.each(group.data, function(id,val) {
arg = val[0].replace(/Date.UTC\((.*?)\)/, '$1').split(',');
var timestamp = Date.UTC.apply( null , arg );
date=new Date(timestamp);
data[arrayID].data[id][0] = timestamp;
});
});
options.series[0].data = data;
var chart = new Highcharts.Chart(options);
});
});
Our PHP Script gives us this JSON:
[{"name":"Google Rank","data":[["Date.UTC(2013,04,05)","23"],["Date.UTC(2013,04,04)","23"],["Date.UTC(2013,04,03)","22"],["Date.UTC(2013,04,02)","24"],["Date.UTC(2013,04,01)","26"],["Date.UTC(2013,03,31)","24"],["Date.UTC(2013,03,30)","24"],["Date.UTC(2013,03,29)","25"],["Date.UTC(2013,03,28)","25"],["Date.UTC(2013,03,27)","25"],["Date.UTC(2013,03,26)","26"],["Date.UTC(2013,03,25)","25"],["Date.UTC(2013,03,24)","24"],["Date.UTC(2013,03,23)","-"],["Date.UTC(2013,03,22)","10"],["Date.UTC(2013,03,21)","10"],["Date.UTC(2013,03,20)","10"],["Date.UTC(2013,03,19)","10"],["Date.UTC(2013,03,18)","10"],["Date.UTC(2013,03,17)","10"],["Date.UTC(2013,03,16)","9"],["Date.UTC(2013,03,15)","9"],["Date.UTC(2013,03,14)","9"],["Date.UTC(2013,03,13)","9"],["Date.UTC(2013,03,12)","9"]],"visible":"true","pointInterval":"86400000","showInLegend":"false"},{"name":"Bing Rank","data":["Date.UTC(2013,2,9)",9],"visible":"true","pointInterval":"86400000","showInLegend":"false"}]
Note the JSON data represents numbers as strings which could be a problem.
PHP Code which generates the JSON data:
$googledata = array();
while($gkdata = mysql_fetch_assoc($keywordquery)){
$explodedate = explode("-", $gkdata['date']);
$year = $explodedate[0];
$month = $explodedate[1];
$day = $explodedate[2];
$googledata[] = array(
"".$year.",".$month.",".$day."",
$gkdata['grank'] //$gkdata['grank'] should be a number, but is sometimes a dash so it's cast to an accommodating datatype: string.
);
}
$chartdata = array(
array(
"name" => 'Google Rank',
"data" => $googledata,
"visible" => 'true',
"pointInterval" => '86400000',
"showInLegend" => 'false',
),
array(
"name" => 'Bing Rank',
"data" => array(
'Date.UTC(2013,2,9)',
9
),
"visible" => 'true',
"pointInterval" => '86400000',
"showInLegend" => 'false',
)
);
The Highcharts won't display anything other than the chart itself with no data. The Date.UTC(2013,03,12) is supposed to go on the X-Axis & the number next to it is supposed to be the rank number. Can anyone see what is wrong?
The chart takes data as [x,y]. You just need to reverse the order of your data to ['value',datestamp'] if you want the date to be on the y axis.
Edit:
I am not sure from the text what the problem you are having is, but one problem that will arise from your code is that your number data values are being returned as strings, in quotes.
You will need to cast them as integers in your php before json encoding in order for them to come through unquoted, as integers.
You should be seeing an error from this: http://www.highcharts.com/errors/14
You are expecting $gkdata['grank'] to always return a number, it sometimes returns a dash -. The Array Object is using the datatype which best represents the data, and it chooses string. If you want to force it as int, you'll have to use a data structure that only allows integers to be put in it. Then it will puke when you try to put in a dash, which it should be doing, because how do you plot a DASH on a chart?
Had you taken off your blindfold, and looked at the error HighCharts returned to you, you would see this:
Highcharts Error #14 String value sent to series.data, expected Number
This happens if you pass in a string as a data point, for example in a setup like this:
series: [{
data: ["3", "5", "1", "6"]
}]
Highcharts expects the data values to be numbers. The most common reason for this is that data is parsed from CSV or from a XML source, and the implementer forgot to run parseFloat on the parsed value.
For performance reasons internal type casting is not performed, and only the first value is checked (since 2.3).
So fix your code to make grank always a number. HighCharts won't plot strings for performance reasons.
Hello StackOverFlow nation . I'm trying to add information to jqGrid , which is retrieved from MySQL database. I've two files => index.html and data.php (both in the same directory)
index.html source =>
<script type="text/javascript">
$(function(){
$("#jqGrid_tb").jqGrid({
url: "data.php",
datatype: "json",
sortable: true,
height: "auto",
colNames: ["Name","Surname","Birth Year","Famous Film"],
colModel: [
{name: "name", index: "name", width: "150"},
{name: "surname", index: "surname", width: "150"},
{name: "b_year", index: "year", width: "150"},
{name: "film", index: "film", width: "200"}
],
rowNum: 5,
rowList: [5,10,15],
viewrecords: true,
pager: $("#pager"),
caption: "Famous Actors",
}).navGrid("#pager");
});
</script>
<div id="grid">
<table id="jqGrid_tb"></table>
<div id="pager"></div>
</div>
data.php source =>
include ("JSON.php");
$json = new Services_JSON();
$con = new mysqli("host","user","pswd","db");
if (!$con->connect_errno){
if ($r = $con->query("SELECT * FROM actors")){
while ($row = $r->fetch_assoc()){
$info[] = array(
"name" => $row[name],
"surname" => $row[surname],
"b_year" => $row[b_year],
"film" => $row[film],
);
}
$r->free();
}
}
echo $json->encode($info);
if (isset($con)){
$con->close();
}
jqGrid is shown without any information in index.html file , also when opening data.php file information is successfully encoded into JSON format , whats wrong I can't understand . Please help , thanks ...
Your response format is wrong. You can go to jqGrid Demos page where you will find a sample for PHP/MySQL after expanding Loading Data and then choosing JSON Data.
The proper format of data should look like this:
{
"total": "1",
"page": "1",
"records": "2",
"rows": [
{ "name": "Robert", "surname": "De Niro", "b_year": "1943", "film": "Once Upon A Time In America" },
{ "name": "Al", "surname": "Pacino", "b_year":"1971", "film": "Scent Of A Woman"}
]
}
Where:
total --> total count of pages
page --> current page number
records --> total count of records
rows --> the rows of data
Also if you want rows to be objects, you need to disable repeatitems in jqGrid jsonReader options:
$("#jqGrid_tb").jqGrid({
...
jsonReader: { repeatitems: false }
});
It is also adviced for rows to have unique id for later reference.
You should include
jsonReader: {
repeatitems: false,
root: function (obj) { return obj; },
page: function (obj) { return 1; },
total: function (obj) { return 1; },
records: function (obj) { return obj.length; }
}
as additional option of jqGrid is you don't want to change format of input data. Moreover you should specify which values should assign jqGrid as id attribute of the row. You can include additional id property as additional property of every returned item or you can add key: true property to the column (in colModel) which contains unique values. For example if you can guarantied that the values from "name" are already unique then you can include key: true property in definition of "name" column.
Additionally you can consider to use loadonce: true option of jqGrid. In the case the full data of the grid will be loaded at once and the sorting, paging and searching (filtering) of data will be implemented by jqGrid on the client side without needs to implement some additional code on the server side. You should don't use the option in case of large number of rows (many hundred or many thousand rows) in the grid.