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
Related
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"
}
]
}
I have question with ajax.
my ajax script :
{
"data": "noInduk",
"width": "100px",
"sClass": "text-center",
"orderable": false,
"mRender": function(data) {
return 'Edit';
}
How to do this so that I can make more than one variable to review the data request.
return 'Edit';
be like this
return 'Edit';
One solution is that get the whole data with concatenating with a specific delimiter like | and on ajax response split data, so you will have two responses.
{
"data": "noInduk",
"width": "100px",
"sClass": "text-center",
"orderable": false,
"mRender": function(data) {
var newData = data.split('|');
'Edit';
}
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();
}
}
} );
Working a Project here and I need some help. I have a php page and an html page, trying to pass the username of the php into a DataTable that is in my html file. The code that I have for each is:
PHP is below:
public function __construct(Guard $auth)if (Auth::check() ||Auth::attempt()) {
$auth_id = Auth::user()->id;}
My HTML portion is the following:
var table = $('#example').DataTable( {
// Makes one continuous line
"autoWidth": false,
// How many rows to return
"pageLength": 25,
// Setup the search box with the current username to filter the values on the screen - jsg 2/12/2016
"search": {
"search": $('auth')
}, dom: "Bfrtip",
ajax: "../php/staff.php",
columns: [
{
data: null,
defaultContent: '',
className: 'select-checkbox',
orderable: false
},
{ data: "instructor", visible: false },
{ data: "first_name" },
{ data: "last_name" },
{ data: "category" },
{ data: "Metric_text" },
{ data: "response_value" },
{ data: "fkey_course_id", visible: false },
{ data: "course_code" },
{ data: "course_number" },
{ data: "course_section"}
],
My Question is how can I get $auth_id into the search portion of the HTML coding. As you can see I've tried this with $('auth') but its giving me an object error. If I trying a name like "search": "Test" then test populates and it works. Basically I want to pass the username into the search box of the DataTable so it ill show only the usernames rows.
you can use Ajax.
The code looks like this:
$(document).ready(function() {
$('#example').DataTable( {
"processing": true,
"serverSide": true,
"ajax": "scripts/ids-objects.php",
"columns": [
{ "data": "first_name" },
{ "data": "last_name" },
{ "data": "position" },
{ "data": "office" },
{ "data": "start_date" },
{ "data": "salary" }
]
} );
} );
Look at this sample.
Hope it can help you.
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