[first time user] the datatable is not working

rudysetiawan · July 2015

Dear all, I have followed the instructions/manuals I foundd out there but then unable to get this working.

Tested with datatables live, it works.
http://live.datatables.net/casenube/2/

Currently the table rows are generated via a laravel controller and pass it onto a view which has all the required js/css. (the HTML in Datatables live is what the controller in laravel produces.

What have i done wrong here?

Thank you

mRender · July 2015

This looks like it works. What's the issue?

rudysetiawan · July 2015

Hi Modgility is not showing via laravel framework

https://www.dropbox.com/s/t5ro0i9ic4l1kh3/datatable-notshowing-sorting-search.png?dl=0

does it matter if it's a php or html? shouldnt be right?

rudysetiawan · July 2015

Below is the snippet from the view file called "datacollected.blade.php"

    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

    <!-- DataTables CSS -->
    <link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.7/css/jquery.dataTables.css">

    <!-- jQuery -->
    <script type="text/javascript" charset="utf8" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

    <!-- DataTables -->
    <script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.7/js/jquery.dataTables.js"></script>



</head>
<body>
<div class="container">
        
<!--    <div class="container"> -->
        
        
    <script type="javascript">
        $(document).ready( function () {
            var table = $('#traffic').DataTable();
        } );
    </script>

<div class="table-responsive">
        <table id="traffic" class="table table-hover" width="100%">
            <thead>
                <tr>
                    <th>id</th>
                    <th>router ip</th>
                    <th>router interface</th>
                    <th>interface description</th>
                    <th>In bps</th>
                    <th>Out bps</th>
                    <th>Collected at</th>
                    <th>Trigger</th>
                </tr>
            </thead>
            <tbody>
            @foreach ($tdata as $t)
                <tr>
                    <td>{{$t->id}}</td>
                    <td>{{$t->routerip}}</td>
                    <td>{{$t->ifname}}</td>
                    <td>{{$t->ifdescr}}</td>
                    <td>{{formatSizeUnits($t->inbps)}}</td>
                    <td>{{formatSizeUnits($t->outbps)}}</td>
                    <td>{{$t->colltime}}</td>
                    <td>{{$t->trigger}}</td>
                </tr>
            @endforeach
            </tbody>
            <tfoot>
            <tr>
                <th>id</th>
                <th>router ip</th>
                <th>router interface</th>
                <th>interface description</th>
                <th>In bps</th>
                <th>Out bps</th>
                <th>Collected at</th>
                <th>Trigger</th>
            </tr>
            </tfoot>

        </table>
    </div>

allan · July 2015

What does the generated HTML look like? I can't comment on the template aspect, but the basic ideal looks fine. A link to the page would be ideal.

Allan

rudysetiawan · July 2015

Hi Allan,

the produced html code is as followed:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Hello  test</title>

    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

    <!-- DataTables CSS -->
    <link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.7/css/jquery.dataTables.css">

    <!-- jQuery -->
    <script type="text/javascript" charset="utf8" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

    <!-- DataTables -->
    <script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.7/js/jquery.dataTables.js"></script>



</head>
<body>
<div class="container">
    <nav class="navbar navbar-default">
        <div class="container-fluid">
            <div class="navbar-header">
                <p class="navbar-text navbar-center">
                Menu
                </p>
            </div>
        </div>
    </nav>


        
<!--    <div class="container"> -->
        
        



    <div class="table-responsive">
        <table id="traffic" class="table table-hover" width="100%">
            <thead>
                <tr>
                    <th>id</th>
                    <th>router ip</th>
                    <th>router interface</th>
                    <th>interface description</th>
                    <th>In bps</th>
                    <th>Out bps</th>
                    <th>Collected at</th>
                    <th>Trigger</th>
                </tr>
            </thead>
            <tbody>
                            <tr>
                    <td>87</td>
                    <td>10.10.30.248</td>
                    <td>Te1/1</td>
                    <td>TenGigabitEthernet1/1</td>
                    <td>2.15 Gbps</td>
                    <td>750.85 Mbps</td>
                    <td>1437414362</td>
                                            <td>0</td>
                                    </tr>
                            <tr>
                    <td>86</td>
                    <td>10.10.30.247</td>
                    <td>Te1/1</td>
                    <td>TenGigabitEthernet1/1</td>
                    <td>33.10 Mbps</td>
                    <td>80.85 Mbps</td>
                    <td>1437414361</td>
                                            <td>0</td>
                                    </tr>
                            <tr>
                    <td>85</td>
                    <td>10.10.30.246</td>
                    <td>Te1/1</td>
                    <td>TenGigabitEthernet1/1</td>
                    <td>425.17 Mbps</td>
                    <td>483.33 Mbps</td>
                    <td>1437414361</td>
                                            <td>0</td>
                                    </tr>
                            <tr>
                    <td>84</td>
                    <td>10.10.30.248</td>
                    <td>Te1/1</td>
                    <td>TenGigabitEthernet1/1</td>
                    <td>2.30 Gbps</td>
                    <td>1.24 Gbps</td>
                    <td>1437414241</td>
                                            <td>0</td>
                                    </tr>
                            <tr>
                    <td>83</td>
                    <td>10.10.30.247</td>
                    <td>Te1/1</td>
                    <td>TenGigabitEthernet1/1</td>
                    <td>45.72 Mbps</td>
                    <td>136.88 Mbps</td>
                    <td>1437414241</td>
                                            <td>0</td>
                                    </tr>
                            <tr>
                    <td>82</td>
                    <td>10.10.30.246</td>
                    <td>Te1/1</td>
                    <td>TenGigabitEthernet1/1</td>
                    <td>386.81 Mbps</td>
                    <td>438.64 Mbps</td>
                    <td>1437414241</td>
                                            <td>0</td>
                                    </tr>
                        </tbody>
            <tfoot>
            <tr>
                <th>id</th>
                <th>router ip</th>
                <th>router interface</th>
                <th>interface description</th>
                <th>In bps</th>
                <th>Out bps</th>
                <th>Collected at</th>
                <th>Trigger</th>
            </tr>
            </tfoot>

        </table>
    </div>
    <script type="javascript">
        $(document).ready(function() {
            $('#traffic').DataTable();
        });
    </script>


<hr>
    <nav class="navbar navbar-default">
        <div class="container-fluid">
            <div class="navbar-header">
                <p class="navbar-text navbar-center">

                </p>
            </div>
        </div>
    </nav>
    <p>



    </p>
</div>
</body>
</html>

rudysetiawan · July 2015

on firefox console it gives this output:

https://www.dropbox.com/s/xjbipxhdloqb7jr/datatable-issue-21july2015.png?dl=0

This site makes use of a SHA-1 Certificate; it's recommended you use certificates with signature algorithms that use hash functions stronger than SHA-1.[Learn More] jquery.dataTables.css
Expected declaration but found '*'.  Skipped to next declaration. jquery.dataTables.css:39:2
Expected declaration but found '*'.  Skipped to next declaration. jquery.dataTables.css:278:2
Unknown property 'zoom'.  Declaration dropped. jquery.dataTables.css:279:6
Expected declaration but found '*'.  Skipped to next declaration. jquery.dataTables.css:310:2
Error in parsing value for 'background'.  Declaration dropped. jquery.dataTables.css:318:14
Error in parsing value for 'background'.  Declaration dropped. jquery.dataTables.css:320:14
Error in parsing value for 'background'.  Declaration dropped. jquery.dataTables.css:324:14
Error in parsing value for 'background'.  Declaration dropped. jquery.dataTables.css:326:14
Error in parsing value for 'background'.  Declaration dropped. jquery.dataTables.css:342:14
Error in parsing value for 'background'.  Declaration dropped. jquery.dataTables.css:344:14
Error in parsing value for 'background'.  Declaration dropped. jquery.dataTables.css:348:14
Error in parsing value for 'background'.  Declaration dropped. jquery.dataTables.css:350:14
Error in parsing value for 'background'.  Declaration dropped. jquery.dataTables.css:358:14
Error in parsing value for 'background'.  Declaration dropped. jquery.dataTables.css:360:14
Error in parsing value for 'background'.  Declaration dropped. jquery.dataTables.css:364:14
Error in parsing value for 'background'.  Declaration dropped. jquery.dataTables.css:366:14
Error in parsing value for 'background'.  Declaration dropped. jquery.dataTables.css:387:14
Error in parsing value for 'background'.  Declaration dropped. jquery.dataTables.css:389:14
Error in parsing value for 'background'.  Declaration dropped. jquery.dataTables.css:393:14
Error in parsing value for 'background'.  Declaration dropped. jquery.dataTables.css:395:14
Expected declaration but found '*'.  Skipped to next declaration. jquery.dataTables.css:411:2
This site makes use of a SHA-1 Certificate; it's recommended you use certificates with signature algorithms that use hash functions stronger than SHA-1.[Learn More]

rudysetiawan · July 2015

So sorry accidentally pressed the Yes to the "answered the question" , this is still an ongoing issue for me :)

allan · July 2015

Here is a copy and paste of your HTML table and the Javascript used: http://live.datatables.net/semujaxu/1/edit . It appears to work fine.

Can you link to the page in question so we can debug it please.

Allan

rudysetiawan · July 2015

ok so oh my gosh, this is now working just because the type of the script is missing a 'text'

    <script type="text/javascript">
        $(document).ready(function() {
            $('#traffic').DataTable();
        });
    </script>

[first time user] the datatable is not working

[first time user] the datatable is not working

Answers

Howdy, Stranger!

Categories

DataTables

[first time user] the datatable is not working

[first time user] the datatable is not working

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables