I was wondering, when updating DataTables using AJAX, how do you delete column headers left over from a previous DataTable? I have bDestroy set to true in both of my functions to draw the table, however, one of the tables has fewer columns than the other, and when loading the smaller table after loading the larger one, I get leftover column headers from the larger table.
Here are my two functions:
function combinedAgeGender() {
(function($) {
$('#data').html('<table width="100%" cellspacing="3" cellpadding="0" id="data-entry"></table>');
$('#data-entry').dataTable({
"bProcessing": true,
"bScrollInfinite": true,
"bScrollCollapse": true ,
"bAutoWidth": false,
"iDisplayLength": -1,
"bDestroy": true,
"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": "National males per 100 females" },
{ "sTitle": "Arizona total population (both genders)" },
{ "sTitle": "Arizona male population" },
{ "sTitle": "Arizona female population" },
{ "sTitle": "Arizona % (both genders)" },
{ "sTitle": "Arizona male %" },
{ "sTitle": "Arizona female %" },
{ "sTitle": "Arizona males per 100 females" }
]
});
})(jQuery);
}
function nationalAgeGender() {
(function($) {
$('#data').html('<table width="100%" cellspacing="3" cellpadding="0" id="data-entry"></table>');
$('#data-entry').dataTable({
"bProcessing": true,
"bScrollInfinite": true,
"bScrollCollapse": true ,
"bAutoWidth": false,
"bDestroy": true,
"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 %" },
{ "sTitle": "Males per 100 females" }
]
});
})(jQuery);
}
You need to change on fnDrawCallback like below:
(function($) {
$('#data').html('<table width="100%" cellspacing="3" cellpadding="0" id="data-entry"></table>');
$('#data-entry').dataTable({
"bProcessing": true,
"bScrollInfinite": true,
"bScrollCollapse": true ,
"bAutoWidth": false,
"bDestroy": true,
"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 %" },
{ "sTitle": "Males per 100 females" }
],
"fnDrawCallback": function () {
$('#data-entry thead').html('');
}
});
})(jQuery);
and Let me know !!!
Before this line:
$('#data').html('<table width="100%" cellspacing="3" cellpadding="0" id="data-entry"></table>');
try adding
$('#data-entry').remove();
Since each function calls the $('#data').html(...) function, you are really replacing the entire table.
See this http://jsfiddle.net/DL6Bj/
bqb
Datatables doesn't seems to handle it. Apparently the bDestroy parameter is only for table data.
This worked for me:
$('#myDataTableZone').empty();
$('#myDatatableZone').html('<table id="myDataTable"></table>');
$.getJSON('url', data, function(json) {
$('#myDataTable'.datatable({
"aaData": json.aaData,
"aoColumns": json.aoColumns
});
});
Related
I am using jquery datatable and all my code is working fine. Then I added tooltable attribute the datatable defination with all required js,css and swf files. My code is :
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();
},
"sDom": 'T<"clear">lfrtip',
"oTableTools": {
"sSwfPath": "resources/swf/copy_csv_xls_pdf.swf"
},
"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"}
]
} );
But it is not showing any button for excel,pdf etc.
My resources are :
<link rel="stylesheet" href="resources/css/dataTables.tableTools.css">
<script src="resources/js/jquery-2.1.1.min.js"></script>
<script src="resources/js/jquery.dataTables.min.js"></script>
<script src="resources/js/bootstrap.min.js"></script>
<script src="resources/js/BootSideMenu.js"></script>
<script src="resources/js/TableTools.js"></script>
and I have swf file at "resources/swf/copy_csv_xls_pdf.swf" but I am not able to see any button on my UI.
What is the wrong in my code ?
I've got a datatables table working great and now I'd like to add an additional element. The user can move a slider to select a range, click search, and the table returns only those rows with a specific column value within the range.
Here's the script for the filtering:
$.fn.dataTable.ext.search.push(
function( settings, data, dataIndex ) {
var min = parseInt( $('.leftLabel').val(), 10 );
var max = parseInt( $('.rightLabel').val(), 10 );
var score = parseFloat( data[11] ) || 0;
if ( ( isNaN( min ) && isNaN( max ) ) ||
( isNaN( min ) && score <= max ) ||
( min <= score && isNaN( max ) ) ||
( min <= score && score <= max ) )
{
return true;
}
return false;
}
);
$(document).ready(function() {
$('#slider_search').click(function () {
var table = $('#total_datatable').DataTable();
table.draw();
} );
});
And here's the script to originally draw the table:
$(document).ready(function() {
$("#total_datatable").DataTable({
"serverSide": true,
"ajax": {
"url":"compare_2.php",
"type":"GET"
} ,
"paging": true,
"pageLength": 100,
"order": [[ 10, "asc" ],[11,"desc"],[1,"asc"]],
"aoColumns": [
{ "bSortable": true, "width": "0%", "sClass": "lang_body_2", "sTitle": "Provider ID" },
{ "bSortable": true, "width": "20%", "sClass": "lang_body_2", "sTitle": "Hospital Name" },
{ "bSortable": true, "width": "20%", "sClass": "lang_body_2", "sTitle": "Address","visible":false },
{ "bSortable": true, "width": "20%","sClass": "lang_body_2","sTitle": "City" },
{ "bSortable": true, "width": "20%", "sClass": "lang_body_2", "sTitle": "State",},
{ "bSortable": true, "width": "20%", "sClass": "lang_body_2", "sTitle": "ZIP Code"},
{ "bSortable": true, "width": "20%","sClass": "lang_body_2","sTitle": "County","visible":false },
{ "bSortable": true, "width": "0%", "sClass": "lang_body_2", "sTitle": "Phone","visible":false },
{ "bSortable": true, "width": "20%", "sClass": "lang_body_2", "sTitle": "Condition"},
{ "bSortable": true, "width": "20%", "sClass": "lang_body_2", "sTitle": "Measure ID"},
{ "bSortable": true, "width": "20%","sClass": "lang_body_2","sTitle": "Measure Name" },
{ "bSortable": true, "width": "20%", "sClass": "lang_body_2", "sTitle": "Score",},
{ "bSortable": true, "width": "20%", "sClass": "lang_body_2", "sTitle": "Sample"},
{ "bSortable": true, "width": "20%","sClass": "lang_body_2","sTitle": "Footnote","visible":false },
{ "bSortable": true, "width": "20%", "sClass": "lang_body_2", "sTitle": "Measure Start","visible":false },
{ "bSortable": true, "width": "20%", "sClass": "lang_body_2", "sTitle": "Measure End","visible":false },
{ "bSortable": true, "width": "20%","sClass": "lang_body_2","sTitle": "Index","visible":false },
],
"sDom": 'f<"clear">rtip',
});
});
The slider values are populated in here:
<div class="leftLabel" style="display:inline-block;"></div>
<div class="rightLabel" style="display:inline-block;"></div>
What should happen is that after you select the slider values and click the #slider_search button, the table should redraw with the same settings as the original table, but filtered to the specific rows. I've used this range filtering before and my script is based off of this. I tried doing it with input boxes like the Datatables example and it works, but I want it to work based on the slider values and only when the user clicks search (the example updates the table as soon as you input).
So, the question is: What am I doing wrong that's causing this not to work in the manner that I'm looking for?
Any direction would be appreciated.
This probably just needs another pair of eyes as I am missing something simple. Everything was working and I think I did something simple someplace.
$(document).ready(function () {
$('#dblist').on('change', function () {
var selected = $("select option:selected").text();
tablefill(selected);
});
$('#search').click(function () {
var selected = $("select option:selected").text();
tablefill(selected);
});
function tablefill(selected) {
$('#sbar').show();
$('#table_id').dataTable({
"sAjaxSource": '/php/connect/searchtablequery.php',
"bProcessing": true,
"sScrollY": "500px",
"bDeferRender": true,
"bDestroy": true,
"sAjaxDataProp": "",
"fnServerParams": function (aoData) {
aoData.push({ "name": "db", "value": selected });
},
"aoColumnDefs": [
{ "bVisible": false, "aTargets": [1] }
],
"aoColumns": [
{ "mData": "calldate" },
{ "mData": "recordingfile" },
{ "mData": "uniqueid" },
{ "mData": "src" },
{ "mData": "did" },
{ "mData": "lastapp" },
{ "mData": "dst" },
{ "mData": "disposition" },
{ "mData": "duration" },
{ "mData": "userfield" },
{ "mData": "accountcode"}],
"iDisplayLength": 20,
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"sDom": '<"H"Tfr>t<"F"ip>',
"oTableTools": {
"sSwfPath": "/DataTables/extras/TableTools/media/swf/copy_csv_xls_pdf.swf",
"aButtons": [
"copy", "csv", "xls", "pdf",
{
"sExtends": "collection",
"sButtonText": "Save",
"aButtons": ["csv", "xls", "pdf"]
}
]
}
});
}
});
If you see any improvements or useless code do tell me aswell, I am always looking to learn.
On my previous question, I have added the JQuery library and have fixed my style errors, however, I am now getting a new error: "Object doesn't support property or method 'dataTable'.
Here is my updated HTML code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<script type="text/javascript" src="/CensusDatabase/js/jquery-1.9.1.min.js"></script>
<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>
<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 report to display.</i>
</div>
</div>
</div>
</body>
</html>
And here is my JavaScript code, again:
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 the problem is now?
You have no table in your html code
<table id="data-entry" class="display">
<thead>
<tr>
<th>ID</th>
<th>Skill name</th>
<th>Sklill Leverl</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
if you are using jquery data-table plugin the visit the following link for more information
jquery datatable
I'm having the same issue, but in your case it looks like you were using 'dataTable' instead of 'DataTable'. Let us know how you fixed the problem.
I made a large table for jquery.datatables which is works great for me.
but i need a class name set to each td element relative to its column.
fo example i want a column (including th and all td's) have a class="volume".
there is this issues:
i use this code to initialize the class but it is not working.
"aoColumnsDefs": [
{ "sClass": "volume", "aTargets": [2] }
]
EDIT:
my table is created and refeshes dynamically. and it is made of a js-array which i prefer not to touch it ie. just to add class names
EDIT:
iuse this code to itialize my table:
$('#dataTable').dataTable({
"aaData": dataCnt,
"aoColumnsDefs": [
{ "sClass": "volume", "aTargets": [2] }
],
"aoColumns": columnsHd,
"bStateSave": true,//saving status in coockie
"iCookieDuration": 10,//coockie life duration in seconds
"sScrollX": "100%",
"sScrollY": (winHei-200),
"sDom": '<"H"RCfrl>t<p"F"i>',
"oColVis": {
"buttonText": " ",
"bRestore": true,
"sAlign": "left"
},
"aLengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]]
});
i hope it helps
*EIDT: *
columnsHd is an array which is created dynamicaly from my json headers and now is exactly:
[
{ "sTitle": "macaddr" },
{ "sTitle": "lat" },
{ "sTitle": "ip" },
{ "sTitle": "clientname" },
{ "sTitle": "relay0mask" },
{ "sTitle": "relay0stat" },
{ "sTitle": "relay1stat" },
{ "sTitle": "clientid" },
{ "sTitle": "bldname" },
{ "sTitle": "uptime" },
{ "sTitle": "current" },
{ "sTitle": "temperature" },
{ "sTitle": "softver" },
{ "sTitle": "volume" },
{ "sTitle": "hardver" },
{ "sTitle": "relay1mask" },
{ "sTitle": "pic" },
{ "sTitle": "comment" },
{ "sTitle": "lon" },
{ "sTitle": "rtt" },
{ "sTitle": "bldaddr" },
]
My guess is that "aoColumns": columnsHd, overrides the "aoColumnsDefs": [ { "sClass": "volume", "aTargets": [2] } , ],
Try to replace their order in code
Or just add the class directly in "aoColumns": columnsHd,
like this "sClass": "volume"
complete code :
try changing { "sTitle": "ip" }, into { "sTitle": "ip", "sClass": "volume" },
and remove the
"aoColumnsDefs": [
{ "sClass": "volume", "aTargets": [2] }
],
Note that in datatables 1.10 you should use aoColumnDefs
The answer for the question is
"aoColumnsDefs": [
{ "sClass": "classname", "aTargets": [whatever target you want to apply] }
]
to use other options: (ref datatable)