Your Location is: Home > Php

Display dropdown with checkbox options inside html table

From: Ethiopia View: 3546 Mark Bottom 

Question

I have an HTML table 5 columns. I have also created a dropdown with checkbox options with roles to be selected for the user. I want to add a new column to the table with the name Roles and display in there the dropdown-checkbox created. If I were using only PHP and HTML I believe I could do it, but I can't figure it out with ajax just yet.

<table id="sample_data" class="table table-bordered table-striped">
                    <thead>
                    <tr>
                        <th>ID</th>
                        <th>First Name</th>
                        <th>Last Name</th>
                        <th>Email</th>
                        <th>Approval</th>
                        <!-- <th>Roles</th> -->
                    </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>

<div>
<select id="test">
    <?php
    for ($a = 1; $a <= $count ; $a++){
        ?>
        <option value="1"><?php echo($roles[($a-1)]);?></option>
        <?php
    }
    ?>
</select>
</div>

<script>
    $(document).ready(function(){

        var dataTable = $('#sample_data').DataTable({
            "processing" : true,
            "serverSide" : true,
            "order" : [],
            "ajax" : {
                url:"FetchUserTable.php",
                type:"POST"
            }
        });

        $('#sample_data').on('draw.dt', function(){
            $('#sample_data').Tabledit({
                url:'ActionUserTable.php',
                dataType:'json',
                columns:{
                    identifier : [0, 'user_id'],
                    editable:[
                        [1, 'first_name'],
                        [2, 'last_name'],
                        [3, 'email'],
                        [4, 'admin_approved', '{"1":"Approved","2":"Disapproved"}']
                        // [5, 'role_id']
                    ]
                },
                hideIdentifier: true,// added
                restoreButton:false,
                onSuccess:function(data, textStatus, jqXHR)
                {
                    if(data.action == 'delete')
                    {
                        $('#' + data.id).remove();
                        //$('#sample_data').DataTable().ajax.reload();

                        var t = $('#sample_data').DataTable();
                        t.row.add([
                            $('#test').html()
                        ]).draw(false);
                        t.ajax.reload();

                    }
                }
            });
        });

    });
</script>

Best answer