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"
}
]
});
}
Related
i have select dropdown which picks no. of pages to be shown as jquery pagination. everything is fine but when it comes to ie. select dropdown collapses.see image.
i also refered link
but it seems it will not work for me.I am doubtful that is it ie default behaviour and can't do much....
<script type="text/javascript">
$(document).ready(function() {
var url="${pageContext.request.contextPath}/aaa/aaa/aaa";
url+="?fromDate=${fromDate}";
url+="&toDate=${toDate}";
url+="&callType=${callType}";
url+="&fullListSize=0";
var table = $('#call_history_detail').DataTable({
"preDrawCallback": function( settings ) {
$("#searchTable").val("");
$('body').modalProgress("show");
},
"drawCallback": function( settings ) {
wordWrap("userName", 80, 2);
$('body').modalProgress("hide");
},
"processing": true,
"serverSide": true,
"searching": false,
//"ajax": url,
"ajax": {
"contentType": "application/json",
"url": url,
"data": function ( d ) {
var drawValue = d.draw;
var length = d.length;
var start = d.start;
var sortCol = d.order[0].column;
var sortType = d.order[0].dir;
return "draw=" + drawValue + "&length=" + length + "&start=" + start + "&sortCol=" + sortCol + "&sortType=" + sortType;
}
},
"oLanguage": {
"sLengthMenu": "Show _MENU_ entries. <img src='${pageContext.request.contextPath}/img/ico_info.png' class='tt'" +
"title='The search function will only search the page you are currently viewing. To do a more expansive search, increase the entries per page. Increasing the entries per page can increase load time.' />"
},
"lengthMenu": [ [25, 50, 100, 500, 1000, 5000], [25, 50, 100, 500, 1000, 5000] ],
"columns": [
{ "name": "userName" },
{ "name": "callType"},
{ "name": "date" },
{ "name": "time" },
{ "name": "from" },
{ "name": "to" },
{ "name": "cost", "width": "10%" },
{ "name": "duration", "width": "10%" }
],
"columnDefs": [
{
"class": "userName",
"data": "userName",
"defaultContent": "",
"targets": 0
},
{
"class": "callType",
"data": "callType",
"defaultContent": "",
"targets": 1
},
{
"class": "date-time",
"data": "timeStart",
"render": function (data) {
return getShortDate(data);
},
"defaultContent": "",
"targets": 2
},
{
"class": "date-time",
"data": "timeStart",
"render": function (data) {
return getTimeString(data);
},
"defaultContent": "",
"targets": 3
},
{
"class": 'number',
"data": "origNumber",
"defaultContent": "",
"orderable": true,
"targets": 4
},
{
"class": 'number',
"data": "destNumber",
"defaultContent": "",
"orderable": true,
"targets": 5
},
{
"class": 'cost',
"data": "totalAmount",
"render": function (data) {
return "$"+data.toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, '$1,');
},
"defaultContent": "",
"targets": 6
},
{
"class": 'duration',
"data": "callDuration",
"defaultContent": "00:00:00",
"orderable": false,
"targets": 7
}
],
"order": [[ 2, "desc" ]]
});
$('#backToSummary').click(function(e){
e.preventDefault();
$('form#call-history-options').submit();
});
});</script>
Add this to the css div z-index: value;
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 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.
I am using jquery datatables 1.10 with ASP.NET 4.5. The code works with no issues when debugging. When I run it, it doesn't fill the data in table and leaves as empty data set. This error showed up in FireBug.
Code:
$('#dtGroups').dataTable({
"oLanguage": {
"sZeroRecords": "No records to display",
"sSearch": "Search "
},
"aLengthMenu": [[25, 50, 100, 150, 250, 500, -1], [25, 50, 100, 150, 250, 500, "All"]],
"iDisplayLength": 25,
"bSortClasses": false,
"bStateSave": false,
"bPaginate": true,
"bAutoWidth": false,
"bProcessing": true,
"bServerSide": true,
"bDestroy": true,
"bJQueryUI": false,
"sAjaxSource": "<%= ResolveUrl("~/Handler/GetData") %>",
"sPaginationType": "full_numbers",
"bDeferRender": true,
"fnServerParams": function (aoData) {
},
"aoColumnDefs": [
{
"bVisible": false,
"aTargets": [0]
},
{
"aTargets": [1],
"mData": null,
"mRender": function (data, type, row) {
var enc = encodeURI(row[1]);
return "<a href='SomePage.aspx?qs="+enc+"'>" + row[1] + "</a>";
}
}
],
"fnServerData": function (sSource, aoData, fnCallback) {
var jsonAOData = JSON.stringify(aoData);
$.ajax({
"dataType": 'json',
"contentType": "application/json; charset=utf-8",
"type": "POST",
"url": sSource,
"data": "{ jsonAOData : '" + jsonAOData + "' }",
"success":
function (result) {
var json = jQuery.parseJSON(result.d);
console.log(json);
fnCallback(JSON.parse(result.d))
},
"error":
function (XMLHttpRequest, textStatus, errorThrown) {
alert(XMLHttpRequest + ": Error: " + XMLHttpRequest.responseText + ", " + textStatus + ": " + errorThrown);
}
});
}
});
Any help would be appreciated.
Please read the documentation for options http://datatables.net/reference/option/
Also read how to convert your options to datatables 1.10. https://datatables.net/upgrade/1.10-convert
fnServerData is not an option datatables accepts.
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" }
]
});
}
});
},
});