using DataTable with php and dynamic columns

Question

i'm trying to get my head around DataTables, but finding it difficult. I have a form where the user can paste 1+ rows of data with 1+ columns of information.

This could look like the following:

a   b   c   d   e   f   g   h   i   j
443 39  70  10  38  11  161 15  477 318
99  452 229 11  63  23  38  104 190 100

After i have processed and validated it, it is available as the following (PHP var_dump() ):

array (size=2)
  1 => 
    array (size=10)
      0 => string '443' (length=3)
      1 => string '39' (length=2)
      2 => string '70' (length=2)
      3 => string '10' (length=2)
      4 => string '38' (length=2)
      5 => string '11' (length=2)
      6 => string '161' (length=3)
      7 => string '15' (length=2)
      8 => string '477' (length=3)
      9 => string '318' (length=3)
  2 => 
    array (size=10)
      0 => string '99' (length=2)
      1 => string '4s52' (length=4)
      2 => string '22s9' (length=4)
      3 => string '11' (length=2)
      4 => string '63' (length=2)
      5 => string '23' (length=2)
      6 => string '38' (length=2)
      7 => string '104' (length=3)
      8 => string '190' (length=3)
      9 => string '100' (length=3)

or

array (size=2)
  1 => 
    array (size=10)
      'a' => string '443' (length=3)
      'b' => string '39' (length=2)
      'c' => string '70' (length=2)
      'd' => string '10' (length=2)
      'e' => string '38' (length=2)
      'f' => string '11' (length=2)
      'g' => string '161' (length=3)
      'h' => string '15' (length=2)
      'i' => string '477' (length=3)
      'j' => string '318' (length=3)
  2 => 
    array (size=10)
      'a' => string '99' (length=2)
      'b' => string '4s52' (length=4)
      'c' => string '22s9' (length=4)
      'd' => string '11' (length=2)
      'e' => string '63' (length=2)
      'f' => string '23' (length=2)
      'g' => string '38' (length=2)
      'h' => string '104' (length=3)
      'i' => string '190' (length=3)
      'j' => string '100' (length=3)

I say "or" because i can output either way - if the json is better with the column names, i'll do it the second way.

my HTML code (using Twig) is:

<table class="table" id="Panda1"></table>

<script type="text/javascript">
    $('#{{ Panda1 }}').dataTable( {
        "data": [{{ contentsArray | json_encode() | raw }}],
        "columns": [
            {% for column in ColumnArray %}
                { "title": "{{ column }}" },
            {% endfor %}
        ]
    } );
</script>

My Output rendered is:

<script type="text/javascript">
    $('#Panda1').dataTable( {
        "data": [{"1":{"a":"443","b":"39","c":"70","d":"10","e":"38","f":"11","g":"161","h":"15","i":"477","j":"318"},"2":{"a":"99","b":"4s52","c":"22s9","d":"11","e":"63","f":"23","g":"38","h":"104","i":"190","j":"100"}}],
        "columns": [
            { "title": "a" },
            { "title": "b" },
            { "title": "c" },
            { "title": "d" },
            { "title": "e" },
            { "title": "f" },
            { "title": "g" },
            { "title": "h" },
            { "title": "i" },
            { "title": "j" },
        ]
    } );
</script>

My questions are:

how do i correctly handle a PHP array?
Do i need to use mData ?
Do i need to use columnDefs ?
In columns, do i need "title" and "data" ?

Sparrow 55 · Accepted Answer · 2015-07-12 14:33:51Z

3

Solved! i've changed my javascript to the following:

<script type="text/javascript">
    // Gets an array, containing an object with a single property, the property containing many objects
    // Then, we take the object which is the first element with [0]
    var myObj = [{{ contentsArray | json_encode() | raw }}][0];
    // We then iterate over the object's properties to get our rows.
    var array = Object.keys(myObj).map(function (key) {return myObj[key]});

    $('#{{ Panda1 }}').dataTable( {
        "data": array,
        "columns": [
            {% for column in ColumnArray %}
                { "title": "{{ column }}", "data": "{{ column }}" },
            {% endfor %}
        ]
    } );
</script>

answered Jul 12, 2015 at 14:33

Sparrow 55

4025 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

davidkonrad Over a year ago

It is perfectly OK to mark your own answer as accepted. Perhaps it will help other people in the future.

Collectives™ on Stack Overflow

using DataTable with php and dynamic columns

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related