I use [DataTables](https://datatables.net/release-datatables/examples/data_sources/ajax.html) In order to create nicely displayed and managable table. To get data I use `Ajax` data source and prepared `php` script which connect to database and `echo` on screen date in `JSON` format.

`assign.php`

```
$q = "select o.id, a.id as aid, o.starttime,o.scid, count(case when v.severity = '0' then 1 else null end) as zero, 
        count(case when v.severity = '1' then 1 else null end) as one,  
        count(case when v.severity = '2' then 1 else null end) as two, 
        count(case when v.severity = '3' then 1 else null end) as three, o.starttime as start
        from topic a, project v, person o 
        where a.id = v.topic_id and a.id = o.topic_id and o.starttime = '".$_GET['date']."'
        group by o.id,o.starttime,o.scid,a.id order by id desc";
$result = $db->query($q)->fetchall(PDO::FETCH_ASSOC);
$arr = array();
foreach ($result as $row){
    if ($row['scid']==1){
        $button="<button     id=\"opener_".$row['aid']."\" class ='opener pure-button'  >Edit</button>";
    }
    else{
        $sys="";
        $button="<button id=\"opener_".$row['aid']."\" class ='opener pure-button'  >Assign</button>";
    }
    array_push($arr, array($button,$row['zero'],$row['one'],$row['two'],$row['three'],$row['starttime']));
}
$str = json_encode($arr);
$str= "{\"aaData\":".$str."}";
echo $str;

```

page displaing the table:

```
<script>

$(function() {
    $( "#dialog" ).dialog({
      autoOpen: false,
      show: {
        effect: "blind",
        duration: 1000
      },
      hide: {
        effect: "explode",
        duration: 1000
      }
    });

    $( ".opener" ).click(function(event) {
      $( "#dialog" ).dialog( "open" );
      $('<input>').attr({
        type: 'hidden',
        id: 'assetid',
        name: 'assetid',
        value: event.target.id
    }).appendTo('#systemtoasset');
    $("#divToDelete").remove(); 
    var form = document.getElementById("nazwa");
    var div = document.createElement("div");
    div.id = 'divToDelete';
    div.innerHTML = event.target.value;
    form.appendChild(div);
    });
  });</script>
<script>
    $(document).ready(function() {
        $('#asset').dataTable( {
            \"bProcessing\": true,
            \"sAjaxSource\": 'ajax/testdata.php'
        } );
    } );
    </script>
<table id='asset' class='display dataTable' cellpadding='0' border='0' cellspacing='0' aria-describedby='example_info'>
            <thead>
                <tr>
                    <th width='20%'>Button</th>
                    <th width='25%'>Low</th>
                    <th width='10%'>Medium</th>
                    <th width='10%'>High</th>
                    <th width='10%'>Critic</th>

                </tr>
            </thead>
            <tbody>

            </tbody>
            <tfoot>
                <tr>
                    <th width='20%'>Button</th>
                    <th width='25%'>Low</th>
                    <th width='10%'>Medium</th>
                    <th width='10%'>High</th>
                    <th width='10%'>Critic</th>

                </tr>
            </tfoot>
        </table>
echo "<div id=\"dialog\"><br><br><p id='nazwa' >Select Person to link it with project</p><br><br><br>
          <form action='/?page=test' id='persontoproject' method='post' class='asholder'><input id='existing' name='existing' value='' class='txt' style='width: 125px;' /><input type='submit' name='saveperson' value='Assign'></form>
        </div>";

```

Problem is that when user click on the button displayed in table (loaded from ajax) the `JS` which handle the click is not being executed. Is there a way to solve this issue?