How to post the parameter in ajax call of jquery datatable - php

As of now I am passing parameter along with URL in ajax call of data table.
But I want to pass it as POST method, please anyone one help me regarding parameter passing in post method, here's my trial code:
// Sending through GET
var $table = $('#example').dataTable(
"processing": true,
"serverSide": true,
"bDestroy": true,
"bJQueryUI": true,
"ajax": 'getResult.php?formName=afscpMcn&action=search&mcn_no='+mcnNum+'&cust_nm='+cust_num+'&emp_id='+emp+''
});

Just pass it like a normal jQuery ajax in POST fashion.
The structure should look like this:
ajax: { type: 'POST', url: <path>, data: { your desired data } }
Example:
var $table = $('#example').dataTable(
"processing": true,
"serverSide": true,
"bDestroy": true,
"bJQueryUI": true,
"ajax": {
'type': 'POST',
'url': 'getResult.php',
'data': {
formName: 'afscpMcn',
action: 'search',
// etc..
},
}
});
In PHP, just access the POST indices as usual (just the straightforward approach):
getResult.php
$form_name = $_POST['formName'];
// the rest of your values ...
DataTables manual entry

You can try this way:
$('#example').dataTable( {
"ajax": {
"url": "data.json",
"data": function ( d ) {
d.extra_search = $('#extra').val();
}
}
});
https://datatables.net/reference/option/ajax.data

$("#tbl").dataTable({
oLanguage: {
sProcessing: '<div id="loader"></div>'
},
bProcessing: true,
"bServerSide": true,
"iDisplayLength": pageSize,
"sAjaxSource": " /PurchaseOrder/AddVendorItems", // url getData.php etc
"fnServerData": function ( sSource, aoData, fnCallback, oSettings ) {
aoData.push({ "name": "where", "value": ID +" AND ISNULL(IsFinal,0) = "+ ($("#chkFinal").bootstrapSwitch('state') == true ? 1 : 0) });
aoData.push({"name": "PackIDFK", "value": $("#PackIDFK").val()}) //pushing custom parameters
oSettings.jqXHR = $.ajax( {
"dataType": 'json',
"type": "POST",
"url": sSource,
"data": aoData,
"success": fnCallback
} );
} });
This is real time example.The aoData contains all the parameters which is required on server side and you can also push your own custom parameters

Related

How to implement Ajax call in Datatables server side processing

I have a 20,0000+ data in sever side I have to plot in datatable based on their gender.
I have three categories
All-show all data in list
women+kids data list
men data list
First time load Its all fine by choosing radio button ,In some cases I got all previous data list but the count still shows
Code :
function load_data(preferredGender) {
$("#user_table").DataTable({
"processing": true,
"serverSide": true,
"dataType": "json",
"deferRender": true,
"ajax": {
"url": "<?php echo base_url(); ?>user/list_customers",
"data": {
preferredGender
},
},
"columns": [
{
"data": "row"
},
{
"data": "email"
},
],
});
}
$('#table-id').DataTable({
"processing": true,
"serverSide": true,
"ajax": {
"url": "URL",
"type": "POST",
"data": function ( data ) {
data.gender = $('#gender').val();
},
"dataSrc": function ( json ) {
return json.data;
}
},
"columnDefs": [
{
"targets": [ ],
"orderable": false,
},
],
"fnDrawCallback": function() {
},
});
Hi all Thanks for your valuable time.I have fixed the issue
Issue in Sending request to get data on each click and the responding time and data.
on before send in ajax call aborting if any previous request exits and aborting
beforeSend:function(){
if (userTable && userTable.hasOwnProperty('settings')) {
userTable.settings()[0].jqXHR.abort();
}
}
If you have any alternative for this please suggest me
Thanks

edit and delete button Add in server side data table in php ,ajax

