Develop Reference

Post Data in php using datatables javascript serverside

i am trying to create a filter function from my datatables, how can i post the value that i want coming from the javascript to php using the datatables function?
here is my sample code from my datatables
var oTable = $('#datatables').DataTable({
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": base_url + "link",
"fnServerParams": function (data) {
data.filter_start_date = $('#filter_start_date').val();
console.log(data);
},
dom: 'lBfrtip',
buttons: [
'excel'
],
"lengthMenu": [[10, 20, 50, 100, 300, -1], [10, 20, 50, 100, 300, "All"]],
"pagingType": "full_numbers",
"language": {
"paginate": {
"previous": 'Prev',
"next": 'Next',
}
},
"bAutoWidth": false,
"aaSorting": [[ 0, "desc" ]],
});
and the data.filter_start_date value is i want it to be post from my php. thank you in advance, i am just really stuck with this problem or am i just doing it wrong.

On php you will get a param filter_start_date which will be sent on every datatables ajax request. Just use it to filter your results.
And in javascript you can do something like this to reload the table
$('#filter_start_date').change(function() {
oTable.ajax.reload();
});
EDIT:
Here's exactly how I use it:
$('#table').DataTable({
//configs
ajax: {
url: baseUrl('/ajax/load-docs'),
type: 'post',
data: function(d) {
d.initial_date = $('#initial_date').val();
}
}
});
and in php
$date = $this->getParam('initial_date'); //getParam from Zend_Framework Controller
in your case you can use $_POST['filter_start_date']

Integrate two requests into one Javascript

$("input[type='checkbox']").on("change",function(){
if($(this).is(":checked")){
$.ajax({
url: portfolio_data_url,
type: 'POST',
data: "id="+$(this).val(),
success:function(r){
// succcess call
}
})
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<form>
<div><input type="checkbox" value="0" checked>All</div>
<div><input type="checkbox" value="1">AppID</div>
<div><input type="checkbox" value="2">Vendor</div>
</form>
I have several checkboxes whose values are passed using a POST request. If one checkbox is selected, the value is passed to the POST request.
But I already have code that passes POST requests:
list.js
$(function () {
var table = $("#portfolio").DataTable({
"ajax": {
"url": portfolio_data_url,
"type": "POST"
},
lengthMenu: [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]],
"stateSave": true,
"processing": true,
"serverSide": true,
"deferRender": true,
"language": datatables_language,
"order": [[ $(".portfolio thead th").index($(".portfolio thead .appid")), "desc" ]],
"columnDefs": [
{
"searchable": false,
"orderable": false,
"targets": "no-sort"
}
]
})
});
How can I integrate the code into the list.js for everything to go with one query.
Because now two different requests are sent which lead to incorrect output of information.

You can use .DataTable function to send checkboxes checked value in one request like below:
Try this:
$(function () {
var table = $("#portfolio").DataTable({
"ajax": {
"url": portfolio_data_url,
"type": "POST",
"data": function(d){
var ids = $('input:checkbox:checked').map(function(){
return this.value;
}).get();
d.ids = ids;
}
},
lengthMenu: [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]],
"stateSave": true,
"processing": true,
"serverSide": true,
"deferRender": true,
"language": datatables_language,
"order": [[ $(".portfolio thead th").index($(".portfolio thead .appid")), "desc" ]],
"columnDefs": [
{
"searchable": false,
"orderable": false,
"targets": "no-sort"
}
]
})
});
In Datatable Using the data parameter as a function allows the additional data to send to server
Official Documentation
Note: You will get checked checkboxes value as an array, You can use .join(',') after .get() to send values as comma separated string to use directly in query
Also, when user check any checkbox then we can refresh datatable ajax to send updated checked checkboxes like below:
$("input[type='checkbox']").on("change",function(){
table.ajax.reload();
});

It looks like the ajax function youy want to re-use is of DataTable's.
It's not a good idea to use the ajax function which is used by some other plugin.
Here the Ajax call you want to Re-Use is used by the function DataTable. Instead of re-using that you can create a wrap-up function which makes ajax request.
Every-time if you want to make ajax request you can call that function with specified parameters.
Example :
function customAjax(url,data,method,success_message,fail_message){
$.ajax({
url:url,
data:data,
method:method,
success:function(response){
alert(success_message);
},
error:function(response){
alert(fail_message);
}
});
}
And call using :
customAjax("xyx.php","username=abc&password=ushfush","POST","Login Successfull","Something went wrong");

Hide columns not working properly with server side processing in jquery datatables

I am using jquery datatables(1.10.9) with server side processing.
tab = $('#'+div).dataTable( {
"sDom": 'T<"clear">frltip',
"aaSorting": [],
"bAutoWidth" : false,
"sPaginationType": "full_numbers",
"sScrollY": "550px",
"sScrollX": "100%",
"bFilter": true,
"aoColumnDefs": [{ "bSearchable": false, "aTargets": [ 2 ] },{ "bSortable": false, "bSearchable": false, "aTargets": [ 12 ] },{ "bSortable": false, "bSearchable": false, "aTargets": [ 13 ] }],
"oTableTools": {},
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": 'data/getdata',
"fnServerParams": function ( aoData ) {
},
"fnRowCallback": function( nRow, aData, iDisplayIndex ){
// Processing data like:
// $('td:eq(2)', nRow ).html( 'Test' );
}
});
// Hiding 5th column
tab.fnSetColumnVis( 5, false); //Does not work.Removes the column header but not the row data.
How do I get hide column to work properly with server side processing in jquery datatables?

I got this to work as follows:
fnDrawCallback: function() {
$('td:nth-child(3),th:nth-child(3)').hide();
}]
tab.fnSetColumnVis( 3, false) will not work because it re-fetches the data.Hence, had to do it using simple old jquery.

