用于排序功能的Javascript函数和文件
不知道为什么这不起作用。
页面内的这些文件:
http://example.com/xx/file.php
这是JS函数:
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="js/jquery.tablesorter.min.js"></script>
这是航班表,它没有对数据进行排序,因为它只有2行:
<script type="text/javascript">
$(function(){
$('#keywords').tablesorter();
});
</script>
答案 0 :(得分:1)
您需要thead
和tbody
$(function() {
$('#keywords').tablesorter();
});
&#13;
<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.1.1/addons/pager/jquery.tablesorter.pager.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.1.1/js/jquery.tablesorter.js"></script>
<table id="keywords" class="flight_details" align="center" cellspacing="" cellpadding="20px" style="border-collapse: separate; border-spacing: 0px 5px;">
<thead>
<tr style="border:1px;">
<th style="width:15%" align="center"></th>
<th style="width:15%; text-align:center"> <font color="04BBCD"> Departure ▼ </font>
</th>
<th style="width:10%; text-align:center" align="center"> <font color="04BBCD"> Arrival ▼ </font>
</th>
<th style="width:15%; text-align:center" align="center"> <font color="04BBCD"> Duration ▼ </font>
</th>
<th style="width:25%; text-align:center" align="center"> <font color="04BBCD"> Fare ▼ </font>
</th>
<th style="width:20%; text-align:center" align="center"></th>
</tr>
</thead>
<tbody>
<tr class="flight_tr makeborder">
<td class="leftborder">
<img src="image/clay-img/air france logo.png" style=" width:100px;" />
<br />Flight No.
<br />XXXXXXXXXXXXX</td>
<td align="center" style="size:16px;">17.45 DEL
<hr />17.45 DEL</td>
<td align="center" style="size:16px;">11.25 LEIP
<hr />11.25 LEIP</td>
<td align="center">19h.50m
<br /> <font size="1px;">1stop</font>
<hr />19h.50m
<br />1stop</td>
<td align="center" style="size:16px; font-size:16px;"><font color="04BBCD"> INR 36000</font>
</td>
<td align="center" style="size:16px;" class="rightborder">
<button type="button" class="btn">View Details</button>
<br />
<br />
<button type="button" class="btn">Add to Cart</button>
</td>
</tr>
<tr class="flight_tr makeborder">
<td class="leftborder">
<img src="image/clay-img/air france logo.png" style=" width:100px;" />
<br />Flight No.
<br />XXXXXXXXXXXXX</td>
<td align="center" style="size:16px;">18.45 DEL
<hr />19.45 DEL</td>
<td align="center" style="size:16px;">4.25 LEIP
<hr />11.25 LEIP</td>
<td align="center" style="size:16px;">23h.50m
<br /><font size="1px;">1stop</font>
<hr />16h.50m
<br />1stop</td>
<td align="center" style="size:16px; font-size:16px; color:04BBCD"><font color="04BBCD"> INR 37000</font>
</td>
<td align="center" style="size:16px;" class="rightborder">
<button type="button" class="btn">View Details</button>
<br />
<br />
<button type="button" class="btn">Add to Cart</button>
</td>
</tr>
</tbody>
</table>
&#13;