jQuery DataTable creating issue

Question

I need to fill DIV container, i.e. create a table using jQuery DataTable. The problem is that this example does not work for me. Instead of formatted table I see the unformatted one without any element of jQuery DataTable plugin.

The below shown php file is located in folder main/tables, while all scripts are located in main/scripts/media.

So, what is actually wrong in my code?

<?php
    include_once 'include/DatabaseConnector.php';
    $query2="SELECT * FROM resources;";
    $result2=DatabaseConnector::ExecuteQueryArray($query2);
?>

<script type="text/javascript" src="../scripts/media/js/jquery.dataTables.min.js"></script>
<script src="../scripts/media/js/jquery-ui.js" type="text/javascript"></script>
<script type="text/javascript" src="../scripts/media/js/complete.js"></script>
<script type="text/javascript" src="../scripts/media/jsjquery.dataTables.js"></script>
<script type="text/javascript" src="../scripts/media/js/jquery.dataTables.columnFilter.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $('#example').dataTable();
} );
</script>

<div>
<h1>Employees</h1>

    <table width="100%">
        <tr>
            <td> 
                <div class="scrollbar">
                <table id="example" border="0" cellspacing="2" cellpadding="2" width = "100%">
                    <thead>
                    <tr>
                        <th scope="col">Reg</th>
                        <th scope="col">Title</th>
                        <th scope="col">Availability</th>
                        <th scope="col">Latitude</th>
                        <th scope="col">Longitude</th>
                        <th scope="col">Average Speed (km/h)</th>
                    </tr>
                    </thead>
                    <tbody>
                        <?php foreach ($result2 as $row):?>
                        <tr class="alternate">
                        <td><?php echo $row['resReg']; ?></td>
                        <td><?php echo $row['resTitle']; ?></td>
                        <td><?php echo $row['resAvailability'] ? 'Yes' : 'No';?></td>
                        <td><?php echo $row['resLatitude']; ?></td>
                        <td><?php echo $row['resLongitude']; ?></td>
                        <td><?php echo $row['resAvgSpeed']; ?></td>
                        </tr>
                        <?php endforeach;?>
                    </tbody>
                </table>
                </div>
            </td>
        </tr>
    </table>
</div>

What's the difference between jsjquery.dataTables.js and jquery.dataTables.min.js? Are they both a copy of the datatables plugin? — Jason Towne
– Jason Towne, Commented May 21, 2012 at 19:45

user1536781 · Accepted Answer · 2012-11-27 23:07:14Z

2

You are missing the css file. Add it and your problem should be solved.

answered Nov 27, 2012 at 23:07

user1536781

318 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

yeyene · Accepted Answer · 2017-09-15 06:27:24Z

0

I think you need to add in main jquery file. Like;

<script src="js/jquery-1.10.2.min.js"></script>

*jQuery UI is not the same as the jQuery library file. And check whether these two files are duplicate or not. If so, you need only one.

<script type="text/javascript" src="../scripts/media/js/jquery.dataTables.min.js"></script>

<script type="text/javascript" src="../scripts/media/jsjquery.dataTables.js"></script>

answered Sep 15, 2017 at 6:27

yeyene

7,4001 gold badge24 silver badges29 bronze badges

Collectives™ on Stack Overflow

jQuery DataTable creating issue

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related