I put edit a button but how can I pass id of each row.
Its server side data table but I don't know how get id for edit and button
<script type="text/javascript" language="javascript" >
$(document).ready(function() {
var dataTable = $('#employee-grid').DataTable( {
"processing": true,
"serverSide": true,
"ajax":{
url :"packing-grid-data.php", // json datasource
type: "post", // method , by default get
error: function(){ // error handling
$(".employee-grid-error").html("");
$("#employee-grid").append('<tbody class="employee-grid-error"><tr><th colspan="3">No data found in the server</th></tr></tbody>');
$("#employee-grid_processing").css("display","none");
},
},
"columnDefs": [
{
"data": null,
"defaultContent": "<a href='view_product.php?id=' name='edit' class='btn btn-primary'> VIEW </a>",
"targets": -1
}
]
});
});
</script>
There are two ways you can do this:
You can prepare the Edit and Delete button html in the PHP code and pass it in ajax response
Using datatable jquery createdRow callback.Check below code. In the code data[1] means id value from database.
var dataTable = $('#employee-grid').DataTable( {
"processing": true,
"serverSide": true,
"ajax":{
url :"packing-grid-data.php",
type: "post",
error: function(){
$(".employee-grid-error").html("");
$("#employee-grid").append('No data found in the server');
$("#employee-grid_processing").css("display","none");
},
},
"columnDefs": [
{
"data": null,
"targets": -1
}
],
createdRow : function( row, data, dataIndex ) {
$( row ).find('td:eq(-1)').html(' VIEW ');
}
});

Load dataTable. Successful AJAX request, but no data visible

How do I load json data with serverside processing in a dataTable?
I'm trying to build a custom Wordpress plugin and display results from wpdb inside a dataTable.
I get a successful AJAX return call, but the dataTable only shows a "Processing..." stage and the table does not fill the rows (keeps empty).
Although I have read many(!) similar problems and answers here, any help to load data with ajax and json_encode is much appreciated.
The current code:
dahsboard.php
<table id="table-id" cellpadding="1" cellspacing="1" width="100%">
<thead><tr>
<th>h_id</th>
<th>h_subject</th>
</tr></thead>
ajax-grid-data.php
add_action('wp_ajax_my_action', 'my_action_callback');
function my_action_callback(){
global $wpdb;
$query = "SELECT h_id, h_subject FROM wp_tablename ORDER BY h_id limit 3";
$myrows = $wpdb->get_results($query);
foreach ($myrows as $value) {
$ResultData['h_id'] = $value->h_id;
$ResultData['h_subject'] = $value->h_subject;
$data[] = $ResultData;
}
$json_data = array(
"draw" => 1,
"recordsTotal" => 3,
"recordsFiltered" => 3,
"data" => $data,
);
echo json_encode($json_data);
die();
}
I think that the problem is in datatype formatting underneath:
dashbboard.js
var oTable;
jQuery(document).ready(function() {
jQuery.fn.dataTable.ext.errMode = 'throw';
oTable = jQuery('#table-id').DataTable( {
"serverSide": true,
"processing": true,
"columnDefs": [{"defaultContent": "-","targets": "_all"}],
"columns": [
{ "data": "h_id" } ,
{ "data": "h_subject" }
],
"ajax":{
url: "admin-ajax.php?action=my_action",
type: "post",
dataSrc:'',
dataType : "json",
contentType: "application/json; charset=utf-8",
//dataSrc: function(data){ return data.data; },
//async : false,
//processData: true,
//accepts: {json: "application/json, text/javascript"},
success: function(data){
console.log(JSON.stringify(data)); // successful echo data objects are shown in dashboard.
},
error: function(){
jQuery("#tablename").append('<tbody class="grid-error"><tr><th colspan="2">No results.</th></tr></tbody>');
jQuery("#tablename_processing").css("display","none");
}
},
});
});
Current results
Result php file test: .../wp-admin/admin-ajax.php?action=my_action
{"draw":1,"recordsTotal":3,"recordsFiltered":3,"data":[{"h_id":"37168","h_subject":"6216"},{"h_id":"37169","h_subject":"7021"},{"h_id":"37170","h_subject":"8923"}]}
Result ajax success function, console data:
{"draw":1,"recordsTotal":3,"recordsFiltered":3,"data":[{"h_id":"37168","h_subject":"6216"},{"h_id":"37169","h_subject":"7021"},{"h_id":"37170","h_subject":"8923"}]}
Result dashboard table only shows: processing...
Deleting the dataSrc and success function did wonders and fills up the dataTable with data. I really appreciate the help and efforts of #bassxzero and #davidkonrad.
Ensuring that there is an answer, "on behalf of" the new version of dashboard.js:
var oTable;
jQuery(document).ready(function() {
jQuery.fn.dataTable.ext.errMode = 'throw';
oTable = jQuery('#table-id').DataTable( {
"serverSide": true,
"processing": true,
"columnDefs": [{"defaultContent": "-","targets": "_all"}],
"columns": [
{ "data": "h_id" } ,
{ "data": "h_subject" }
],
"ajax":{
url: "admin-ajax.php?action=my_action",
type: "post",
dataType : "json",
contentType: "application/json; charset=utf-8",
error: function(){
jQuery("#tablename").append('<tbody class="grid-error"><tr><th colspan="2">No results.</th></tr></tbody>');
jQuery("#tablename_processing").css("display","none");
}
},
});
});

