jQuery表分拣机无法正常工作

时间:2016-02-08 05:54:24

标签: javascript jquery html sorting tablesorter

用于排序功能的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>

1 个答案:

答案 0 :(得分:1)

您需要theadtbody

&#13;
&#13;
$(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 &#9660; </font>
      </th>
      <th style="width:10%; text-align:center" align="center"> <font color="04BBCD"> Arrival &#9660; </font>
      </th>
      <th style="width:15%; text-align:center" align="center"> <font color="04BBCD"> Duration &#9660; </font>
      </th>
      <th style="width:25%; text-align:center" align="center"> <font color="04BBCD">  Fare &#9660; </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;
&#13;
&#13;