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']

Getting a Garbage value on Printing a Page in PHP Desktop

I am Printing a invoice I filled with input values for print, After generating Final Invoice I am getting Garbage value not in correct format I have shared Below Image. But if I use Php Desktop on external Browser then Printing a page getting correct value. Thanks in Advance.
This is My json for php Desktop
{
"application": {
"single_instance_guid": "",
"dpi_aware": true
},
"debugging": {
"show_console": false,
"subprocess_show_console": false,
"log_level": "DEBUG4",
"log_file": "debug.log"
},
"main_window": {
"title": "PHP Desktop",
"icon": "",
"default_size": [1024, 768],
"minimum_size": [800, 600],
"maximum_size": [0, 0],
"disable_maximize_button": false,
"center_on_screen": true,
"start_maximized": false,
"start_fullscreen": false,
"print": true
},
"popup_window": {
"icon": "",
"fixed_title": "",
"center_relative_to_parent": true,
"default_size": [1024, 768]
},
"web_server": {
"listen_on": ["127.0.0.1", 0],
"www_directory": "www",
"index_files": ["index.html", "index.php"],
"cgi_interpreter": "php/php-cgi.exe",
"cgi_extensions": ["php"],
"cgi_temp_dir": "",
"404_handler": "/pretty-urls.php"
},
"chrome": {
"log_file": "debug.log",
"log_severity": "default",
"cache_path": "webcache",
"external_drag": true,
"external_navigation": true,
"reload_page_F5": true,
"devtools_F12": true,
"remote_debugging_port": 0,
"command_line_switches": {},
"enable_downloads": true,
"context_menu": {
"enable_menu": true,
"navigation": true,
"print": true,
"view_source": true,
"open_in_external_browser": true,
"devtools": true
}
}
}
The Above json is for PHP Desktop Settings, should I change anything in this json?
Below is my code.
function data() {
var separateDecimal = lclTotal.toString().split('.');
var paisa = parseInt(separateDecimal[1]);
var paisaInt = parseInt(paisa);
$("#txtPrintName").val($("#name").val());
$("#txtPrintAddress").val($("#address").val());
$("#txtPrintMobile").val($("#mobile").val());
}
$(document).on("click", "#print", function (e) {
// $("#supplier-info, #invoice-no, #txtUniqueNo, #delivery-note, #supplier-reference, #txtSupplierRef, #buyer, #buyer-label, #buyer-label, #txtCusName, #txtAddress, #txtGSTIN").printThis({
$("#printCode").printThis({
debug: true, // show the iframe for debugging
importCSS: true, // import page CSS
importStyle: true, // import style tags
printContainer: true, // grab outer container as well as the contents of the selector
loadCSS:"sale.css", // path to additional css file - use an array [] for multiple
pageTitle: "TAX INVOICE", // add title to print page
removeInline: true, // remove all inline styles from print elements
printDelay: 300, // variable print delay; depending on complexity a higher value may be necessary
base: true,
footer: "", // prefix to html
formValues: true // preserve input/form values
});
});

I got Fixed with, I changed version of the PHP Desktop.

jquery data table and sorting columns