Pass data parameter using AJAX to PHP for server side processing in datatables

I'm using server side processing for datatables, but I'd like to pass a parameter to be included in my PHP that gets the data. The problem is that I can't figure out how to pass it. I know how to do it using "regular" AJAX but that structure doesn't work with datatables.
var mydata = "xyz";
$("#full_table").DataTable({
"processing": true,
"serverSide": true,
"ajax": {
"url": "php/get_permit_data2.php",
"type":"POST",
"data": mydata //this doesn't actually pass something to my PHP like it does normally with AJAX.
},
//etc, etc
Use ajax.data option as shown below to pass static data.
$("#full_table").DataTable({
"processing": true,
"serverSide": true,
"ajax": {
"url": "php/get_permit_data2.php",
"type": "POST",
"data": {
"param_name": "param_value"
}
}
} );
You can pass dynamic data if you use function for ajax.data option as shown below:
$("#full_table").DataTable({
"processing": true,
"serverSide": true,
"ajax": {
"url": "php/get_permit_data2.php",
"type": "POST",
"data": function(d){
d.extra_search = $('#extra').val();
}
}
} );

Jquery Datatables same result

Using Server side processing, with Ignited Datatables, getting the same result set no mater the action I take no other errors are returned.
The page example: I haven't given the server a name can't include link..
> http://104.200.17.5/BotController
JS code
$(document).ready(function() {
var oTable = $('#big_table').dataTable( {
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": 'BotController/IpTest',
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"iDisplayStart ":20,
"oLanguage": {
"sProcessing": "assets/images/ajax-loader_dark.gif'>"
},
"fnInitComplete": function() {
//oTable.fnAdjustColumnSizing();
},
'fnServerData': function(sSource, aoData, fnCallback)
{
// console.log(fnCallback);
$.ajax
({
'dataType': 'json',
'type' : 'POST',
'url' : sSource,
'data' : aoData,
'success' : fnCallback
});
}
} );
});
The server call:
public function IpTest()
{
//ob_clean();
$this->datatables->select('ID,Voting_ID,User_IP,X_IP')
->unset_column('ID')
->from('User_IP_check');
echo $this->datatables->generate();
}
The solution is to use this, and bind all your column names into mData.
"aoColumns": [{
"mData": "col_name_1"
}, {
"mData": "col_name_2"
}, {
"mData": "col_name_3"
}, {
"mData": "col_name_3"
}
],

Categories