php - 用 PHP 数据填充的数据表子表

Question

我一直在尝试找出获取 DataTables 的最佳方法 child rows,处理我的数据。这里有几个帖子，但没有一个专门提到我的问题。

我的情况:

在想要添加可扩展行之前，我的所有数据都是通过 PHP 引入页面的，直接连接到我的 MySQL 数据库并填充一个包含在 DataTables $(document).ready 中的表。功能。加载 DataTables 很简单，而且效果很好。 但是，我看不出有什么方法可以使用 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在 DataTables 的服务器端处理，并修改了他们在网站上的脚本，但是当我第一次运行 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: "
  }
});