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 ?
Related
DataTable is showing but only after I change number of items per page. Similarly, pagination is only working if I search an item.
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
var col = [{
"mData": "row1"
}, {
"mData": "row2"
}, {
"bSortable": false,
"mData": null,
"sTitle": "Actions",
"bSearchable": false,
"mRender": function(data, type, full) {
return '<img alt="Download" src="https://upload.wikimedia.org/wikipedia/commons/e/e3/Ppbc_icon_download.png" title="Download"/>';
}
}];
var ss = JSON.parse(xmlhttp.responseText);
$('#myTable').dataTable({
"aaData": ss,
"aoColumns": col,
"bDestroy": true
});
}
};
Instead of aoColumns, used columns.
var col = [{
"mData": "row1",
"sTitle": "row1"
}, // <-- which values to use inside object
{
"mData": "row2",
"sTitle": "row2"
}, {
"bSortable": false,
"mData": null,
"sTitle": "Download",
"bSearchable": false,
"mRender": function(data, type, full) {
return '<img alt="Download" src="https://upload.wikimedia.org/wikipedia/commons/e/e3/Ppbc_icon_download.png" title="Download"/>';
}
}];
JSON.parse(xmlhttp.responseText);
var ss = $('#myTable').dataTable({
"aaData": ss,
"columns": col,
"bDestroy": true
});
}
};
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);
}
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 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" }
]
});
}
});
},
});
This question is unlikely to help any future visitors; it is only relevant to a small geographic area, a specific moment in time, or an extraordinarily narrow situation that is not generally applicable to the worldwide audience of the internet. For help making this question more broadly applicable, visit the help center.
Closed 9 years ago.
I am trying to use DataTables in my page, and for some reason, I am getting "JQuery is undefined" errors when viewing the errors in my browser. Here is my HTML code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<script type="text/javascript" charset="utf-8" src="/CensusDatabase/js/jquery.dataTables-1.9.4.min.js" ></script>
<script type="text/javascript" src="/CensusDatabase/js/DrawTable.js" ></script>
<head>
<title>My Census Data</title>
<style type="text/css">
body {
color: black;
background-color: #ffaacc;
font-family: "Trebuchet MS", "Calibri", sans-serif
}
h1 {
font-family: "Trebuchet MS", "Calibri", sans-serif
}
</style>
</head>
<body>
<h1>My Census Data</h1>
<div class="census">
<div id="block-system-main">
<h2>Reports</h2>
<ul>
<li>National age and gender data</li>
<li>Arizona age and gender data</li>
<li>Combined age and gender data</li>
<li>National race data</li>
<li>Arizona race data</li>
<li>Combined race data</li>
</ul>
<div id="reportsData"><i>Please select a list to display.</i></div>
</div>
</div>
And here is my JavaScript code:
function nationalAgeGender() {
(function($) {
$('#data').html('<table width="100%" cellspacing="3" cellpadding="0" id="data-entry"></table>');
$('#data-entry').dataTable({
"bProcessing": true,
"bScrollInfinite": true,
"sScrollX": "160%",
"bScrollCollapse": true ,
"bAutoWidth": false,
"sScrollY": "100%",
"iDisplayLength": -1,
"sDom": '<"top">rt<"bottom">',
"aaSorting": [],
"sAjaxSource": "/CensusDatabase/database_scripts/NationalAgeGender.php",
"aoColumns": [
{ "sTitle": "Age group" },
{ "sTitle": "Total population (both genders)" },
{ "sTitle": "Male population" },
{ "sTitle": "Female population" },
{ "sTitle": "% (both genders)" },
{ "sTitle": "Male %" },
{ "sTitle": "Female %" }
]
});
})(jQuery);
}
function arizonaAgeGender() {
(function($) {
$('#data').html('<table width="100%" cellspacing="3" cellpadding="0" id="data-entry"></table>');
$('#data-entry').dataTable({
"bProcessing": true,
"bScrollInfinite": true,
"sScrollX": "160%",
"bScrollCollapse": true ,
"bAutoWidth": false,
"sScrollY": "100%",
"iDisplayLength": -1,
"sDom": '<"top">rt<"bottom">',
"aaSorting": [],
"sAjaxSource": "/CensusDatabase/database_scripts/ArizonaAgeGender.php",
"aoColumns": [
{ "sTitle": "Age group" },
{ "sTitle": "Total population (both genders)" },
{ "sTitle": "Male population" },
{ "sTitle": "Female population" },
{ "sTitle": "% (both genders)" },
{ "sTitle": "Male %" },
{ "sTitle": "Female %" }
]
});
})(jQuery);
}
function combinedAgeGender() {
(function($) {
$('#data').html('<table width="100%" cellspacing="3" cellpadding="0" id="data-entry"></table>');
$('#data-entry').dataTable({
"bProcessing": true,
"bScrollInfinite": true,
"sScrollX": "160%",
"bScrollCollapse": true ,
"bAutoWidth": false,
"sScrollY": "100%",
"iDisplayLength": -1,
"sDom": '<"top">rt<"bottom">',
"aaSorting": [],
"sAjaxSource": "/CensusDatabase/database_scripts/CombinedAgeGender.php",
"aoColumns": [
{ "sTitle": "Age group" },
{ "sTitle": "National total population (both genders)" },
{ "sTitle": "National male population" },
{ "sTitle": "National female population" },
{ "sTitle": "National % (both genders)" },
{ "sTitle": "National male %" },
{ "sTitle": "National female %" },
{ "sTitle": "Arizona total population (both genders)" },
{ "sTitle": "Arizona male population" },
{ "sTitle": "Arizona female population" },
{ "sTitle": "Arizona % (both genders)" },
{ "sTitle": "Arizona male %" },
{ "sTitle": "Arizona female %" }
]
});
})(jQuery);
}
function nationalRace() {
(function($) {
$('#data').html('<table width="100%" cellspacing="3" cellpadding="0" id="data-entry"></table>');
$('#data-entry').dataTable({
"bProcessing": true,
"bScrollInfinite": true,
"sScrollX": "160%",
"bScrollCollapse": true ,
"bAutoWidth": false,
"sScrollY": "100%",
"iDisplayLength": -1,
"sDom": '<"top">rt<"bottom">',
"aaSorting": [],
"sAjaxSource": "/CensusDatabase/database_scripts/NationalRace.php",
"aoColumns": [
{ "sTitle": "Category" },
{ "sTitle": "White" },
{ "sTitle": "White %" },
{ "sTitle": "Black or African-American" },
{ "sTitle": "Black or African-American %" },
{ "sTitle": "Native American" },
{ "sTitle": "Native American %" },
{ "sTitle": "Asian" },
{ "sTitle": "Asian %" },
{ "sTitle": "Native Hawaiian or Pacific Islander" },
{ "sTitle": "Native Hawaiian or Pacific Islander %" },
{ "sTitle": "Some other race" },
{ "sTitle": "Some other race %" }
]
});
})(jQuery);
}
function arizonaRace() {
(function($) {
$('#data').html('<table width="100%" cellspacing="3" cellpadding="0" id="data-entry"></table>');
$('#data-entry').dataTable({
"bProcessing": true,
"bScrollInfinite": true,
"sScrollX": "160%",
"bScrollCollapse": true ,
"bAutoWidth": false,
"sScrollY": "100%",
"iDisplayLength": -1,
"sDom": '<"top">rt<"bottom">',
"aaSorting": [],
"sAjaxSource": "/CensusDatabase/database_scripts/ArizonaRace.php",
"aoColumns": [
{ "sTitle": "Category" },
{ "sTitle": "White" },
{ "sTitle": "White %" },
{ "sTitle": "Black or African-American" },
{ "sTitle": "Black or African-American %" },
{ "sTitle": "Native American" },
{ "sTitle": "Native American %" },
{ "sTitle": "Asian" },
{ "sTitle": "Asian %" },
{ "sTitle": "Native Hawaiian or Pacific Islander" },
{ "sTitle": "Native Hawaiian or Pacific Islander %" },
{ "sTitle": "Some other race" },
{ "sTitle": "Some other race %" }
]
});
})(jQuery);
}
function combinedRace() {
(function($) {
$('#data').html('<table width="100%" cellspacing="3" cellpadding="0" id="data-entry"></table>');
$('#data-entry').dataTable({
"bProcessing": true,
"bScrollInfinite": true,
"sScrollX": "160%",
"bScrollCollapse": true ,
"bAutoWidth": false,
"sScrollY": "100%",
"iDisplayLength": -1,
"sDom": '<"top">rt<"bottom">',
"aaSorting": [],
"sAjaxSource": "/CensusDatabase/database_scripts/NationalRace.php",
"aoColumns": [
{ "sTitle": "Category" },
{ "sTitle": "White (National)" },
{ "sTitle": "White % (National)" },
{ "sTitle": "Black or African-American (National)" },
{ "sTitle": "Black or African-American % (National)" },
{ "sTitle": "Native American (National)" },
{ "sTitle": "Native American % (National)" },
{ "sTitle": "Asian (National)" },
{ "sTitle": "Asian % (National)" },
{ "sTitle": "Native Hawaiian or Pacific Islander (National)" },
{ "sTitle": "Native Hawaiian or Pacific Islander % (National)" },
{ "sTitle": "Some other race (National)" },
{ "sTitle": "Some other race % (National)" },,
{ "sTitle": "White (Arizona)" },
{ "sTitle": "White % (Arizona)" },
{ "sTitle": "Black or African-American (Arizona)" },
{ "sTitle": "Black or African-American % (Arizona)" },
{ "sTitle": "Native American (Arizona)" },
{ "sTitle": "Native American % (Arizona)" },
{ "sTitle": "Asian (Arizona)" },
{ "sTitle": "Asian % (Arizona)" },
{ "sTitle": "Native Hawaiian or Pacific Islander (Arizona)" },
{ "sTitle": "Native Hawaiian or Pacific Islander % (Arizona)" },
{ "sTitle": "Some other race (Arizona)" },
{ "sTitle": "Some other race % (Arizona)" }
]
});
})(jQuery);
}
Does anyone know what is wrong here?
Seem like you're not include jQuery library:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>