I'm stuck on a portion of my datatable Ajax reload. In the beginning of my javascript file I have the following:
var courtDateSelected;
docketCheckedInDataTable = $('#data-checked-in').DataTable({
ajax: {
type: "POST",
url: base_url + '/courts/dockets/api/list1',
dataType: 'json',
data: {
'court_date_id': courtDateSelected,
'checked_in': 'true',
},
error: function (xhr, error, code)
{
console.log(xhr);
console.log(code);
},
"dataSrc": function (json) {
//Make your callback here.
$('#checkedInCount').html(json.data.length);
return json.data;
}
},
"paging": true,
"dom": '<"datatable-header"f>rt<"datatable-footer"p>',
"ordering": true,
"bLengthChange": false,
"autoWidth": false,
"searching": true,
"info": false,
"order": [],
"columns": [
{data: 'view', name: 'view', orderable: false},
{data: 'docket_number', name: 'docket_number', orderable: false},
{data: 'last_name', name: 'last_name', orderable: true},
{data: 'first_name', name: 'first_name', orderable: false},
{data: 'balance', name: 'balance', orderable: false},
{data: 'actions', name: 'actions', orderable: false},
],
language: {
search: "_INPUT_",
searchPlaceholder: "Search Keywords...",
emptyTable: "There are no available dockets for the selected court session."
}
});
I have a date selector where it sets the variable's (courtDateSelected) value to the value selected and then sets off this script:
function reloadCheckinPageTables(){
console.log('begin');
console.log(courtDateSelcted);
console.log('end');
docketCheckedInDataTable.ajax.reload();
docketDataTable.ajax.reload();
docketPendingCheckoutDataTable.ajax.reload();
}
The problem is that my console log's the following:
begin
894
end
Which leads me to believe that the variable has been successfully updated, however, this variable's update value is not passed onto the data parameters in the DataTable.
For dynamically calculated data, you should use ajax.data as a function. Something like:
ajax: {
...
data: fundtion(d) {
d.court_date_id = courtDateSelected;
d.checked_in = 'true';
}
...
Related
I am trying to give the user the ability to cancel the jQuery DataTable(ver 1.10.8) ajax request by pressing the button,
but all the solutions i have tried are not giving me the required results.
Here is what i have tried :
let table = $('#data-table').DataTable({
destroy: true,
responsive: true,
serverSide: false,
autoWidth: false,
paging: true,
filter: true,
searching: true,
stateSave: true,
scrollX: true,
lengthMenu: [5, 10, 25],
language: {
"search": "Filtrer: "
},
ajax: {
url: '/User/GetUsersByDepartment',
type: 'POST',
data: {
QueryValue: departmentName,
Type: type
},
dataSrc: '',
},
columns: [
{
title: 'Display Name',
data: 'UserName',
},
{
title: 'Date Joined',
data: 'JoinedDate',
}
],
initComplete: function (settings, json) {
HideSpinner();
//Do something with json data;
}
}).order([[1, 'asc']]).draw(false);
//..This function is called upon pressing cancel button
function CancelSearch() {
table.context[0].jqXHR.abort();
HideSpinner();
}
I have a datatable and a dropdown. I want to change the datatable after dropdown value change. First of all, I tried the simplest trial & error by getting return value from controller after dropdown changes value and it works smoothly. Here is my code:
$('#ID_Univ').change(function () {
$.ajax({
type: 'GET',
url: '#Url.Action("Get_Approved")',
data: { ID: _Id },
success: function (data) {
// data, I got return value
// do something here
}
});
});
and then here is my datatable code
var tbl_Approved = $('#tbl_Approved').DataTable({
lengthMenu: [10, 25, 50, 75, 100],
searchPane: {
columns: [':contains("Name")', ':contains("Period")'],
threshold: 0
},
////////////////////////////////////
processing: true,
serverSide: true,
ajax: { ??? },
////////////////////////////////////
columns: [
{ data: 'ID_Approved_Monthly', title: "ID" },
{ data: 'Name', title: "Name" },
{ data: 'Period', title: "Period" },
{ data: 'Approved', title: "Approved" },
{ data: 'Approved_Date', title: "Approval Date" },
{ data: 'Paid_Status', title: "Paid Date" },
],
columnDefs: [{
targets: [0],
visible: false,
searchable: false
}],
dom: 'Rlfrtip'
});
I put datatable code outside $(document).ready(function (). So, when the page reload, it just reload the datatable as variable and whenever dropdown's value changed it just call datatableName.ajax.reload();. That's the idea.
Now, my question are,
how do I put the ajax call in the datatable to reload datatable that det return value from controller (ASP .Net Core). I see someone did this flawlessly in youtube but it made by PHP. I have same idea with this youtube.
why I don't see any change in my datatable when dropdown value change ? even, I've put ajax.data according to "Add data to the request (returning an object)"
in this case, do I have to use server side ?
So here is my complete code, what I've been trying till right now and still get stuck.
<script type="text/javascript">
var tbl_Approved = $('#tbl_Approved').DataTable({
lengthMenu: [10, 25, 50, 75, 100],
searchPane: {
columns: [':contains("Name")', ':contains("Period")'],
threshold: 0
},
////////////////////////////////////
processing: true,
serverSide: true,
ajax: { //I get get stuck here :((
"datatype": "json",
type: 'GET',
url: '#Url.Action("Get_Approved")',
data: function (d) {
return $.extend({}, d, {
ID: $('#ID').val(),
})
}
},
////////////////////////////////////
columns: [
{ data: 'ID_Approved_Monthly', title: "ID" },
{ data: 'Name', title: "Acc Name" },
{ data: 'Period', title: "Period" },
{ data: 'Approved', title: "Approved" },
{ data: 'Approved_Date', title: "Approval Date" },
{ data: 'Paid_Status', title: "Paid Date" },
],
columnDefs: [{
targets: [0],
visible: false,
searchable: false
}],
dom: 'Rlfrtip'
});
$(document).ready(function () {
tbl_Approved_Allowance.draw();
$('#ID').change(function () {
tbl_Approved_Allowance.ajax.reload();
}
});
})
</script>
to solve this problem, I put ajax into .change(function()). Here is my code:
$('#ID').change(function () {
$.ajax({
type: 'GET',
url: '#Url.Action("Get_Approved")',
data: { ID: ID},
success: function (data) {
$('#tbl_Approved').DataTable({
destroy: true,
data: data,
lengthMenu: [10, 25, 50, 75, 100],
searchPane: {
columns: [':contains("Name")', ':contains("Period")'],
threshold: 0
},
columns: [[
{ data: 'ID_Approved_Monthly', title: "ID" },
{ data: 'Name', title: "Acc Name" },
{ data: 'Period', title: "Period" },
{ data: 'Approved', title: "Approved" },
{ data: 'Approved_Date', title: "Approval Date" },
{ data: 'Paid_Status', title: "Paid Date" },
],
dom: 'Rlfrtip'
});
}
})
});
I am using yup grid for client side data entry. It is has actions column (containing add-row and delete-row buttons) by default. My requirement is to show add-row and delete-row action buttons to specific users only. For unauthorized users I do not even want actions column. I searched a lot in documentation here, but can not find any solution. Please help me on this.
var data = [];
var ddlData = [{ "ratingID": "1","rating": "1"}, {"ratingID": "2","rating": "2"}, {"ratingID": "3","rating": "3"}];
var gridObject = [];
var options = {
tableID: "appList",
debugLog: false,
singleClickEdit: true,
allowEmptyRows: false,
autoStyle: true,
onRowChange: function (e) {
//save data
$.ajax({
type: "POST",
url: "url",
data: {
data: JSON.stringify(e.yupObj.data[e.dataRowIndex]),
isNew: e.yupObj.data[e.dataRowIndex].isNew()
},
success: function (data) {
}
});
},
columns: [{
headerText: 'App',
columnName: "appName",
dataType: "any",
dataValueMember: 'appName',
dataTextMember: 'appName',
hidden: false
},
{
headerText: 'Type',
columnName: "rating",
dataType: "any",
dataValueMember: 'ratingID',
dataTextMember: 'rating',
hidden: false,
inputControl: {
controlType: 'select',
dataTextMember: 'rating',
dataValueMember: 'ratingID'
}
},
{
headerText: 'App ID',
columnName: "appID",
dataType: "any",
dataValueMember: 'appID',
dataTextMember: 'appID',
hidden: true
},
{
headerText: 'Category',
columnName: "categoryID",
dataType: "any",
dataValueMember: 'categoryID',
dataTextMember: 'categoryID',
hidden: true
}
]
}
$(document).ready(function () {
gridObject = yupGrid(options);
options.columns[1].dataSource = ddlData;
options.columns[1].bindData();;
gridObject.bindData(data);
});
Use following code in onBindDataComplete event. This event is triggered when bindData finishes loading data.
yupObj.onBindDataComplete = function(){
$('#appList tr td .grid-row-icon-a[id*="addRow_"]').remove();
};
Similarly you can remove delete button also.
Alternately you can use onBeforeRowDelete and onRowInsert events to restrict addition or deletion of rows.
I'm trying to add dynamic values for the column section in an ajax request so that the users can have control over what fields are in the data tables.
I tried with default values and it worked but when i changed to use dynamic values from a variable, the ajax field gives me errors
this works fine;
$(function() {
$('#myTable').DataTable({
processing: true,
serverSide: true,
ajax: '{{ route('members.create') }}',
columns: [
{ data: 'name', name: 'name' },
{ data: 'email', name: 'email' },
{ data: 'address', name: 'address' },
{ data: 'contact', name: 'contact' },
{ data: 'nationality', name: 'nationality' },
{ data: 'dob', name: 'dob' },
{ data: 'hometown', name: 'hometown' },
{ data: 'action', name: 'action', orderable: false, searchable: false }
]
});
});
this is where the problem comes in;
$(function() {
$('#myTable').DataTable({
processing: true,
serverSide: true,
ajax: '{{ route('members.create') }}',
columns: [
var memberFields = <?php echo json_encode($chosen_member_fields, JSON_UNESCAPED_UNICODE); ?>;
for(var i = 0; i < memberFields.length; i++){
{ data: memberFields[i], name: memberFields[i] };
},
{ data: 'action', name: 'action', orderable: false, searchable: false }
]
});
});
Thats because column property wants an array .
And your structure to build array is incorrect .
Do this :
$(function() {
var memberFields = <?php echo json_encode($chosen_member_fields, JSON_UNESCAPED_UNICODE); ?>;
var columnArray = [];//To save for value into an Array
for(var i = 0; i < memberFields.length; i++){
columnArray.push({ data: memberFields[i], name: memberFields[i] });//push valuse to array
},
columnArray.push({ data: 'action', name: 'action', orderable: false, searchable: false });//push last value
$('#myTable').DataTable({
processing: true,
serverSide: true,
ajax: '{{ route('members.create') }}',
columns: columnArray , //just say Array name !
});
});
Didnt test but hope works
I am new to web development, I have run into this problem and have researched and tried many other methods to no avail. I need to populate a drop down list in a jqgrid only with values that are in my database. The url that I am using to do this gives me the correct response in JSON as follows (note that I only sent through selected fields):
{
"serviceBranchResult": [
{
"branch_services": [],
"queues": [],
"service_description": null,
"service_id": 2,
"service_name": "Forex",
"service_status": null
},
{
"branch_services": [],
"queues": [],
"service_description": null,
"service_id": 3,
"service_name": "Tellers",
"service_status": null
}
]
}
When I try to do a dropdownlist from the method below without reading the json from the url it works 100% however it isnt dynamic, I use the method getAllSelectOptions() and where I am using it in the grid looks like this:
function getAllSelectOptions() {
var services = {
'1':'Forex', '2':'Tellers', '3':'Consultants'};
return services;
}
My code for the grid:
url: "http://localhost:8080/service.svc/employees/3"
datatype: "json",
type: "GET",
contentType: "application/json; charset=utf-8",
height: '250',
colNames: ['ID', 'Name', 'Surname', 'Username', 'Email', 'Branch ID', 'User Type', 'Status', 'Speciality'],
colModel: [
{ name: 'employee_id', index: 'employee_id'},
{ name: 'employee_name', index: 'employee_name', editable: true },
{ name: 'employee_surname', index: 'employee_surname', editable: true },
{ name: 'employee_username', index: 'employee_username', editable: true },
{ name: 'employee_email', index: 'employee_email', editable: true },
{ name: 'branch_id', index: 'branch_id', editable: true },
{ name: 'user_type', index: 'user_type', editable: true },
{ name: 'employee_state', index: 'employee_state', editable: true },
{ name: 'employee_speciality', index: 'employee_speciality', editable: true,
sortable: true,
align: 'center',
editable: true,
cellEdit: true,
edittype: 'select',
formatter: 'select',
editoptions: { value: getAllSelectOptions() }
}],
rowNum: 20,
rowList: [10, 20, 30],
pager: '#pager_jqgrid',
And this works perfectly.
However I use this following method to potentially replace the getAllSelectOptions() method and it does return the information when I use alert boxes, but does not work.
function availAtBranch() {
$.ajax({
type: "GET",
url: "http://localhost:8080/service.svc/branch/3",
dataType: "json",
success: function (data) {
$.each(data.serviceBranchResult, function (i, obj) {
//alert(obj.service_id + ":" + obj.service_name);
var div_data = obj.service_name + ":" + obj.service_name;
//alert(div_data);
});
return div_data;
}
});
I think it has something to do with how in parsing the JSON to the editoptions method, or sending an object through. How do I get my JSON to be in the format as described in the getAllSelectOptions() method, or how do I display my data in the dropdownlist. Thank you in advance