Basic DataTable Ajax Configuration Not Working - php

I'm trying to use DataTables with php and mysql. I have an ajax call that is pulling in data as such:
[
{
"id": 3,
"ptid":"blah",
"last_name":"blah",
"first_name":"blah",
"priv_application":"E",
"priv_document":"E",
"priv_note":"E",
}
]
I'm configuring DataTables with the following:
$('#listing').DataTable( {
"paging": false,
"searching": false,
"select": true,
ajax: {
url: '{{ url("administration/admindata") }}',
dataSrc: ''
},
columns: [
{ title: "ID" },
{ title: "PtID" },
{ title: "Last Name" },
{ title: "First Name" },
{ title: "Application" },
{ title: "Documents" },
{ title: "Notes" }
]
});
And the HTML for the table is as follows:
<table id="listing" class="display" width="100%"></table>
However, it doesn't want to load the data even though this configuration is exactly like the first example given here:
https://datatables.net/manual/ajax
I'm getting the following error:
DataTables warning: table id=listing - Requested unknown parameter '0' for row 0, column 0. For more information about this error, please see http://datatables.net/tn/4
Any assistance is greatly appreciated.

When using array of objects as your data source, you need to specify data source for each column using columns.data option.
$('#listing').DataTable( {
"paging": false,
"searching": false,
"select": true,
"ajax": {
"url": '{{ url("administration/admindata") }}',
"dataSrc": ''
},
columns: [
{ data: "id", title: "ID" },
{ data: "ptid", title: "PtID" },
{ data: "last_name", title: "Last Name" },
{ data: "first_name", title: "First Name" },
{ data: "priv_application", title: "Application" },
{ data: "priv_adocument", title: "Documents" },
{ data: "priv_note", title: "Notes" }
]
});

Try something like this.
ajax": {
type': 'POST',
'url': "<?=action('TestController#postTestfunction')?>"
},
try to use the ajax call without blade template code.
and make sure your route is written something like this.
Route::controller('test', 'TestController');
Also try with change your controller function name "admindata" to "postAdmindata"
Let me know still if you get stuck anywhere.

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

How to make Datatable Jquery dynamically

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"
}
]
}

Query String Filtering with Datatables in Laravel 5.4

im using YajraBox for Datatables, it is Laravel extension.
I want to make it work with my Query String Filtering, so idea is tah i need to pass search request to ajax request
This is part of my form imput:
http://127.0.0.1:8000/lots?make%5B%5D=TOYOTA
So result have to be: only lots made by TOYOTA
This is my script for datatables with YajraBox:
<script type="text/javascript">
$(document).ready(function(){
$('#table').DataTable({
bInfo: false,
searching: false,
processing: true,
serverSide: true,
ajax: '{{ url("/data") }}',
columns: [
{ data: 'date', name: 'date' },
{ data: 'bid', name: 'bid' },
{ data: 'auction_name', name: 'auction_name' },
{ data: 'pics_urls', name: 'pics_urls' },
{ data: 'company', name: 'company' },
{ data: 'model_name_en', name: 'model_name_en' },
{ data: 'model_type_en', name: 'model_type_en' },
{ data: 'grade_en', name: 'grade_en' },
{ data: 'mileage_en', name: 'mileage_en' },
{ data: 'model_year_en', name: 'model_year_en' },
{ data: 'color_en', name: 'color_en' },
{ data: 'displacement', name: 'displacement' },
{ data: 'transmission_en', name: 'transmission_en' },
{ data: 'scores_en', name: 'scores_en' },
{ data: 'start_price_en', name: 'start_price_en' },
{ data: 'result_en', name: 'result_en' }
]
});
});
</script>
This is my controllers for view and for ajax:
public function index()
{
return view('lots.browse');
}
public function indexData(LotFilters $filters)
{
$lots = Lot::filter($filters);
return Datatables::eloquent($lots)->make(true);
}
So what i think, i need to pass some howe ?make%5B%5D=TOYOTA to ajax request ajax: '{{ url("/data") }}',, any one know how to do it?
You can do this like:
"{{ url('/data') }}" + "?make="+value // where value contains TOYOTA in it
and get this value in controller like:
Input::get('make');

