jquery - How to print Data-table with div content -
unable print datatable border , div content. tried datatable print plugins can print datatable..
html :
<div class="col-md-12 col-xs-12 col-sm-12 panel panel-default" id="testreporttable"> <button class="btn btn-default" id="btnprint">print</button> <div class="col-md-12 col-xs-12 col-sm-12 text-center" > <h4>stack overflow test</h4> </div> <div class="col-md-12 col-xs-12 col-sm-12"> <h5><b>test page</b></h5> </div> <div class="col-md-12 col-xs-12 col-sm-12 table-responsive"> <table class="table table-striped table-bordered table-responsive" id="testreporttable"> <thead> <tr> <th>name</th> <th>location</th> <th>duration</th> <th>remarks</th> </tr> </thead> </table> </div> </div> javascript :
var data = [ {name:"fiat", location:"mumbai", duration:"2 hours",remarks:"ready"}, {name:"tata", location:"mumbai", duration:"3 hours",remarks:"ready"} ]; var ops_table = $('#testreporttable').datatable( { "bpaginate": false, "blengthchange": false, "bfilter":true, "binfo" : false, "olanguage": { "ssearch": "" }, "aocolumns":[{"bsearchable": true},{"bsearchable":true},{"bsearchable":true},{"bsearchable":true}] }); var dataarray = []; $.each(data,function(i,datafirst) {dataarray.push([datafirst.name,datafirst.location,datafirst.duration,datafirst.remarks]); }) ops_table.fncleartable(); ops_table.fnadddata(dataarray); function getprint(){ var divtoprint=$('#testreporttable'); var newwin=window.open('','print-window'); newwin.document.open(); newwin.$(document.body).append('<html><body onload="window.print()">'+divtoprint.innerhtml+'</body></html>'); newwin.document.close(); settimeout(function(){newwin.close();},10); } $('#btnprint').on('click',function(){ getprint() }) please refer fiddle..
please suggest..
thnks..
html:-
<div class="col-md-12 col-xs-12 col-sm-12 panel panel-default" id="testreporttable"> <button class="btn btn-default" id="btnprint">print</button> <div id="corporateinfoid"> <div class="col-md-12 col-xs-12 col-sm-12 text-center" > <h4>stack overflow test</h4> </div> <div class="col-md-12 col-xs-12 col-sm-12"> <h5><b>test page</b></h5> </div> <div class="col-md-12 col-xs-12 col-sm-12 table-responsive"> <table class="table table-striped table-bordered table-responsive" id="testreporttable"> <thead> <tr> <th>name</th> <th>location</th> <th>duration</th> <th>remarks</th> </tr> </thead> </table> </div> </div> </div> jquery:-
var data = [ {name:"fiat", location:"mumbai", duration:"2 hours",remarks:"ready"}, {name:"tata", location:"mumbai", duration:"3 hours",remarks:"ready"} ]; var ops_table = $('#testreporttable').datatable( { "bpaginate": false, "blengthchange": false, "bfilter":true, "binfo" : false, "olanguage": { "ssearch": "" }, "aocolumns":[{"bsearchable": true},{"bsearchable":true},{"bsearchable":true},{"bsearchable":true}] }); var dataarray = []; $.each(data,function(i,datafirst) {dataarray.push([datafirst.name,datafirst.location,datafirst.duration,datafirst.remarks]); }) ops_table.fncleartable(); ops_table.fnadddata(dataarray); function getprint(){ var divtoprint=$('#testreporttable'); var htmltoprint = '' + '<style type="text/css">' + 'table th, table td {' + 'border:1px solid #000;' + 'padding;0.5em;' + '}' + '.pagination{' + 'display:none;' + '}' + '.datatables_filter{' + 'display:none;' + '}' + '</style>'; var osettings = ops_table.fnsettings(); osettings._idisplaylength = -1; ops_table.fndraw(); var newwin=window.open('','print-window'); newwin.document.open(); newwin.$(document.body).append('<html><body onload="window.print()">'+htmltoprint+divtoprint.innerhtml+'</body></html>'); osettings._idisplaylength = 10; ops_table.fndraw(); newwin.document.close(); settimeout(function(){newwin.close();},10); } $('#btnprint').on('click',function(){ getprint() })
Comments
Post a Comment