Adding datatables to a table (wordpress)

Question

I'm trying to add datatables to my project and it shows up with the arrows and the search bar, but neither work.

I tried testing the code on a page with just the scripts and table and it worked but when I moved it to my wordpress site I run into problems.

Any suggestions? I have the jquery and datatables scripts and css in the header page, as well as the script for the table itself after the /head:

    <script>
       $(document).ready(function(){
       $('#myTable').DataTable();
       });
   </script>

My table itself looks like

     echo "<table id='myTable' class='display table' width='100%'>";
                    echo "<thead>";
                    echo "<tr>";
                    echo "<th>Foster ID</th>";
                    echo "<th>Foster's Name</th>";
                    echo "<th>City</th>";
                    echo "<th>E-Mail</th>";
                    echo "</tr>";
                    echo "</thead>";
                    if(!empty($result)){
                        foreach ($result as $results){
                            $fosterId = $results->memberId;
                            $fosterName = $results->memberName;
                            $city = $results->city;
                            $email = $results->email;
                            echo "<tbody>";
                            echo "<tr>";
                            echo "<td>$fosterId</td>";
                            echo "<td>$fosterName</td>";
                            echo "<td>$city</td>";
                            echo "<td>$email</td>";
                            echo "</tr>";
                        }
                    } else {
                        echo "<tr>";
                        echo "<td colspan='5'>No Fosters</td>";
                        echo "<tr>";
                        echo "</tbody>";
                    }
                    echo "</table>";

Gyrocode.com · Accepted Answer · 2017-04-04 15:27:33Z

Your PHP code contains tbody element in the loop. Also DataTables doesn't support colspan attribute in table body.

Corrected PHP code:

echo "<table id='myTable' class='display table' width='100%'>";
echo "<thead>";
echo "<tr>";
echo "<th>Foster ID</th>";
echo "<th>Foster's Name</th>";
echo "<th>City</th>";
echo "<th>E-Mail</th>";
echo "</tr>";
echo "</thead>";
echo "<tbody>";
foreach ($result as $results){
    $fosterId = $results->memberId;
    $fosterName = $results->memberName;
    $city = $results->city;
    $email = $results->email;
    echo "<tr>";
    echo "<td>$fosterId</td>";
    echo "<td>$fosterName</td>";
    echo "<td>$city</td>";
    echo "<td>$email</td>";
    echo "</tr>";
}
echo "</tbody>";
echo "</table>";

Corrected JavaScript code:

$(document).ready(function(){
    $('#myTable').DataTable({
        "language": {
            "emptyTable": "No Fosters"
        }
    });
});

Collectives™ on Stack Overflow

Adding datatables to a table (wordpress)

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related