【发布时间】：2015-02-20 02:25:58
【问题描述】：
我正在使用 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>« Previous</span></li><li><a href="http://localhost:8000/tickets?page=2" rel="next">Next »</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>
【问题讨论】：
标签： javascript jquery twitter-bootstrap laravel jquery-ui-sortable