dataTables responsive working but no jQuery will work on child row

Question

My buddy at work suggested I use dataTables from data tables.net as a quick drop in turns any table dynamic for searching a sorting purpose which works well with no issue there.

Problem is that I would like it to be responsive so when viewing the table it will collapse and then like the example on the website ( https://datatables.net/extensions/responsive/ ) when the screens width is small it changes into a few columns with a button to press to show the hidden columns. When trying this for myself I get the collapsed columns but no ability to see the hidden ones.

I am using Codeigniter + foundation 5 to build the tables in.

Sample of one of my table in HTML/PHP

<div class="small-12 medium-12 large-12 columns" align="center">

<table id="table_request" cellspacing="0" width="100%%">
    <thead style="background-color: #2573A6">
    <th>Customer Name</th>
    <th>Email Address</th>
    <th>Telephone Number</th>
    <th>Quote Message</th>
    <th>House Num</th>
    <th>Postcode</th>
    <th>Quote Day</th>
    <th>Accept</th>
    <th>Reject</th>
    </thead>

    <tbody>

    <?php foreach ($quotes as $request) {
        $i = $request->id;
        $dayz = date("y-m-d",strtotime("-3 day"));
        $week = date("y-m-d",strtotime("-10 day"));
        if(strtotime($request -> day) < strtotime($dayz))
        {
            echo "<tr class='tbl_row_$i' style='background-color: #ffff00  '>";
        }
        elseif (strtotime($request -> day) < strtotime($week))
        {
            echo "<tr class='tbl_row_$i' style='background-color: #990000  '>";
        }
        else
        {
            echo "<tr class='tbl_row_$i' style='background-color: #ffffff '>";
        }
        echo "<input type='hidden' value='$i' name='rowid_$i' id='row_id_$i'>";
        echo "<input type='hidden' value='$request->house_post' id='postcode_$i'>";
        echo "<input type='hidden' value='$request->house_num' id='house_num_$i'>";
        echo "<input type='hidden' value='$request->name' id='name_$i'>";
        echo "<input type='hidden' value='$request->email' id='email_$i'>";
        echo "<input type='hidden' value='$request->tel_num' id='telnum_$i'>";
        echo "<td>" . $request->name . "</td>";
        echo "<td><a href='mailto:$request->email'>" . $request->email . "</a></td>";
        echo "<td><a href='tel:$request->tel_num'>" . $request->tel_num . "</a></td>";
        echo "<td style='width: 40%'>" . $request->message . "</td>";
        echo "<td>" . $request->house_num . "</td>";
        echo "<td>" . $request->house_post . "</td>";
        echo "<td>" . date('F d, Y', strtotime($request->day)) . "</td>";
        echo "<td><button type='submit' name='but_accept_$i' num='$i' class='accept_button tiny'>Accept</button></td>";
        echo "<td><button type='submit' name='but_reject_$i' num='$i' class='reject_button tiny'>reject</button></td>";
        echo "</tr>";

    }
    ?>
    </tbody>
</table>

Javascript:

  $(document).ready(function () {

    $("#table_request").dataTable({
        responsive:true,
        stateSave: true,
        "order": [[ 6, "desc" ]]
    });
})

I've attempted to replicate the information from the websites example and it collapses just no way to see the hidden columns.

Thanks in advance for any help.

UPDATE :

Reject button example

$(".reject_button").click(function (e) {
        var count = $(this).attr('num');
        var row_id = $("#row_id_" + count).attr('value');
        var name = $("#name_" + count).attr('value');
        var email = $("#email_" + count).attr('value');
        var tel = $("#telnum_" + count).attr('value');
        var house = $("#house_num_" + count).attr('value');
        var postcode = $("#postcode_" + count).attr('value');
        $.ajax({
            url: "<?php echo base_url();?>admin/reject_job",
            type: 'POST',
            data: {row_id: row_id, name: name, email: email, telnum: tel, house: house, postcode: postcode},
            success: function () {
                $(".tbl_row_" + count).css("background-color", "#FF0000");//red
                alert("Job Rejected");
            },
            error: function () {
                alert("Error");
            }
        })
    })

This no longer functions when inside a child row on small screens and when not in a child row passes blanks

Answer 1

So inspecting the table on the example site, the css selector that creates the green button is as follows:

table.dataTable.dtr-inline.collapsed > tbody > tr > td:first-child:before,
table.dataTable.dtr-inline.collapsed > tbody > tr > th:first-child:before

So the first-child selector isn't working because you have the hidden inputs before all the columns . Try moving the hidden inputs somewhere else, like after all the <td> . See fiddle .