Get Print content in a full screen not in dataTable itself
Get Print content in a full screen not in dataTable itself
gauravshah
Posts: 2Questions: 1Answers: 0
I use below code:
var oTable=$('#datatable2').dataTable({
"bStateSave": true,
"bServerSide": true,
"sAjaxSource": "projectlist",
"bAutoWidth": false,
"bProcessing": true,
"oLanguage": {
"sLengthMenu": "Show _MENU_ records per page ",
"sEmptyTable": "No Records Available",
"oPaginate": {
"sPrevious": "",
"sNext": ""
}
},
"aoColumns": [
{ "mData": null,"bSortable": false, "bVisible": true, "sClass": "centertext" },
{ "mData": "ietitle"},
{ "mData": "iecode"},
{ "mData": null,"bSortable": true,
"mRender" : function(obj){
var status = obj.status;
if(status != null && status !=''){
var progressdiv ="<div>"
+status+"</div>" ;
}
else{
var progressdiv ="<div>"
+"Not available</div>" ;
}
return progressdiv;
}
},
{ "mData": null, "bSortable": false,
"mRender" : function(obj){
var progress = obj.progress;
var percent = (progress/8)*100;
var percentage =Math.round(percent);
var progressdiv ="<div data-toggle='tooltip' title='"
+ percentage +"% Complete'"
+"data-container='body' data-placement='top' style='margin-bottom:0px; background-color:#A59898' class='progress'>"
+"<div class='progress-bar progress-bar-info'"
+ "role='progressbar'"
+ "aria-valuenow='"
+ progress +"' aria-valuemin='0' "
+ "aria-valuemax='100' style='width:"
+ percent + "%'> <span>"+percentage+"% Complete</span></div></div>" ;
return progressdiv;
}
},
{ "mData": null,
"bSortable": false,
"mRender" : function(
obj) {
var iecode = obj.iecode;
var _id = obj._id;
var editRemoveDiv = "<div><a data-toggle='tooltip' data-container='body' title='View Project' class='glyphicon glyphicon-file text-system' data-placement='top' data-original-title='View' href='<%=application.getContextPath() %>/manageProjects/viewProject?id="
+ iecode
+ "'></i></a>"
+ " "
+ "<a href='#' data-toggle='tooltip' name='"+ iecode+"' data-container='body' title='Edit Project' class='glyphicon glyphicons-pencil selectPopup' data-placement='top'"
+ "></a>"
+" "
+"<a href='#' name='"+ iecode +"' data-container='body' class='deletepopup' title='Delete Project' onclick='popup()' data-effect='mfp-flipInY' data-toggle='tooltip' data-placement='top' data-id='<%=application.getContextPath() %>/deletproject?id="
+ iecode
+ "'><span class=' popup glyphicon glyphicon-trash text-danger'></span></a></div>";
return editRemoveDiv;
}
}
],
"aaSorting" : [ [ 1, 'asc' ] ],
"aLengthMenu" : [
[ 5, 10, 15, 20, -1 ],
[ 5, 10, 15, 20, "All" ] ],
"iDisplayLength" : 10,
"sDom": '<"dt-panelmenu clearfix"lTfr>t<"dt-panelfooter clearfix"ip>',
"oTableTools": {
"sSwfPath": "<%=application.getContextPath() %>/vendor/plugins/datatables/extensions/TableTools/swf/copy_csv_xls_pdf.swf",
"aButtons": [
{
"sExtends": "copy",
"mColumns": [1, 2, 3, 4]
},
{
"sExtends": "csv",
"mColumns": [1, 2, 3, 4]
},
{
"sExtends": "pdf",
"mColumns": [1, 2, 3, 4]
},
{
"sExtends": "print",
"mColumns": [0,1, 2, 3, 4, 5],
"sMessage": 'Click print or cancel <button>Print</button>',
"fnClick": function (nButton, oConfig, oFlash) {
oTable.fnSetColumnVis(5, false);
$('div.dataTables_scrollHead').show();
$(window).keyup(function(){
oTable.fnSetColumnVis(5, true);
});
}
},
]
},
"fnRowCallback": function(nRow, aData, iDisplayIndex) {
var oSettings = oTable.fnSettings();
$("td:first", nRow).html(oSettings._iDisplayStart + iDisplayIndex + 1);
return nRow;
},
});
This discussion has been closed.
Answers
When I use {
"sExtends": "print",
"mColumns": [0,1, 2, 3, 4,5]
},
I get the content in a full screen. As I want to hide column 5 while printing , I have added below code :
"sMessage": 'Click print or cancel <button>Print</button>',
"fnClick": function (nButton, oConfig, oFlash) {
oTable.fnSetColumnVis(5, false);
$('div.dataTables_scrollHead').show();
$(window).keyup(function(){
oTable.fnSetColumnVis(5, true);
});
}