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代码之前从服务器生成的，等等。

我尝试过的事情：

我在DataTables上阅读了here＆＃39;服务器端处理，并修改了他们在网站上的脚本，但是当我第一次运行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＆＃39;网站，我很沮丧。对我的情况有任何帮助都会很棒，或者如果我一开始就认为这一切都是错的，那么听到也会很高兴！

Answer 1

所以我希望将来的其他人会有同样的问题。下面的代码是大约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: "
  }
});

填充PHP数据的数据表子表

1 个答案: