I am having difficulty passing a date to ajax call. The date is from a bootstrap datetimepicker. I do get the value javascript side by using:
var DateFrom = $("#dpDateFrom").data('datepicker').date;
I pass this date via ajax call from a datatable.
tblActivity = $('#tblActivity').dataTable({
"oLanguage": { "sEmptyTable": "No data to display" },
"bJQueryUI": false,
"bAutoWidth": false,
"sAjaxSource": '/api/activitylogapi/Activityt',
"aaData": mainJson.aaData,
"bProcessing": false,
"bServerSide": true,
"bSort": true,
"bFilter": false,
"bRetrieve": true,
"aoColumns": [
{ "sTitle": "Activity Type", "mDataProp": "Type", "sWidth": "10%" },
{ "sTitle": "Comments", "mDataProp": "Comments", "sWidth": "10%" },
{ "sTitle": "Company Name", "mDataProp": "CompanyName", "sWidth": "10%" },
{ "sTitle": "Contact", "mDataProp": "Contact", "sWidth": "10%" },
{ "sTitle": "User", "mDataProp": "UserFullName", "sClass": "truncate", "sWidth": "10%" },
{ "sTitle": "Created", "mDataProp": "DateS", "sClass": "text-right", "sWidth": "10%" },
],
"iDeferLoading": [mainJson.count, mainJson.count],
"aoColumnDefs": [{ "bSortable": false, "aTargets": [1,2,3,5] }],
"fnServerData": function (sSource, aoData, fnCallback, oSettings) {
aoData.push({ "name": "DateFrom", "value": DateFrom });
aoData.push({ "name": "DateTill", "value": DateTill });
doDataTablePostAjaxCalling(this, sSource, aoData, fnCallback, oSettings);
},
"fnRowCallback": function (nRow, aData, iDisplayIndex, iDisplayIndexFull) {
}
My ajax call is expecting a DateTimeOffset but can not get the date to pass through succesfully. Is there a way I must fomrat my javascript date
I resolved this by getting the value from datepicker with .val(). Then creating a date object in javascript then passing that to my controller.
Related
I have used datatable to show my record and it is working fine as :
table = $(".jqueryDataTable").dataTable( {
"fnInitComplete": function(oSettings, json) {
alert( 'DataTables has finished its initialisation in table.' );
this.fnHideEmptyColumns(this);
$('#lblReportHeader').html(reportHeader);
$('#lblFromDate').html(fromDateHeader);
$('#lblToDate').html(fromToHeader);
$('#tblReportHeader').show();
},
"bServerSide": true,
"bFilter": false,
"bRetrieve": true,
"bDestroy": true,
"sAjaxSource": "./getReportDetails",
"bJQueryUI": true,
"fnServerParams": function ( aoData ) {
newData=aoData;
newData.push( { "name": "reportType", "value": reportType }, { "name": "reportSubType", "value": reportSubType}, { "name": "fromDate", "value": fromDate}, { "name": "toDate", "value": toDate});
},
"aoColumns": [
{ "mData": "username", "sTitle": "username"},
{ "mData": "transferType", "sTitle": "transferType"},
{ "mData": "fromAccount", "sTitle": "fromAccount"},
{ "mData": "toAccount", "sTitle": "toAccount"},
{ "mData": "amount", "sTitle": "amount"},
{ "mData": "currency", "sTitle": "currency"},
{ "mData": "transferDate", "sTitle": "transferDate"},
{ "mData": "creditDebitFlag", "sTitle": "creditDebitFlag"},
{ "mData": "fromAccountType", "sTitle": "fromAccountType"},
{ "mData": "toAccountType", "sTitle": "toAccountType"},
{ "mData": "impsChannelType", "sTitle": "impsChannelType"},
{ "mData": "impsTranType", "sTitle": "impsTranType"},
{ "mData": "IFSCCode", "sTitle": "IFSCCode"},
{ "mData": "narration", "sTitle": "narration"},
{ "mData": "customerID", "sTitle": "customerID"},
{ "mData": "customerName", "sTitle": "customerName"},
{ "mData": "fromMMID", "sTitle": "fromMMID"},
{ "mData": "fromMobileNo", "sTitle": "fromMobileNo"},
{ "mData": "toMMID", "sTitle": "toMMID"},
{ "mData": "toMobileNo", "sTitle": "toMobileNo"},
{ "mData": "paymentType", "sTitle": "paymentType"},
{ "mData": "transReferenceId", "sTitle": "transReferenceId"},
{ "mData": "transactionStatus", "sTitle": "transactionStatus"}
]
} );
Then there was requirement to export the datatable into export so I took reference from : datatable export. So I added "sDom": 'T<"clear">lfrtip' in the code.
After adding "sDom" my css is not working.
Can anyone tell me what is the wrong in my code ?
In the below code I have a jQuery DataTable and I want to get selected row ids and store it into array. But I get only one row id SchoolID but I want to get SchoolID, ClassID and SectionID for checked checkbox.
var val[]; //global
"aoColumns": [
{
"mDataProp": "SchoolID",
"bSearchable": false,
"bSortable": false,
"sWidth": "10%",
"mRender": function(data, type, full) {
val = '<input type="checkbox" id="chkSchoolID" onclick="CheckRow(' + full.SchoolID + ')"></button>';
return val;
}
},
{
"mDataProp": "SchoolID",
"sWidth": "25%"
}, {
"mDataProp": "ClassID",
"sWidth": "25%"
}, {
"mDataProp": "SectionID",
"sWidth": "25%"
},
],
function CheckRow() {
alert(val);
}
In the below code I am getting the return value using AJAX and now I want to filter the values. My return value looks like this:
"ProductID":1 ,
"ProductName": Salt
I want only the ProductName. Please help me to do this.
function LoadProducts() {
var LocationID = $('#<%= ddlLocations.ClientID %>').val();
var ProductTypeID = $('#<%= ddlProductTypes.ClientID %>').val();
$("#product").dataTable({
"oLanguage": {
"sZeroRecords": "No records to display",
"sSearch": "Search"
},
"aLengthMenu": [[10, 25, 50, 100, 150, 250, 500, -1], [10, 25, 50, 100, 150, 250, 500, "All"]],
"iDisplayLength": 10,
"bSortClasses": false,
"bStateSave": false,
"bPaginate": true,
"bAutoWidth": false,
"bProcessing": true,
"bServerSide": false,
"bDestroy": true,
"sAjaxSource": "ProductsNew.aspx/GetProducts",
"bJQueryUI": true,
"sPaginationType": "simple",
"bDeferRender": true,
"fnServerData": function (sSource, aoData, fnCallback) {
$.ajax({
"dataType": 'json',
"contentType": "application/json; charset=utf-8",
"type": "POST",
"url": sSource,
"data": "{'vLocationID': '" + LocationID + "','vProductTypeID': '" + ProductTypeID + "'}",
"success":
function (msg) {
var json = jQuery.parseJSON(msg.d);
window.localStorage.setItem("Productlist", msg.d);
fnCallback(json);
$("#product").show();
}
});
},
"aoColumns": [
{ "mDataProp": "Location", "sWidth": "125px" },
{ "mDataProp": "ProductCode", "sWidth": "100px" },
{ "mDataProp": "ProductName", "sWidth": "125px" },
{ "mDataProp": "ProductTypeName", "sWidth": "125px" },
{ "mDataProp": "CurrentStock", "sWidth": "50px" },
{ "mDataProp": "UnitType", "sWidth": "50px" },
{ "mDataProp": "ProductID" },
{ "mDataProp": "LocationID" },
{
"mDataProp": "ProductID", "bSearchable": false, "bSortable": false, "sWidth": "40px",
"mRender": function (data, type, full) {
var str = '<button type="button" id="btnEdit" onclick="openMyModal(\'ProductDetails.aspx?ProductID=' + full.ProductID + '&LocID=' + full.LocationID + '\')">Edit</button>';
return str;
}
}
],
"columnDefs": [
{
"visible": false, "targets": 6
},
{
"visible": false, "targets": 7
},
{
"sClass": "relative-postition-and-break-word"
}
]
});
}
I'm using the datatables plugin and it's working fine for me. However, I'm making multiple calls to populate multiple tables, when I know I could make one AJAX call and store the results in a variable and have each table function use that variable for its data, but I can't get it to work.
I'm using something like to to get the data I need.
var all_data;
$.ajax({
async : false,
url: 'all_data.php',
type: 'GET',
success: function(data) {
all_data = data;
console.log(all_data);
}
})
The idea is to pass all_data variable into my table function (I have several on this one page) without having to make multiple calls. Doing the following returns one column with the letter "a", which isn't right. The data that comes back is JSON coded. I've used the below code, but with the AJAX function as part of the table function:
$("#my_table").DataTable({
"data":all_data
,
"paging": true,
"sDom": '<"top">t<"bottom"><"clear">',
"pageLength": 50,
"order": [[ 4, "desc" ]],
"aoColumns": [
{ "bSortable": true, "width": "0%", "sClass": "lang_body_2", "sTitle": "","visible":false },
{ "bSortable": true, "searchable": false, "width": "10%", "sClass": "lang_body_2 table_names", "sTitle": "" },
{ "bSortable": true, "searchable": false,"width": "20%", "sClass": "lang_body_2", "sTitle": "Database","visible":false},
{ "bSortable": true, "searchable": false ,"width": "20%","sClass": "lang_body_2","sTitle": "National Average","visible":false },
{ "bSortable": true, "searchable": false ,"width": "50%","sClass": "lang_body_2 index_num table_index","sTitle": "" },
],
"columns": [
{ "searchable": true },
{ "searchable": false },
{ "searchable": false },
{ "searchable": false },
{ "searchable": false },
],
"search": {
"search": "gen"
},
"columns": [
{ "width": "20%" },
null,
null,
null,
{ "width": "80%" },
],
"initComplete": function(settings, json) {
colorIndex();}
});
});
What am I doing wrong here? I'm suspecting I have to prepare all_data somehow, but I'm not sure what that might be.
EDIT: If I console.log the data returned, this is what I get (cut off for brevity):
Object {draw: 0, recordsTotal: 484, recordsFiltered: 484, data: Array[484]}
data: Array[484]
[0 … 99]
0: Array[5]
0: "edu"1: "High School"2: "37.90"3: "49.70"4: "76"length: 5
Your code looks fine, the only thing you need to do is
Assign your datatable to a variable and then in your ajax resolve clear, add data and draw the table.
var all_data;
$.ajax({
async : false,
url: 'all_data.php',
type: 'GET',
success: function(data) {
all_data = data;
console.log(all_data);
table.clear().row.add(all_data).draw(); //clear, add data and draw
}
});
// Assign your datatable to a variable
var table = $("#my_table").DataTable({
"data":all_data
,
"paging": true,
"sDom": '<"top">t<"bottom"><"clear">',
"pageLength": 50,
"order": [[ 4, "desc" ]],
"aoColumns": [
{ "bSortable": true, "width": "0%", "sClass": "lang_body_2", "sTitle": "","visible":false },
{ "bSortable": true, "searchable": false, "width": "10%", "sClass": "lang_body_2 table_names", "sTitle": "" },
{ "bSortable": true, "searchable": false,"width": "20%", "sClass": "lang_body_2", "sTitle": "Database","visible":false},
{ "bSortable": true, "searchable": false ,"width": "20%","sClass": "lang_body_2","sTitle": "National Average","visible":false },
{ "bSortable": true, "searchable": false ,"width": "50%","sClass": "lang_body_2 index_num table_index","sTitle": "" },
],
"columns": [
{ "searchable": true },
{ "searchable": false },
{ "searchable": false },
{ "searchable": false },
{ "searchable": false },
],
"search": {
"search": "gen"
},
"columns": [
{ "width": "20%" },
null,
null,
null,
{ "width": "80%" },
],
"initComplete": function(settings, json) {
colorIndex();}
});
});
I am using an autocomplete field to get data from a server and display that in a datatable:
$("#firstname").autocomplete({
source: function (request, response) {
$.ajax({
url: "http://myhost.com/webservices/test3.cfm",
data: request,
success: function (data) {
$('#results').dataTable({
"bProcessing": true,
"bJQueryUI": true,
"bLengthChange": true,
"bFilter": true,
"bAutoWidth": false,
"bRetrieve" : true,
"aaData": data ,
"aoColumns": [
{ "sTitle": "Name", "sName": "name" },
{ "sTitle": "Title", "sName": "title" },
{ "sTitle": "Organization", "sName": "organization" },
{ "sTitle": "Email", "sName": "email" },
{ "sTitle": "Status", "sName": "status" }
]
});
}
});
}
The data return from the ajax call is:
[["Steven, Grek", "President", "Sands Corp.", "steven#yahoo.com", "1"],["Steven, Grek", "Associate", "Alliance Ltd.", "steven#yahoo.com", "1"],["Steven, Grek", "President", "Forest Products Association", "steven#yahoo.com", "1"]]
I get the following errors:
DataTables warning (table id = 'results'): Requested unknown parameter '1' from the data source for row 0
DataTables warning (table id = 'results'): Requested unknown parameter '1' from the data source for row 9
Showing 1 to 10 of 2,147 entries
If I replace "aaData": data
with the response from in the data:
"aaData": [["Steven, Grek", "President", "Sands Corp.", "steven#yahoo.com", "1"],["Steven, Grek", "Associate", "Alliance Ltd.", "steven#yahoo.com", "1"],["Steven, Grek", "President", "Forest Products Association", "steven#yahoo.com", "1"]]
it works.
Any idea what I am doing wrong?
Figured it out with the help of a co-worker:
The typeof data coming from my ajax call is a string.
$("#firstname").autocomplete({
source: function (request, response) {
$.ajax({
url: "http://myhost.com/webservices/test3.cfm",
data: request,
success: function (data) {
var obj = jQuery.parseJSON(data); <---- typeof data is a string
$('#results').dataTable({
"bProcessing": true,
"bJQueryUI": true,
"bLengthChange": true,
"bFilter": true,
"bAutoWidth": false,
"bRetrieve" : true,
"aaData": obj, <---- Use the parsed json object instead
"aoColumns": [
{ "sTitle": "Name", "sName": "name" },
{ "sTitle": "Title", "sName": "title" },
{ "sTitle": "Organization", "sName": "organization" },
{ "sTitle": "Email", "sName": "email" },
{ "sTitle": "Status", "sName": "status" }
]
});
}
});
},
});