Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.

Their documentation ( datatables.net ) regarding this seems to be tucked inside some huge PHP tutorial. The one I found is here: http://datatables.net/development/server-side/php_mysql

All I want to know, is how to make an array, using PHP which will later be hit with json_encode() with static data (no variables) to populate a table which has a few column titles and a few example rows of data. Some of this was taken from the tutorial above.

<?php
    $output = array(
        "sEcho" => intval($_GET['sEcho']), //no idea what this is
        "iTotalRecords" => $iTotal, //probably total records
        "iTotalDisplayRecords" => $iFilteredTotal, //Not sure, records per page?
        "aaData" => array() //setting the data array for the rows
        );
    $output['aaData'][] = //each row here, unsure of format

    //Where do the column titles go, and the format for those?
?>
<script type="text/javascript">
    $(document).ready(function() {

        var aDataSet = <?php echo json_encode($output); ?>

        $('#demo').html( '<table cellpadding="0" cellspacing="0" border="0" class="display" id="example"></table>' );
        $('#example').dataTable( {
            "aaData": aDataSet,
            "aoColumns": aoDataSet //This would be a second json_encode PHP array, set to var aoDataSet
        } ); 
    } );
</script>

Any help would be appreciated.

EDIT: With some help from user2657979's answer, I have the answer to my question now. Below is the answer to populate DataTables title and data from PHP arrays.

<?php
$aoColumnDefs = array(
    array(
        'sTitle'   => 'Column 1',
        'aTargets' => array(0) 
    ),
    array(
        'sTitle'   => 'Column 2',
        'aTargets' => array(1) 
    ),
    array(
        'sTitle'   => 'Column 3',
        'aTargets' => array(2) 
    ),
    array(
        'sTitle'   => 'Column 4',
        'aTargets' => array(3) 
    ),
    array(
        'sTitle'   => 'Column 5',
        'aTargets' => array(4) 
    )
);

$aoRowDefs = array(
    0   =>  array(
        0   =>  "Row 1 data Column 1", 
        1   =>  "Row 1 data Column 2",
        2   =>  "Row 1 data Column 3",
        3   =>  "Row 1 data Column 4",
        4   =>  "Row 1 data Column 5"
        ),
    1   =>  array(
        0   =>  "Row 2 data Column 1",
        1   =>  "Row 2 data Column 2",
        2   =>  "Row 2 data Column 3",
        3   =>  "Row 2 data Column 4",
        4   =>  "Row 2 data Column 5"
        ),
    2   =>  array(
        0   =>  "Row 3 data Column 1",
        1   =>  "Row 3 data Column 2",
        2   =>  "Row 3 data Column 3",
        3   =>  "Row 3 data Column 4",
        4   =>  "Row 3 data Column 5"
        )
    );
?>

<script type="text/javascript">

    var aoRowDefs = <?php echo json_encode($aoRowDefs); ?>

    var aoColumnDefs = <?php echo json_encode($aoColumnDefs); ?>

    $(document).ready(function() {
        $('#demo').html( '<table cellpadding="0" cellspacing="0" border="0" class="display" id="example"></table>' );
        $('#example').dataTable( {
        "aaData": aoRowDefs,
        "aoColumns": aoColumnDefs
        } ); 
    } );
</script>

<div id="demo">
    <div id="example">
    </div>
</div>
share|improve this question
add comment

1 Answer

I don't have dynamic headers for my Datatables, so I define them in the configurations in the javascript.

"aoColumns": [{
        "sTitle": "Column 1"
    }, {
        "sTitle": "Column 2"
    }, {
        "sTitle": "Column 3"
    }, {
        "sTitle": "Column 4"
    }, {
        "sTitle": "Column 5"
    }]

The creator of the plugin now recommends using aoColumnDefs, and then specifying the the targets for the column.

"aoColumnDefs": [{
        "sTitle": "Column 1",
        "aTargets": [0]
    }, {
        "sTitle": "Column 2",
        "aTargets": [1]
    }, {
        "sTitle": "Column 3",
        "aTargets": [2]
    }, {
        "sTitle": "Column 4",
        "aTargets": [3]
    }, {
        "sTitle": "Column 5",
        "aTargets": [4]
    }]

aoColumnDefs allows for more flexibility if certain actions will affect more than one column, allowing you to specify more than one column.

If however, your column headers will be dynamic, you could pass a json encoded array to the configurations in the javascript.

$aoColumnDefs = array(
    array(
        'sTitle'   => 'Column 1',
        'aTargets' => array(0) 
    )
);
$aoColumnDefsEndcoded = json_encode($aoColumnDefs);
share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.