I'm using jquery data table to display large amounts of data inside grid. I implemented server side pagination but I'm struggling with sorting data server side.
Below is my datatable initialization, answer with query for sorting is not the subject here, I just need a way to pass information of which column is clicked to the controller, the one upon I will do the sorting.
('#myTable').dataTable({
"processing": true,
"serverSide": true,
"info": false,
"pageLength": 10,
"lengthChange": false,
"stateSave": false,
"bPaginate": true,
"bFilter": false,
"sPaginationType": "full_numbers",
"info": "Page _PAGE_ from _PAGES_",
"infoEmpty": "No data",
"oPaginate": {
"sFirst": "First",
"sPrevious": "Previous",
"sNext": "Next",
"sLast": "Last"
},
"ajax": {
"url": "#string.Format("{0}://{1}{2}", Request.Url.Scheme, Request.Url.Authority, Url.Content("~"))/MyController/GetData",
"type": "GET",
"data": function (d) {
.....
},
},
preDrawCallback: function (settings) {
...
},
drawCallback: function (settings) {
...
},
"columns": [
{ "data": "Id" },
{ "data": "FirstName" },
{ "data": "LastName" },
{ "data": "Age" }
],
"columnDefs": [
{
targets: [0],
orderable: false
},
{
render: function (data, type, row) {
...
}
],
"order": [[0, "desc"]]
});
public ActionResult GetData(){
var sortColumn = ...
...
}

You can bind the 'order' event like this:
$('#myTable').on( 'order.dt', function () {
var order = table.order();
var column_selected = order[0][0];
var order_way= order[0][1];
doStuff(column_selected ,order_way);
});
See it in plugin reference

By specifying "serverSide": true,, datatables will by default add information to the request which you need to use in your server-side code. If you look in the Firebug Network panel, you will be able to see the request with the querystring parameters. See here for the full list of parameters. Note that the link is to the v1.9 documentation, because that's what it looks like you're using.
So for sorting, you'd be interested in iSortCol_0 and sSortDir_0 which relate to the clicked column and the sort direction respectively.
In your controller method, you would access the parameters like this:
var sortColumnIndex = Convert.ToInt32(Request["iSortCol_0"]);
var sortColumnDir = Request["sSortDir_0"];
You then need to incorporate this, and the other parameters into your query.
Here is an article on using server-side datatables with MVC

Datatables js 1.9.4 pagination and search doesn't work with server side generation

I'm using datatables js 1.9.4 and use their ajax data population capabilities. When I create them in this way pagination shows controls and search bar is there as well, but neither work. Alos the data table is showing all data in one page.
Here is the generation JS:
$("#prop_table").dataTable({
"aaSorting": [[2, "desc" ]],
"sDom": "<'row'<'col-lg-9'l><'col-lg-3'f>r>t<'row'<'col-lg-5'i><'col-lg-7'p>>",
"sPaginationType": "bootstrap",
"bJQueryUI": false,
"bAutoWidth": false,
"aLengthMenu": [[5, 10, 25, -1], [5, 10, 25, "All"]],
"iDisplayLength": 5,
"oLanguage": {
"sSearch": "<span></span> _INPUT_",
"sLengthMenu": "<span>_MENU_</span>",
"oPaginate": { "sFirst": "First", "sLast": "Last" }
},
"bProcessing": true,
"iDisplayLength":5 ,
"bServerSide": true,
"sAjaxSource": "/php/api_prop_down.php",
"aoColumns": [{
"mData":"name"
},{
"mData": "time_down"
},{
"mData": "status_id"
},{
"mData": "button",
"mRender": function(data){
if (data != "null" )
return "<button id=\"prop_issue"+data+"\" issue=\""+data+"\" class=\"btn\" data-toggle=\"modal\" data-target=\"#myModal\" onclick=\"getTicket("+data+")\">"+data+"</button>";
else
return "no ticket";
}
}
]
});
$('.dataTables_length select').uniform();
$('.dataTables_paginate > ul').addClass('pagination');
$('.dataTables_filter>label>input').addClass('form-control');
// Set the classes that TableTools uses to something suitable for Bootstrap
$.extend( true, $.fn.DataTable.TableTools.classes, {
"container": "btn-group",
"buttons": {
"normal": "btn",
"disabled": "btn disabled"
},
"collection": {
"container": "DTTT_dropdown dropdown-menu",
"buttons": {
"normal": "",
"disabled": "disabled"
}
}
} );
// Have the collection use a bootstrap compatible dropdown
$.extend( true, $.fn.DataTable.TableTools.DEFAULTS.oTags, {
"collection": {
"container": "ul",
"button": "li",
"liner": "a"
}
} );
MY server side script returns a JSON, which is an encoded php array:
$output = array("sEcho" => intval($_GET['sEcho']),
"iTotalRecords" => $count,
"iTotalDisplayRecords" => 5,
"aaData" => $aaData );
....
echo json_encode(propsDownJSON());
Anyone has any insight as to why could this be happening?

Sending Parameters to Common JS file

Im wondering if it is possible to minimize my code by having a common JS file, As there will be many datatables around my application..
All the Datatables will have same theme only difference will be of data.
Like this script i have
var oTable = $('#ManageForms').dataTable({
"aoColumns": [
/* ID */ {
"bVisible": false,
"bSortable": false,
"bSearchable": false
},
/* Form Name */ null,
/* Form Path */ null,
/* Form CI Path */ null,
/* Actions */ null
],
"bServerSide":true,
"bProcessing":true,
"bJQueryUI": true,
"sPaginationType": "full_numbers",
//"bFilter":true,
//"sServerMethod": "POST",
"sAjaxSource": "{{base_url()}}admin/configurations/listForms_DT/",
"iDisplayLength": 25,
"aLengthMenu": [[2, 25, 50, -1], [2, 25, 50, "All"]],
/*"sEcho": 1,
"columns":[
{data:"FormName"},
{data:"FormPath"},
{data:"FormCIPath"},
{ "data": null,
"defaultContent": "<a href='#editBtnModal' class='editBtnFunc' ><i style='color: #666666' class='fa fa-pencil fa-fw fa-2x'></i></a><a href='#' id='deleteBtn'><i style='color: #ff0000' class='fa fa-times fa-fw fa-2x'></i></a>",
"targets": -1
}
],*/
'fnServerData' : function(sSource, aoData, fnCallback){
$.ajax ({
'dataType': 'json',
'type' : 'POST',
'url' : sSource,
'data' : aoData,
'success' : fnCallback
}); //end of ajax
},
'fnRowCallback': function(nRow, aData, iDisplayIndex, iDisplayIndexFull) {
$(nRow).attr("data-id",aData[0]);
return nRow;
}
});
i guess everything will be same except the sAjaxSource": "{{base_url()}}admin/configurations/listForms_DT/",
and
"aoColumns": [
/* ID */ {
"bVisible": false,
"bSortable": false,
"bSearchable": false
},
/* Form Name */ null,
/* Form Path */ null,
/* Form CI Path */ null,
/* Actions */ null
],
so instead of copy pasting the code again and again on every page of datatables. is there any way i put this code in single common.js file and send the parameters for specific datatable.

You should put your code in a function which could be call in each specific case with the url needed as param:
function getData(url){
// ...
"sAjaxSource": url
// ...
}
this function can be in a common js and then use in any other code that is after you import this file.
The array in aoColumns can also be passed as param as the other field.