Passing UserID into Datatables

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.

Kendo Grid. How to display dataTextField in Grid's cell instead of dataValueField?

I want to display Text for my ForigenKey columns instead of numeric values. There are a lot of examples to retrieve TextMember by comparing ID but they are not working in my case. I just started to use Kendo ui so dont know much about it
Here is the code :
$(document).ready(function () {
dataSource1 = new kendo.data.DataSource({
transport: {
read: {
url: "Data/AttendanceCode/GridSelect.php",
dataType: "json",
},
update: {
url: "Data/AttendanceCode/GridUpdate.php",
dataType: "json",
type:"GET"
},
destroy: {
url: "Data/AttendanceCode/GridDelete.php",
dataType: "json",
type:"POST"
},
create: {
url: "Data/AttendanceCode/GridInsert.php",
dataType: "json",
type:"POST"
},
},
schema: {
data: "data",
model: {
id: "AttendenceID",
fields: {
AttendenceID : { editable: false, nullable: true },
TeacherID: { field: "TeacherID", defaultValue: "EIIT0002" },
}
}
},
});
$("#grid").kendoGrid({
dataSource: dataSource1,
pageSize: 10,
pageable: {
refresh: true,
pageSizes: true
},
editable:{ mode : "popup" },
height: 400,
filterable: true,
columnMenu: true,
sortable: true,
reorderable: true,
resizable: true,
toolbar: ["create"],
columns: [
{ field:"AttendenceID", title: "Attendence ID", width:"130px" },
{ field: "TeacherID", title:"Teacher", width: "100px" , editor: TeacherDropDownEditor, template: "#=getTeacherName(TeacherID)#" },
{ command: ["edit", "destroy"], title: "Action", width: "210px" }],
});
});
Teacher DropDown DataSource
teacher = new kendo.data.DataSource({
transport: {
read: {
url : "Data/Teacher.php",
dataType: "json" }
},
schema: {
data : "Teacher"
}
});
// Teacher Editor
function TeacherDropDownEditor(container, options) {
$('<input data-bind="value:' + options.field + '"/>')
.appendTo(container)
.kendoDropDownList({
dataTextField: "TeacherName",
dataValueField: "Service_NO",
dataSource: teacher
});
}
Different approaches i found and tried to Get Teacher Name
1 -
function getTeacherName(value) {
var text = "";
$.each(teacher, function () {
if (this.Service_NO == value) {
text = this.Name;
return false;
}
});
return text;
}
2 -
function getTeacherName(teacherID) {
for (var idx = 0, length = teacher.length; idx < length; idx++)
{
if (teacher[idx].Service_NO === teacherID)
{t = teacher[idx].Name;}
}
return t;
}
3 -
function getTeacherName(teacherID) {
$.each(teacher, function(key, val) {
if(val.Service_NO == tID){
t = val.Name;
}
});
return t;
}
It seems like dataSource (teacher) is not having any value.
PHP code is working perfectly.
Please Help if you have any idea whats wrong with my code.
Thanks !!
You are right, teacher DataSource does not have any data because you are defining how to get the data (that's what you do with the DataSource) but you are not reading it.
Add:
teacher.read();
for manually forcing the data read.
NOTE: This is something that happens magically when you have a Grid, ListView,... because these widget do it for you but this time, for displaying your grid you need to read it in advance since it is invoked from a JavaScript function (KendoUI grid code doesn't know anything about what you have in the function getTeacherName other than the name).
you should config your field:
{ field: "nu_status", title: 'Status', values: [ { text: "Active", value: 1 }, { text: "Inactive", value: 0 }]},

Categories