Server-side processing jquery datatables in Zend Framework

Question

I'm trying to work with datatables and server-side processing. This is what I have in my view:

<table id="datatables" class="display">
  <thead>
    <tr>
       <th>Your Name</th>
       <th>Date and Time</th>
       <th>Actions</th>
    </tr>
  </thead>
  <tbody>

  </tbody>
</table>

<script>
$(document).ready( function () {
    // DATATABLES CONFIGURATION
    $('#datatables').dataTable( {
        "bProcessing": true,
        "bServerSide": true,
        "sAjaxSource": "results/loadReportsAction"
    } );
});
</script>

In my ResultsController :

public function loadReportsAction() {

    $this->_helper->layout->disableLayout();
    $this->_helper->viewRenderer->setNoRender();

    $row = array();

    $output = array(
        "iTotalRecords" => 34,
        "iTotalDisplayRecords" => 34,
        "aaData" => array()
    );

    $sessions = SessionQuery::create()->findByQuizId(3);

    foreach($sessions as $session){
        $row[] = "test";

        $row[] = "test2";
        $row[] = "test3";
        $output['aaData'][] = $row;
        $row = array();
    }
    echo json_encode( $output );
}

As you can see I just try to load strings like "test", "test2", ... .
I first want to make the data loading right and then create the filtering, sorting, ... .

When I load this I just get this error:

DataTables warning (table id = 'datatables'): DataTables warning: JSON data from server could not be parsed. This is caused by a JSON formatting error.

This is what I get in my response:

Or check it here .

He just shows the existing HTML but not the json that was sent.

Answer 1

There is a action helper json to output json which will handle both disabling layout and sending data as json with correct headers.

I don't see anything wrong in your code but I suggest you do this

<table id="datatables" class="display">
  <thead>
    <tr>
       <th>Your Name</th>
       <th>Date and Time</th>
       <th>Actions</th>
    </tr>
  </thead>
  <tbody>

  </tbody>
</table>

<script>
$(document).ready( function () {
    // DATATABLES CONFIGURATION
    $('#datatables').dataTable( {
        "bProcessing": true,
        "bServerSide": true,
        "sAjaxSource": "results/load-reports"// Change this line
    } );
});
</script>

public function loadReportsAction() {

    $this->_helper->layout->disableLayout();// Comment this line
    $this->_helper->viewRenderer->setNoRender();// Comment this line

    $row = array();

    $output = array(
        "iTotalRecords" => 34,
        "iTotalDisplayRecords" => 34,
        "aaData" => array()
    );

    $sessions = SessionQuery::create()->findByQuizId(3);

    foreach($sessions as $session){
        $row[] = "test";

        $row[] = "test2";
        $row[] = "test3";
        $output['aaData'][] = $row;
        $row = array();
    }
    echo json_encode( $output );// Comment this line
    $this->_helper->json->sendJson($output);
}