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"
}
],
Related
I am creating a simple report in PHP and AJAX displayed on Datatable.
The user shall be able to select the from date and to date, then data will be display according to the selected dates.
My problem is if I select no sales dates, the data are not cleared and still show the previous records, I don't understand why.
I attached the screenshot of the form below
I tried to achieve this with the code below
function get_all()
{
var total=0;
var amount=0;
var from_date = $('#from_date').val();
var to_date = $('#to_date').val();
$('#tbl-projects').dataTable().fnDestroy();
$.ajax({
url:"all_sales.php",
type: "POST",
dataType: 'JSON',
data:{from_date:from_date, to_date:to_date},
success: function (data)
{
$('#tbl-projects').dataTable({
dom: 'Bfrtip',
buttons: [
, 'excel', 'pdf', 'print'
],
"aaData": data
,
"scrollX": true,
"aoColumns": [
{"sTitle": "Member No", "mData": "mno"},
{"sTitle": "Member Name", "mData": "pname"},
{"sTitle": "Amount", "mData": "amount"},
{"sTitle": "Month", "mData": "months"},
{"sTitle": "Payment Date", "mData": "paydate"},
]
});
data.forEach(function(recordInLoop)
{
amount += Number(recordInLoop.amount);
});
$('#amount').val(amount);
},
error: function (xhr) {
console.log('Request Status: ' + xhr.status );
console.log('Status Text: ' + xhr.statusText );
console.log(xhr.responseText);
var text = $($.parseHTML(xhr.responseText)).filter('.trace-message').text();
console.log(text)
}
});
}
function get_all()
{
var total=0;
var amount=0;
var from_date = $('#from_date').val();
var to_date = $('#to_date').val();
$('#tbl-projects').dataTable().fnDestroy();
$.ajax({
url:"all_sales.php",
type: "POST",
dataType: 'JSON',
data:{from_date:from_date, to_date:to_date},
success: function (data)
{
$('#tbl-projects').dataTable({
dom: 'Bfrtip',
buttons: [
, 'excel', 'pdf', 'print'
],
"aaData": data
,
"scrollX": true,
"aoColumns": [
{"sTitle": "Member No", "mData": "mno"},
{"sTitle": "Member Name", "mData": "pname"},
{"sTitle": "Amount", "mData": "amount"},
{"sTitle": "Month", "mData": "months"},
{"sTitle": "Payment Date", "mData": "paydate"},
]
});
data.forEach(function(recordInLoop)
{
amount += Number(recordInLoop.amount);
});
$('#amount').val(amount);
},
error: function (xhr) {
console.log('Request Status: ' + xhr.status );
console.log('Status Text: ' + xhr.statusText );
console.log(xhr.responseText);
var text = $($.parseHTML(xhr.responseText)).filter('.trace-message').text();
// Reset text box
$('#from_date').val('');
$('#to_date').val('');
console.log(text)
}
});
}
</script>
OR
$('#from_date').datepicker('setDate', null);
$('#to_date').datepicker('setDate', null);
I need to make a table dynamically with DataTable Jquery, the table must be Server-side processing type and in the same request (Ajax) and answer the columns are made and obviously the results.
DatosColumna=""//Json with Response of ajax
$('#table_query_info').dataTable({
columnDefs: DatosColumna,//Here its the headers
destroy: true,
processing: true,
serverSide: true,
ajax: {
url: myBaseUrl + "consults/find_docs",
type: "post",
data: function (d) {
d.datos = make_info()//Send Json with info
},
statusCode: {
200: function (resp) {
alert("OK");//That Good
}
}
}
});
I tried with this code but it has not worked
Thank you very much
steps for resolution:
make a html code
<table class="table" id="tablaindex" style="width:100%"></table>
Obtengo las columnas, antes de inicializar la tabla
$.ajax({
type: "POST",
url: "AtencionTurno/ColumnasDatatable",
data: TblOficina,
success: function (response) {
inicializarTabla(response);
}, error: function (request, status, error) {
console.log("Error");
}
});
The reques obtain the follow json
[
{
"title": "Column 1",
"data": "Id_Turno",
"orderable": false
},
{
"title": "Column 2",
"data": "Turno",
"orderable": false
},
{
"title": "Column 3",
"data": "Clasificacion",
"orderable": false
},
{
"title": "Column 4",
"data": "Concepto",
"orderable": false
},
{
"title": "Column 5",
"data": "Hora",
"orderable": false
}]
now I initialize the table with the columns that were obtained
inicializarTabla = function (columnas) {
var dataTable = $('#tablaindex').DataTable({
"processing": true,
"serverSide": true,
stateSave: true,
orderable: false,
"order": [],
columns: columnas,
"lengthChange": false,
searching: false,
colReorder: false,
"ajax": {
url: "AtencionTurno/IndexTurnos",
type: "post",
data: TblOficina
}
});
};
response from server:
{
"draw": "1",
"recordsTotal": 4,
"recordsFiltered": 4,
"data": [
{
"Id_Turno": "358",
"Turno": "ALAT1",
"Clasificacion": "euismod",
"Concepto": "Convallis",
"Hora": "11:00:12",
"Tiempo_Espera": "2018/07/03 11:00:12",
"Tipo_Cliente": "Calendario",
"Transferencia": "",
"null": "358"
},
{
"Id_Turno": "354",
"Turno": "ALAK23",
"Clasificacion": "euismod",
"Concepto": "Pagos",
"Hora": "16:36:14",
"Tiempo_Espera": "2018/06/29 16:36:14",
"Tipo_Cliente": "Utiles Escolares ",
"Transferencia": "",
"null": "354"
}
]
}
How to enable the column of jquery datatable depends on login user accessability ,If login user is admin then only last column should show/hidden, How to do in datatable function. Here is my code:
var $table=$('#example').dataTable
( {
"bFilter": false,
"bDestroy": true,
"bJQueryUI": true,
"ajax": {
'type': 'POST',
'url': 'getResult.php',
'data': {
formName:'afscpMcn',
action:'search',
mcn_no: document.getElementById('mcn_no').value,
cust_nm:document.getElementById('cust_name').value,
emp_id: document.getElementById('employ_name').value
}
},
"columnDefs": [
{
"aTargets":[4], // this your column of action
"mData": null,
"bSortable": false,
"mRender": function(data, type, full)
{
mcnDel=String(full[0]+full[1]);
var rowId= full[0];
return "<td><a href='javascript: void(0);' id='deleteOrd' onclick='updateMcnTab(\""+rowId+"\");' ><img src=images/edit-icon.png></a> / </a><a href='javascript: void(0);' onclick='getResultsMcn(\"delete\",\""+mcnDel+"\");' ><img src=images/delete.png></a></a></td>"; // replace this with button
}
}
]
});
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
I'm using jsTree 1.0. And have this code :
$(document).ready(function () {
$("#folders_tree").jstree({
"core": {
"initially_open": ["root"]
}, "html_data": {
"data": '<?= $folders; ?>'
}, "themes": {
"theme": "default",
"dots": true,
"icons": true,
"url": "<?= Yii::app()->request->baseUrl ?>/css/jstree/themes/default/style.css"
}, "contextmenu": {
"items": {
"create": {
"label": "Create",
"action": function (obj) {
this.create(obj);
}, "_disabled": false,
"_class": "add",
"separator_before": false,
"separator_after": false,
"icon": false
}, "rename": {
"label": "Rename",
"action": function (obj) {
this.rename(obj);
}, "_disabled": false,
"_class": "rename",
"separator_before": false,
"separator_after": false,
"icon": false
}, "remove": {
"label": "Delete",
"action": function (obj) {
this.remove(obj);
}, "_disabled": false,
"_class": "delete",
"separator_before": true,
"separator_after": false,
"icon": false
}, "ccp": false
}
},
"plugins": ["themes", "html_data", "ui", "crrm", "contextmenu"]
});
/* Callbacks */
var folders = $("#folders_tree");
folders.bind("create.jstree", function (e, data) {
var parent_id = data.rslt.parent[0].id;
var name = data.rslt.name;
var node = data.args[0];
var dataArray = {
"ref_folder": parent_id,
"name": name
};
var dataString = JSON.stringify(dataArray);
$.ajax({
type: 'POST',
url: '<?= Yii::app()->createUrl('
ajax / createfolder ') ?>',
data: {
data: dataString
}, success: function (jdata) {
var json_data = JSON.parse(jdata);
// Here's! This code is not working. Id is not set.
$(node).attr("id", json_data.new_id);
}, dataType: 'text'
});
});
});
$(node).attr("id", json_data.new_id) // this code is not working.
I'm stuck on this :( How can I set this id?
The node variable must be declared as :
var node = data.rslt.obj;
And called as :
node.attr("id", json_data.new_id);
I would do alert(jdata) in the success callback.
Be sure the server is returning safe JSON and that the actual new_id attribute exists.