datatables填充PHP數據的子表

Question

我一直在嘗試理清DataTables的child rows,與我的數據一起使用的最佳方式。這裏有幾個帖子，但沒有一個專門提到我的問題。

我的情況：

此前想添加可展開的行，我所有的數據被帶進通過PHP的頁面，直接連接到我的MySQL數據庫，並填充被包裹在數據表$(document).ready表功能。加載DataTable很簡單，並且工作正常。 但是，我沒有看到任何方式使用PHP數據添加可擴展的子行，因爲數據必須是（據我所知）在初始生成表後添加，如此處所示在他們的演示文件中：

$('#example tbody').on('click', 'td.details-control', function() { 


     var tr = $(this).closest('tr');  
     var row = table.row(tr); 
     console.log(row); 

     if (row.child.isShown()) { 
      // This row is already open - close it 
      row.child.hide(); 
      tr.removeClass('shown'); 
     } 
     else { 
      // Open this row 
      row.child(format(row.data())).show(); 
      tr.addClass('shown'); 
     } 



    }); 

function format (d) { 
    // `d` is the original data object for the row 
    return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">'+ 
     '<tr>'+ 
      '<td>Full name:</td>'+ 
      '<td>hi</td>'+ 
     '</tr>'+ 
     '<tr>'+ 
      '<td>Extension number:</td>'+ 
      '<td>12345</td>'+ 
     '</tr>'+ 
     '<tr>'+ 
      '<td>Extra info:</td>'+ 
      '<td>And any further details here (images etc)...</td>'+ 
     '</tr>'+ 
    '</table>'; 
} 

甚至這個代碼工作，在技術上。當我點擊一個單元格時，它會展開，顯示下面這個新創建的表格 - 但我不知道用什麼方法來填充我想要的php數據（而不是這裏的通用數據...）作爲PHP代碼由之前的JavaScript代碼運行的服務器產生，等等等等

我已經試過什麼：

我的數據表服務器端處理讀了here，並修改他們在網站上有腳本，但是當我第一次運行php文件時，我缺少ssp.class.php，所以我下載了最新版本的DataTables，然後用它來調用它：

require('../../plugins/jqueryDataTables/DataTables-1.10.7/examples/server_side/scripts/ssp.class.php'); 

但是，現在，我得到這個錯誤：

Fatal error: Allowed memory size of 134217728 bytes exhausted (tried to allocate 57 bytes) in C:\xampp\htdocs\plugins\jqueryDataTables\scripts\ssp.class.php on line 433 

行433讀取：return $stmt->fetchAll();

我不知道做什麼，或者爲什麼我不能拿到劇本才能正常工作，但在DataTables網站上經過數小時和數小時之後，我感到沮喪。對我的情況的任何幫助都會很棒，或者如果我首先想到這一切都是錯誤的，那聽起來也很好！

Answer 1

所以我希望未來有人會有同樣的問題。下面的代碼是關於SO的大約25個不同的帖子的頂點，以及在數據表網站上的大量和大量閱讀。我最終能夠完成我原本想做的所有事情 - 它只是讓我永遠研究如何做到這一點！下面是我如何解決它：

首先，我的查詢上databaseSearch.php：

$searchQuery = "SELECT * FROM alldata where $searchBy like '%$searchValue%' LIMIT 400" ; //limiting helps with that memory overflow error in my original question 
mysqli_set_charset($con, 'utf8'); 
$searchResult = mysqli_query($con, $searchQuery); 

然後，創建一個數組出來的數據被帶回：

while ($row = mysqli_fetch_row($searchResult)) { 

$item = array(); 

    $item["id"] = $row[0]; 
    $item["dateReceived"] = $row[1]; 
    $item["comments"] = $row[2]; 


    $output[] = $item; 

    } 

$out = array('aaData' => $output); 
echo json_encode($out); 

，然後，整個數據表代碼：

function format (d) { 

    // `d` is the original data object for the row 
    return '<div class="slider">'+ 
    '<table id="expand" cellpadding="5" cellspacing="0" border="0" style="margin: 0 auto;">'+ 
     //creating a submit button inside the dropdown that uses HTML5 datasets, i can pass ALL the information from `d` to one button, so I can pass it all off to another page. 
     '<td><input class="submitButton" type="submit" value="Submit" onclick="newFromTemplate(this)" data-number="'+d.number+'" data-partNumber="'+d.partNumber+'" data-projectName="'+d.projectName+'"data-comments="'+d.comments+'" /></td>'+ 
     '<tr>'+ //and I can make new <tr>s and <td>s using this syntax: 
      '<td class="dropHeader">cost</td>'+ 
      '<td class="dropInfo">'+d.cost+'</td>'+ 
      '<td class="dropHeader">resale</td>'+ 
      '<td class="dropInfo">'+d.resale+'</td>'+ 
     '</tr>'+ 
     '<tr>'+    
      '<td class="dropHeader">Date Received</td>'+ 
      '<td class="dropInfo">'+d.dateReceived+'</td>'+ 
      '<td class="dropHeader">Name</td>'+ 
      '<td class="dropInfo">'+d.name+'</td>'+    
     '</tr>'+ 
    '</table>'+ 
    '</div>'; 
} 


$.fn.dataTable.ext.errMode = 'throw'; //shows errors in console   
    var table = $('#table').DataTable({  
     ajax : { 
     url : 'databaseSearch.php' ,  
     dataSrc : 'aaData' , 
     type : 'POST', 
     data: {searchBy:searchBy, searchValue:searchValue, options:options}, 
     },   
     //the "createdRow" function allows me to do additional things with the rows I output. 
     "createdRow" : function (row,data,index) {  
     $('td',row).eq(0).attr('id', 'customer-' + index); //like create an id 
     $('td',row).eq(1).attr('id', 'location-' + index); 
     $('td',row).eq(2).attr('id', 'zip-' + index); 
     $('td',row).eq(3).attr('id', 'projectName-' + index); 
     $('td',row).eq(3).attr('id', 'zDate-' + index);    
     $('td',row).eq(7).attr('id', 'ID-' + index); 

     //This sections handles the icons that are placed in the first cell 

     //This adds either a valid or invalid flag to the first cell 
     if (data["zDate"]) {  
     SelectedDate = new Date(data["zDate"]); 
     if (SelectedDate > CurrentDate) { 
      zImage = $('<img />').attr('src', '../../img/valid.png'); 
      $('td',row).eq(0).append(zImage); 
      //adding this class allows me to absolutely position the debit image for each line. 
      $('td',row).eq(0).addClass('icons'); //or add classes... 
     } else { 
      zImage = $('<img />').attr('src', '../../img/invalid.png'); 
      $('td',row).eq(0).append(zImage); //or apply images... 
      $('td',row).eq(0).addClass('icons'); 
     } 
     }       
    }, 
     // "columns" is the top level <td>s that will be created. 
     columns : [ 
     //{ className : 'details-control'}, 
     { data : 'customer' }, 
     { data : 'location' }, 
     { data : 'zip' }, 
     { data : 'projectName' },   
     { data : 'ID' }, 
    ], 
    "columnDefs": [ 
    { className: "details-control", "targets": [ 0 ] } 
    ], 
    "lengthMenu": [ 25, 50, 101 ], 
    "oLanguage": { 
    "sSearch": "Filter Results: " 
    } 
});