jquery可排序表问题/ laravel

时间:2014-12-21 23:54:26

标签: javascript jquery twitter-bootstrap laravel jquery-ui-sortable

我正在使用tableclothjs和Twitter Bootstrap。出于某种原因,此代码不会出现像tableclothjs在其API文档中所述的可排序标题。我已经在网络浏览器中检查了JavaScript控制台,但我没有收到任何警告或错误。

这可能会发生什么?

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Ticket .::. Show View</title>
    <meta name="description" content="">
    <meta name="author" content="">

    <!-- Mobile Specific Meta -->
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    <!-- Stylesheets -->
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">

    <!--[if lt IE 9]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->


</head>
<body>
<div id="container" style="text-align: justify; margin-left: auto; margin-right: 360px; margin-top: auto;  width: 70%">
    <div id="navigation"
         style="margin-left: -3%; background-image: url('//static.fiberhop.com:8080/images/logo.png'); background-repeat: no-repeat">
        <img src="//static.fiberhop.com:8080/images/logo.png" alt="FiberHop LLC Logo"/>
        <span style="vertical-align: -20%; margin-left: 20%; text-align: justify; font-size: 250%; font-style: oblique">
            <a>Link 1</a> | <a>Link 2</a> | <a>Link 3</a> | <a>Link 4</a> | <a>Link 5</a>
        </span>
    </div>

    <table class="table table-sortable">
        <thead>
        <tr>
            <th>Ticket ID</th>
            <th>Customer ID</th>
            <th>Category ID</th>
            <th>Assigned</th>
            <th>Employee ID</th>
            <th>Subject</th>
        </tr>
        </thead>
        <tbody>
                <tr>
            <td> 7</td>
            <td> 17</td>
            <td> 91</td>
            <td style="text-align: center">             </td>
            <td> 8239</td>
            <td> <a href="http://localhost:8000/tickets/7">Ea.</a></td>
        </tr>
                <tr>
            <td> 13</td>
            <td> 86</td>
            <td> 41</td>
            <td style="text-align: center">  assigned             </td>
            <td> 7612</td>
            <td> <a href="http://localhost:8000/tickets/13">Molestias veritatis.</a></td>
        </tr>
                <tr>
            <td> 16</td>
            <td> 24</td>
            <td> 59</td>
            <td style="text-align: center">             </td>
            <td> 7484</td>
            <td> <a href="http://localhost:8000/tickets/16">Tenetur qui.</a></td>
        </tr>
                <tr>
            <td> 25</td>
            <td> 37</td>
            <td> 70</td>
            <td style="text-align: center">  assigned             </td>
            <td> 8060</td>
            <td> <a href="http://localhost:8000/tickets/25">Alias atque.</a></td>
        </tr>
                <tr>
            <td> 31</td>
            <td> 53</td>
            <td> 72</td>
            <td style="text-align: center">             </td>
            <td> 5159</td>
            <td> <a href="http://localhost:8000/tickets/31">Non.</a></td>
        </tr>
                <tr>
            <td> 46</td>
            <td> 25</td>
            <td> 28</td>
            <td style="text-align: center">  assigned             </td>
            <td> 7827</td>
            <td> <a href="http://localhost:8000/tickets/46">Repellat.</a></td>
        </tr>
                <tr>
            <td> 48</td>
            <td> 42</td>
            <td> 3</td>
            <td style="text-align: center">  assigned             </td>
            <td> 6352</td>
            <td> <a href="http://localhost:8000/tickets/48">Ratione.</a></td>
        </tr>
                <tr>
            <td> 50</td>
            <td> 76</td>
            <td> 3</td>
            <td style="text-align: center">  assigned             </td>
            <td> 8880</td>
            <td> <a href="http://localhost:8000/tickets/50">Voluptatum magnam.</a></td>
        </tr>
                <tr>
            <td> 52</td>
            <td> 81</td>
            <td> 96</td>
            <td style="text-align: center">             </td>
            <td> 7008</td>
            <td> <a href="http://localhost:8000/tickets/52">Occaecati reprehenderit.</a></td>
        </tr>
                <tr>
            <td> 54</td>
            <td> 18</td>
            <td> 94</td>
            <td style="text-align: center">  assigned             </td>
            <td> 3695</td>
            <td> <a href="http://localhost:8000/tickets/54">Aut quos.</a></td>
        </tr>
                <tr>
            <td> 57</td>
            <td> 70</td>
            <td> 84</td>
            <td style="text-align: center">             </td>
            <td> 6093</td>
            <td> <a href="http://localhost:8000/tickets/57">Quod blanditiis.</a></td>
        </tr>
                <tr>
            <td> 58</td>
            <td> 50</td>
            <td> 24</td>
            <td style="text-align: center">  assigned             </td>
            <td> 7247</td>
            <td> <a href="http://localhost:8000/tickets/58">A animi.</a></td>
        </tr>
                <tr>
            <td> 67</td>
            <td> 42</td>
            <td> 15</td>
            <td style="text-align: center">  assigned             </td>
            <td> 5166</td>
            <td> <a href="http://localhost:8000/tickets/67">Aspernatur nihil.</a></td>
        </tr>
                <tr>
            <td> 68</td>
            <td> 41</td>
            <td> 100</td>
            <td style="text-align: center">             </td>
            <td> 7335</td>
            <td> <a href="http://localhost:8000/tickets/68">Quia.</a></td>
        </tr>
                <tr>
            <td> 73</td>
            <td> 90</td>
            <td> 34</td>
            <td style="text-align: center">             </td>
            <td> 7539</td>
            <td> <a href="http://localhost:8000/tickets/73">Eveniet.</a></td>
        </tr>
                <tr>
            <td> 83</td>
            <td> 54</td>
            <td> 17</td>
            <td style="text-align: center">  assigned             </td>
            <td> 3750</td>
            <td> <a href="http://localhost:8000/tickets/83">Nulla totam.</a></td>
        </tr>
                <tr>
            <td> 84</td>
            <td> 38</td>
            <td> 92</td>
            <td style="text-align: center">  assigned             </td>
            <td> 7408</td>
            <td> <a href="http://localhost:8000/tickets/84">Exercitationem.</a></td>
        </tr>
                <tr>
            <td> 88</td>
            <td> 21</td>
            <td> 26</td>
            <td style="text-align: center">  assigned             </td>
            <td> 5036</td>
            <td> <a href="http://localhost:8000/tickets/88">Alias consequatur.</a></td>
        </tr>
                <tr>
            <td> 90</td>
            <td> 34</td>
            <td> 36</td>
            <td style="text-align: center">  assigned             </td>
            <td> 3672</td>
            <td> <a href="http://localhost:8000/tickets/90">Neque.</a></td>
        </tr>
                <tr>
            <td> 91</td>
            <td> 22</td>
            <td> 36</td>
            <td style="text-align: center">  assigned             </td>
            <td> 8735</td>
            <td> <a href="http://localhost:8000/tickets/91">Non officia.</a></td>
        </tr>
                </tbody>
    </table>


    <ul class="pager">
        <li class="disabled"><span>&laquo; Previous</span></li><li><a href="http://localhost:8000/tickets?page=2" rel="next">Next &raquo;</a></li>  </ul>

</div>

<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.18.3/js/jquery.tablesorter.min.js"></script>
<script type="text/javascript" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>

<script type="text/javascript">
    $(document).ready(function () {
        $("table").tablecloth({
            theme: "default",
            bordered: true,
            condensed: true,
            striped: true,
            sortable: true,
            clean: true,
            cleanElements: "th td"
        });
    });
</script>
</body>
</html>

1 个答案:

答案 0 :(得分:0)

我看到的桌布脚本似乎不见了。这很有效。

http://jsfiddle.net/bcafj8y0/

<script type="text/javascript" src="http://cdn.lukej.me/jquery.tablecloth/1.0.0/js/jquery.tablecloth.js"></script>