fnSetColumnVis() function has 3rd property (true or false) that not rebind the data. so try with fnSetColumnVis(3,false,flase) may be it can help.

You do it when you set up the datatable, using "ColumnDefs" thusly, where targets is the number of the column you want to hide:
tab = $('#'+div).dataTable( {
"columnDefs": [{ targets: 5, visible: false }],
"sDom": 'T<"clear">frltip',
"aaSorting": [],
"bAutoWidth" : false,
...
If you have 2 hidden columns, it will look like this:
"columnDefs": [{ targets: 5, visible: false }, { targets: 6, visible: false }],
Note: column numbering starts at 0.

Datatable sorting issue in IE working fine in Chrome

I have column with String type but it holding the value of time in this format dd-MMM-yyyy HH:mm:ss. When i do sorting its working fine in chrome. But in IE its not working. Please could you help us to resolve this issue?
$(document).ready(function () {
dataTestTable = $('#programListId').DataTable(
{
"bPaginate": false,
"bLengthChange": false,
"bFilter": true,
"bInfo": false,
"bSort": true,
"aaSorting": [[0, "asc"]],
"order": [[12, "desc"]],
"paging": true,
"columnDefs": [
{"targets": 0, "render": $.fn.dataTable.render.ellipsis(12, true)},
],
}
);
testTable = dataTestTable;
}
Below code also not working for Sorting
"columnDefs": [
{"targets": 12, "type":'Date'},
...
]

jQuery DataTables fnRender Increment Column

I'm trying to create a row inside my datatable that increments +1 each row. I've been told the easiest way to do this would be using fnRender. Now I've used fnRender to change data that's already in a column from the serverside processor, but never to create a new column alone.
Any help would be awesome!
Here's my current code:
oTable = $('#testingz').dataTable({
"bProcessing": true,
"bServerSide": true,
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"aaSorting": [ [1,'desc'] ],
"sDom": '<""l>rt<"F"fp>',
"sAjaxSource": "server_processing.php",
"aoColumnDefs": [
{
"fnRender": function ( o, val ) {
return '' + o.aData[0] + '';
},
"aTargets": [ 0 ]
}
]
});

Do you mean something like this: http://datatables.net/release-datatables/examples/api/counter_column.html