I am having trouble formatting the header of my datatable the way I would like. I have the length menu and table tools button right next to each other and I would like there to be a space in between them. The only way I've found to solve my problem is to add margin-left: 1em; in the div.DTTT_container class. I cannot do this because I have several datatables and not all need to look like the one I'm working on. Below is my javascript for setting up the datatable.
TableTools.BUTTONS.download = {
"sAction": "text",
"sTag": "default",
"sFieldBoundary": "",
"sFieldSeperator": "\t",
"sNewLine": "<br>",
"sToolTip": "",
"sButtonClass": "DTTT_button_text",
"sButtonClassHover": "DTTT_button_text_hover",
"sButtonText": "Download",
"mColumns": "all",
"bHeader": true,
"bFooter": true,
"sDiv": "",
"fnMouseover": null,
"fnMouseout": null,
"fnClick": function (nButton, oConfig) {
var oParams = this.s.dt.oApi._fnAjaxParameters(this.s.dt);
var iframe = document.createElement('iframe');
iframe.style.height = "0px";
iframe.style.width = "0px";
//Add the params
AddExternalFiltersFPF(oParams, true);
//iframe.src = oConfig.sUrl + "?" + $.param(oParams);
//document.body.appendChild(iframe);
$.ajax({
url: oConfig.sUrl + "?" + $.param(oParams),
type: 'GET',
contentType: 'text/csv',
data: 'text/csv',
success: function (data) {
alert('Hi');
iframe.src = data;
}
});
document.body.appendChild(iframe);
},
"fnSelect": null,
"fnComplete": null,
"fnInit": null
};
//Add External Filters for datatables serverside post
function AddExternalFiltersFPF(params, isExport){
params.push({ "name": "Filter0", "value": $('#ctl00_MainContent_HouseholdId').val() });
if (isExport) {
params.push({ "name": "IsExport", "value": isExport });
}
}
$(document).ready(function () {
var oTable;
oTable = $('#FPFHistory').dataTable({
"bJQueryUI": true,//use existing jquery ui theme
"iDisplayLength": 10,//default to 10 rows
"bServerSide": true, //server side processing
"sAjaxSource": "/api/Members/GetFPFHistory",//server side processing location
"fnServerData": function (sSource, aoData, fnCallback) {
/* Add some extra data to the sender */
AddExternalFiltersFPF(aoData, false);
$.getJSON(sSource, aoData, function (json) {
/* Do whatever additional processing you want on the callback, then tell DataTables */
fnCallback(json);
});
},
"sScrollX": "100%",//allow for screen size change
"bProcessing": true,//busy indicator
"aoColumns": [
{ "sName": "sponsor" },
{ "sName": "promotion_name_short" },
{ "sName": "eff_start_date" },
{ "sName": "issued_dol" },
{ "sName": "redeemed_dol" },
{ "sName": "expired_dol" },
{ "sName": "eff_end_date" }
],
"oLanguage": {
"sLengthMenu": "Results Per Page: _MENU_"
},
"sDom": '<"H"lTfr>t<"F"ip>',//used for download/export
"oTableTools": {//used for download/export
"sSwfPath": "/Style/media/swf/copy_csv_xls.swf",
"aButtons": [{ "sExtends": "download", "sButtonText": "Export", "sUrl": "/api/Members/GetFPFHistoryExport" }]
}
});
});
Please let me know if you need any more code, and any help would be greatly appreciated! I've been struggling on this for quite awhile...
