I am using jQuery datatable in my php code.
my server server-side processing script here
$columns = array(
array( 'db' => 'val1', 'dt' => 0 ),
array( 'db' => 'val2', 'dt' => 1 ),
);
here problem is that how i get another unbound column val3
which have value of val1+val2 .
Example :
val1 val2 val3
1 2 3
3 5 8
here val1 and val2 is database column and val3 is calculated column.
I am stuck right now that how to add val3 column from server-side script.
Any help is appreciated.
You need to write DB query from server side for getting 3rd column.
Client side keep 3 columns table code (html)
<table class="table results" border="1">
<thead>
<tr>
<th>val1</th>
<th>val2</th>
<th>val3</th>
</tr>
</thead>
</table>
Client side define 3 columns (jquery datatable)
results= $(".results").dataTable({
aLengthMenu: [ [10, 25, 50, 100, 150, "-1"], [10, 25, 50, 100, 150, "All"] ],
iDisplayLength: 10,
searching: true,
"aaSorting": [],
"order": [[ 0, "desc" ]],
"sPaginationType": "full_numbers",
"bProcessing": true,
"serverSide": true,
"bDestroy": true,
"cache": false,
"sAjaxSource": "<?php echo $serverside_php; ?>",
"sDom": 'T<>lfrtip',
"oTableTools": {
"sRowSelect": "os",
"aButtons": [ "select_all", "select_none" ]
},
"aoColumnDefs": [
{ "bSortable": false },
{ "data": "val1" },
{ "data": "val2" },
{ "data": "val3" },
],
});
Feed the server side response data to client datatable + html
Related
I'm using "bSortable": false and "orderable": false but still sort asc icon visible in first column header. I have tried "bsort":false and "orderable": false, "targets": "_all" but still the icon is visible.
If i use "aaSorting":[] this it throws
Undefined variable: orderColumn
Mycode:
var test_table = $('#testDataTable').DataTable({
// "lengthMenu": [[10, 50, 100,150,200], [10, 50, 100,150,200]],
"lengthMenu": [[25, 50, 100], [25, 50, 100]],
"iDisplayLength": 25,
"sScrollX" : "100%",
"scrollX" : true,
"processing" : true,
"serverSide" : true,
"destroy":true,
"ajax" : {
url: "/test/datatable.php",
type: 'POST',
data: { status: 'ok' }
},
'columnDefs' : [{"searchable": true, "orderable": false, "targets": '_all' }, {"width": "12%", 'targets': [3,4,5] }]
});
Thanks in advance.
Change your code to this:
For me this works all the time ;)
var test_table = $('#testDataTable').DataTable({
// "lengthMenu": [[10, 50, 100,150,200], [10, 50, 100,150,200]],
"lengthMenu": [[25, 50, 100], [25, 50, 100]],
"iDisplayLength": 25,
"sScrollX" : "100%",
"scrollX" : true,
"processing" : true,
"serverSide" : true,
"destroy":true,
"ajax" : {
url: "/test/datatable.php",
type: 'POST',
data: { status: 'ok' }
},
"aoColumnDefs": [{ "bSortable": false, "aTargets": [ "_all" ] }],
"aaSorting": []
});
Situation
I am unable to disable sorting on some colums eventhough im using the 'right' code. I have seen several StackOverflow post and tried the answers. nothing seems to work and I keep getting the same error in my console.
SyntaxError: missing } after property list
"aoColumnDefs": [
//or
SyntaxError: missing } after property list
"columnDefs": [ {
Code
$('#tblMarkers').DataTable({
paging: false,
searching: false,
info: false
"columnDefs": [ {
"targets": 3,
"orderable": false
} ]
});
EDIT: I was missing a comma...
But another Question... how can I do multiple targets?
I use something like this for this purpose;
$('#tblMarkers').dataTable({
"aaSorting": [],
"aoColumns": [
null,null,{ "bSortable": false }
]
});
Null refers to default and { "bSortable": false } makes the column unsortable.
Note: This is a 3 column table with last column unsortable.
Your tried
$('#tblMarkers').DataTable({
paging: false,
searching: false,
info: false,
"columnDefs": [ {
"targets": 3,
"orderable": false
} ]
);
Multiple targets are simply an array of indexes. This works for me:
source doc
$('#data_table').DataTable({
"columnDefs": [
{ "orderable": false, "targets": [0, 4, 5, 6] },
{ "orderable": true, "targets": [1, 2, 3] }
]
});
I want to send whole json array on a link so i have to send whole json array on right move ? because in it's format they give us a json_array format.
Below is the json array of rightmove,
Json Array ,
{
"network":{
"network_id": 5
},
"branch":{
"branch_id": 1566,
"channel": 1,
"overseas": false
},
"property":{
"agent_ref": "02072013_0406",
"published": true,
"property_type": 2,
"status": 1,
"new_home": false,
"student_property": false,
"create_date": "02-07-2013 00:00:00",
"update_date": "02-07-2013 00:00:00",
"date_available": "02-07-2013 00:00:00",
"contract_months": 12,
"minimum_term": 12,
"let_type": 1,
"address":{
"house_name_number": "33",
"address_2": "Rightmove",
"address_3": "4th Floor",
"address_4": "Soho Square",
"town": "London",
"postcode_1": "W1D",
"postcode_2": "3QU",
"display_address": "Soho Square",
"latitude": 51.514899,
"longitude": -0.132587,
"pov_latitude": 51.51482,
"pov_longitude": -0.13249,
"pov_pitch": -16.78,
"pov_heading": 235.75,
"pov_zoom": 0
},
"price_information":{
"price": 1500,
"price_qualifier": 0,
"deposit": 1000,
"administration_fee": "100",
"rent_frequency": 1,
"tenure_type": 1,
"auction": false,
"tenure_unexpired_years": 999,
"price_per_unit_area": 10
},
"details":{
"summary": "Rightmove Test Property",
"description": "Testing full property schema with all the fields in the call for JSON",
"features": [
"Has own Drive",
"Garage included",
"Double Glazed"
],
"bedrooms": 2,
"bathrooms": 2,
"reception_rooms": 1,
"parking": [13],
"outside_space": [29],
"year_built": 999,
"internal_area": 100,
"internal_area_unit": 1,
"land_area": 100,
"land_area_unit": 1,
"floors": 5,
"entrance_floor": 1,
"condition": 1,
"accessibility": [42],
"heating": [1],
"furnished_type": 0,
"pets_allowed": true,
"smokers_considered": true,
"housing_benefit_considered": true,
"sharers_considered": true,
"burglar_alarm": true,
"washing_machine": true,
"dishwasher": true,
"all_bills_inc": true,
"water_bill_inc": true,
"gas_bill_inc": true,
"electricity_bill_inc": true,
"tv_licence_inc": true,
"sat_cable_tv_bill_inc": true,
"internet_bill_inc": true,
"business_for_sale": true,
"comm_use_class":[1,4],
"rooms": [ {
"room_name": "room1",
"room_description": "room1" ,
"room_length": 10.10,
"room_width": 20.20,
"room_dimension_unit": 5,
"room_photo_urls": ["http://www.rightmove.com/image1.JPG"]
} ]
},
"media": [ {
"media_type":1,
"media_url":"www.rightmove.com/image1.JPG",
"caption":"This is an image",
"sort_order":1,
"media_update_date": "02-07-2013 12:12:12"
} ],
"principal": {
"principal_email_address": "principal#rightmove.co.uk",
"auto_email_when_live": true,
"auto_email_updates": true
}
}
}
I got every thing each and every parameter of it.
Now, rightmove api use post method and url is,
https://adfapi.rightmove.co.uk/v1/property/sendpropertydetails
So i'm trying to send json data to rightmove but it's showing me error. I have stored whole json Array in to $json_array.
jQuery.ajax({
url: 'https://adfapi.rightmove.co.uk/v1/property/sendpropertydetails/',
type : "POST",
crossDomain: true,
dataType: "jsonp",
data: {data : <?php echo $json_array; ?>},
success: function(data) {
alert(data);
}
});
});
I have also added in header but it shows me 403 error.
EDIT with error : it showing failure in response but in localhost i got response in local file so i think ajax call is working properly.
The problem is that the "print_r" funktion isnt creating a JSON-Objekt
As explained on php.net
<?php
$a = array ('a' => 'apple', 'b' => 'banana', 'c' => array ('x','y', 'z'));
print_r ($a);
?>
Would create
Array
(
[a] => apple
[b] => banana
[c] => Array
(
[0] => x
[1] => y
[2] => z
)
)
The solution is to use json_encode instead of print_r
so you only have to change
data : {data :<?php print_r($json_array); ?> }
to
data : {data :<?php json_encode($json_array); ?> },
I am assuming your javascript is generated each time in your PHP script as you dynamically build the webpage!
If your $json_array variable is already a JSON String, like the JOSNString you show above this is wrong
data : {data :<?php print_r($json_array); ?> },
and should be
data : {data :<?php echo $json_array; ?> },
If the data is held in a php array i.e. not already a JSONString then you should do
data : {data :<?php json_encode($json_array); ?> },
JavaScript code:
$('document').ready(function() {
$('#payment_detailsview').dataTable({
"oLanguage": {
"oPaginate": {
"sPrevious": "",
"sNext": ""
}
},
"iDisplayLength": 25,
"pagingType": "full_numbers",
"bLengthChange": false,
"order": [[ 2, 'desc' ]],
"aLengthMenu": [
[5, 10, 25, 50, -1],
[5, 10, 25, 50, "All"]
],
In third colunmn, I had last name but it doesn't support for "order": [[ 2, 'desc' ]]. What should I do?
It looks good to me. The only thing I can see is to change the 2 to a 1:
"order": [[ 1, 'desc' ]],
since the index starts at 0 your second column will be 1. use desc or asc
is there anyway to search the columns only second col without using filter?
i've tried using:
"aoColumnDefs": [
{ "bSearchable": false, "aTargets": [ 1 ] }]
"searchCols":[null, {"search":""}, null]
here is my complete script:
$(document).ready(function(){
oTable = $("#roles").dataTable({
"processing":"true",
"serverSide": "true",
"ajax": "roles",
"columns":[
{data: 'id', name:'id'},
{data: 'name', name:'name'},
{data: 'link', name:'link'}
{data: 'actions', name:'actions'}
],
"oClasses": {
"sFilter": "pull-right",
"sFilterInput": "form-control input-rounded ml-sm"
},
"Dom": "<'row'<'col-md-6 hidden-xs'l><'col-md-6'f>r>t<'row'<'col-md-6'i><'col-md-6'p>>",
"oLanguage": {
"sLengthMenu": "_MENU_",
"sInfo": "Showing <strong>_START_ to _END_</strong> of _TOTAL_ entries"
},
"searchCols":[null, {"search":""}, null]
});
});
is there anyway so i can only filter name column without using footer filter?
because if i not specific a column to be filter, when i tried to search it will get an error because there is actions column.