datatable not working

datatable not working

STEVYKSTEVYK Posts: 6Questions: 1Answers: 0

Link to test case:

Debugger code (debug.datatables.net):

<!DOCTYPE html>
<html lang="en">
    <head>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" />
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.js"></script>
        <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.15/css/dataTables.jqueryui.min.css"/>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.js"></script>
        <script type="text/javascript" src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
        <script type="text/javascript" src="https://cdn.datatables.net/1.10.15/js/dataTables.jqueryui.min.js"></script>
        <script type="text/javascript">
            $(document).ready(
                alert("hi");
                function() {
                $('#workshop_list').DataTable();
            } );
        </script>
    </head>
    <body>
        <?php
        /* Database credentials. Assuming you are running MySQL
        server with default setting (user 'root' with no password) */

        /* Attempt to connect to MySQL database */
        $link = mysqli_connect(DB_SERVER, DB_USERNAME, DB_PASSWORD, DB_NAME);

        // Check connection
        if($link === false){
            echo "DB Connect Problem";
            die("ERROR: Could not connect. " . mysqli_connect_error());
        }
        //else echo "DB Connect Success";

        // Attempt select query execution
        $sql = "SELECT workshops.title as name, workshops.id as id, subjects.title as subject, workshops.description as description
                FROM workshops INNER JOIN subjects ON workshops.subject_id=subjects.id WHERE visibility_id<>8";
        if($result = mysqli_query($link, $sql)){
            if(mysqli_num_rows($result) > 0){ ?>
                <table id="workshop_list">
                    <thead>
                        <tr>
                        <th>Titre</th>
                        <th>Sujet</th>
                        <th>Description</th>
                        </tr>
                    </thead>
                    <tbody>
                        <?php
                        while($row = mysqli_fetch_array($result))
                        { ?>
                            <tr>
                                <td><?php echo $row['name'] ;?></td>
                                <td><?php echo $row['subject'] ;?></td>
                                <td><?php echo $row['description'] ;?></td>
                                <td>
                                    <div class="btn-group pull-right">
                                        <button class="btn btn-default btn-s dropdown-toggle" data-toggle="dropdown"><i class="fa fa-list"></i></button>
                                        <ul class="dropdown-menu">
                                          <a  class="dropdown-item" href="/wp-content/php/school_admin/wksp_update.php?id=<?php echo " $row[id] " ?>" class="mr-3" title="Update Record" data-toggle="tooltip"><span class="fa fa-pencil"></span> Modifier</a>
                                          <a class="dropdown-item" href="/wp-content/php/school_admin/schl_archive.php?id=<?php echo " $row[id] " ?>" title="archive" data-toggle="tooltip"><span class="fa fa-archive"></span> Archiver</a>
                                        </ul>
                                    </div>
                                </td>
                            </tr> <?php
                        } ?>
                    </tbody>
                </table>
                <?php
                // Free result set
                mysqli_free_result($result);

            } else{
                    echo '<div class="alert alert-danger"><em>No records were found.</em></div>';
            }
        } else{
            echo "Oops! Something went wrong. Please try again later. <br>"
            . mysqli_error($link);
        }
                // Close connection
                mysqli_close($link);
        ?>
    </body>
</html>

Error messages shown:
No error messages

Description of problem:
I am working on the website page on WordPress using 'xyz php code' plugin. My code is as shown above.
The table is outputting without issues, I have no error messages, but the datatable features are not showing (sort, search, show). I have a display of the 200+ rows of my table display on one page.

I am not sure what the issue is or if its just datatable not being compatible with the plugin im using, but would think that that's the problem.
Please help.

Thank you in advance

Answers

  • kthorngrenkthorngren Posts: 20,142Questions: 26Answers: 4,736

    Did you look at the browser's console for errors? I suspect you will see something about length of undefined or cellIndex. Looks like you have 3 header columns but for columns in the -tg tbody for each row. Datatables requires a -tag th` for each column.

    Kevin

  • STEVYKSTEVYK Posts: 6Questions: 1Answers: 0

    hello @kthorngren,

    I am not sure I know what you mean. True that my table contains three columns which i enclosed in the 'th' tag.

    <thead>
        <tr>
             <th>Titre</th>
             <th>Sujet</th>
             <th>Description</th>
       </tr>
    </thead>
    

    Should I have done it differently?

    I have checked the browser console and this is the error I get:

    jquery-3.6.0.js:4059 
       Uncaught TypeError: $(...).DataTable is not a function
        at HTMLDocument.<anonymous> ((index):263:36)
        at mightThrow (jquery-3.6.0.js:3766:29)
        at process (jquery-3.6.0.js:3834:12)
    
  • kthorngrenkthorngren Posts: 20,142Questions: 26Answers: 4,736

    Uncaught TypeError: $(...).DataTable is not a function

    Sounds like you aren't including the datatables.js library or the order of your includes is incorrect.

    True that my table contains three columns which i enclosed in the 'th' tag.

                                <tr>
                                    <td><?php echo $row['name'] ;?></td>
                                    <td><?php echo $row['subject'] ;?></td>
                                    <td><?php echo $row['description'] ;?></td>
                                    <td>
                                        <div class="btn-group pull-right">
    .....
                                        </div>
                                    </td>
                                </tr> <?php
    

    You have four columns in your tbody. For Datatbles you need to have the same number of columns in the header as in the tbody.

    Kevin

  • STEVYKSTEVYK Posts: 6Questions: 1Answers: 0

    Hey @kthorngren,

    I have added the fourth header, and i am not able to see what dataTable library i did not include.

    I still have the same issue

  • kthorngrenkthorngren Posts: 20,142Questions: 26Answers: 4,736

    I noticed your first code snippet shows what you are loading. You are loading jquery.js twice, once in line 5 and the other in line 7. Only load jquery.js once otherwise you will run into these types of issues where the libraries attach to the wrong jquery instance.

    Kevin

  • STEVYKSTEVYK Posts: 6Questions: 1Answers: 0
    edited March 2022

    :'( Fixed that also and i am still getting the same problem :'(

  • STEVYKSTEVYK Posts: 6Questions: 1Answers: 0

    Hey Kevin,

    Founf the solution,

    I replaced $ by jQuery and the issues was fixed with errors.

  • STEVYKSTEVYK Posts: 6Questions: 1Answers: 0
Sign In or Register to comment.