数据表不打印ajax数据

时间:2019-06-13 08:53:29

标签: javascript jquery datatables

$.ajax({  
                url:'a.php',  
                method:'POST',  
                data:{s:s1, month:s2, year:s3},  
                dataType:'json',  
                success:function(data){ 
					var a = data[0];
					//var b = data[1];
					// var len = b.length;
					var t = document.getElementById('tbl_1');
                    $(t).find('td:eq(2)').text(a[0].a);
					$(t).find('td:eq(3)').text(a[0].b);
					$(t).find('td:eq(4)').text(a[0].bd);
					
					
					$(t).find('td:eq(5)').text(a[0].ab);
					$(t).find('td:eq(6)').text(a[0].bc);
					
					$(t).find('td:eq(7)').text(a[0].bo);
					
          }
          });

我要打印我的桌子,我一直在关注这两个例子 https://datatables.net/extensions/buttons/examples/initialisation/simple.html https://datatables.net/extensions/buttons/examples/print/columns.html

按钮正在显示并正常工作,但在我的情况下,很少有表单元格从数据库中填充。 ajax工作正常,并且数据正在从数据库显示,但是当我单击打印数据时未显示我的表结构是

<div class="panel-body">
                            <div style = "width:97%" >
							<h3 align="center" style="text-transform: uppercase">------: </h3><br>
      <br>
                                <table id = "tbl_1" class="table table-striped table-bordered table-hover" >
                                    <thead>
                                        <tr>
                                            <th style="font-weight: bold; text-transform: uppercase">Sr.No</th>
    <th style="font-weight: bold; text-transform: uppercase">a</th>
    <th style="font-weight: bold; text-transform: uppercase"> b</th>
    <th style="font-weight: bold; text-transform: uppercase">c </th>
	<th style="font-weight: bold; text-transform: uppercase">d</th>
	<th style="font-weight: bold; text-transform: uppercase">e</th>
	<th style="font-weight: bold; text-transform: uppercase">f</th>
	<th style="font-weight: bold; text-transform: uppercase">g</th>
																						
                                        </tr>
                                    </thead>
                                    <tbody>
									
		<tr>
        <td>1.</td>
        <td>a</td>
        <td id = "af"></td>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
      </tr>
      <tr>
        <td>2.</td>
        <td>b</td>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
      </tr>
	   <tr>
        <td>3.</td>
        <td>c</td>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
      </tr>
      <tr>
        <td>4.</td>
        <td>d</td>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
      </tr>
	  <tr>

								
		
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    

我的JavaScript代码在这里

$(document).ready(function() {
  

		
    $('#tbl_1').DataTable( {
        dom: 'Bfrtip',
        buttons: [
            {
                extend: 'print',
                exportOptions: {
                    columns: ':visible'
                }
            },
            'colvis'
        ],
        // columnDefs: [ {
            // targets: -1,
            // visible: true
        // } ]
    } );

});

数据显示在表格中

enter image description here

但是当我单击打印表时,除了这样的设计值之外,它是空的

enter image description here

我在这里做错了什么?

1 个答案:

答案 0 :(得分:1)

我已经测试过将静态数据放入<td></td> 并使用单元格中的数据进行精细打印

所以您可以显示ajax函数

我的猜测是

/// <td></td>完成从ajax的数据库填充之后,将其放入ajax成功的内部

  $.ajax({  
                url:'a.php',  
                method:'POST',  
                data:{s:s1, month:s2, year:s3},  
                dataType:'json',  
                success:function(data){ 
                    var a = data[0];
                    //var b = data[1];
                    // var len = b.length;
                    var t = document.getElementById('tbl_1');
                    $(t).find('td:eq(2)').text(a[0].a);
                    $(t).find('td:eq(3)').text(a[0].b);
                    $(t).find('td:eq(4)').text(a[0].bd);


                    $(t).find('td:eq(5)').text(a[0].ab);
                    $(t).find('td:eq(6)').text(a[0].bc);

                    $(t).find('td:eq(7)').text(a[0].bo);



         $('#tbl_1').DataTable( {
        dom: 'Bfrtip',
        buttons: [
            {
                extend: 'print',
                exportOptions: {
                    columns: ':visible'
                }
            },
            'colvis'
        ],
        // columnDefs: [ {
            // targets: -1,
            // visible: true
        // } ]
    } );


      }
      });