So drucken Sie Datentabelle mit div-Inhalt

Datatable kann nicht mit Rahmen- und Div-Inhalt gedruckt werden. ich bereits Datatable Druck Plugins versucht, aber es kann nur Datentabelle ..So drucken Sie Datentabelle mit div-Inhalt

HTML drucken:

<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() 
    })

siehe diese Geige ..

Fiddle

bitte vorschlagen ..

Thnks ..

Quelle

2016-08-08 Goku

"_Can Sie mir irgendwelche Lichter auf, wie Sie das tun? _", Vielleicht - wenn Sie uns sagen können, was Sie versuchen zu tun. Was bedeutet "_Print Datentabelle mit div content_"? Wie sind die 'document.write()' Snippets, die mit der Frage in Zusammenhang stehen, außer dass wir Sie (vielleicht) sehen können, einige dataTables Plugins enthalten? – davidkonrad

diese mehrere plugins in einer js-datei hinzugefügt .. deshalb schreibe ich diesen code in 'document.write()' – Goku

Ja, aber das einbinden der plugin-dateien ist eine grundvoraussetzung; Sie würden nie eine jQuery Frage stellen und nur sagen, dass Sie jQuery enthalten haben, aber lassen Sie den interessanten und relevanten Code aus, nicht wahr? :) Ich habe nicht die Absicht, hart zu sein, nur um Ihre Chancen auf eine qualifizierte Antwort zu erhöhen. Ohne genau zu wissen, was genau Sie vorhaben, fürchte ich, dass Ihre Frage unbeantwortet bleibt. Und selbst wenn es beantwortet würde, wäre es für zukünftige Leser nutzlos, Antworten auf nicht spezifizierte Probleme, die die Leute nicht erkennen können, bekommen nicht viel Aufmerksamkeit. – davidkonrad

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() 
     })

Fiddle

Quelle

2016-08-10 07:46:43 mean

-2

Try Methode append in jquery

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 

    $("div").append("<table><tr><td></td></tr></table>"); 


<body> 

<div></div> 

</body>

Quelle

2016-08-08 10:05:39

Darf ich fragen: Warum denkst du, er sollte das versuchen ...? – davidkonrad

So drucken Sie Datentabelle mit div-Inhalt

Antwort

Verwandte Themen