datatables не печатает данные ajax

Question

$.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
        // } ]
    } );

});

данные отображаются в таблицах

но при нажатии на печать таблица пустакроме проектных значений, подобных этому

что я здесь не так делаю?

Answer 1

Я проверил это, поместив статические данные в <td></td> и печать работала нормально, печать с данными в ячейке

так вы можете показать свою функцию AJAX

Мое предположение:

// помещаем эту часть в успех ajax после завершения заполнения <td></td> из базы данных в 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
        // } ]
    } );


      }
      });