How to Add Space Between Length Menu and Table Tools Button in DOM of DataTable?

How to Add Space Between Length Menu and Table Tools Button in DOM of DataTable?

ScrumGuy000ScrumGuy000 Posts: 2Questions: 0Answers: 0
edited December 2012 in General
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.
[code]
TableTools.BUTTONS.download = {
"sAction": "text",
"sTag": "default",
"sFieldBoundary": "",
"sFieldSeperator": "\t",
"sNewLine": "
",
"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" }]

}
});
});
[/code]
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...
This discussion has been closed.