Sarbjyot Singh Chahal Sarbjyot Singh Chahal - 3 years ago 252
HTML Question

jQuery table sorter is not working

Javascript function and files for sorting function

Don't know why this is not working.

These files inside the page page:

<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="js/jquery.tablesorter.min.js"></script>


This is the JS function:

<script type="text/javascript">
$(function(){
$('#keywords').tablesorter();
});
</script>


This is flight table which is not sorting the data as it has only 2 rows:

<table id="keywords" class="flight_details" align="center"
cellspacing="" cellpadding="20px"
style="border-collapse: separate; border-spacing: 0px 5px;">
<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>

<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>
</table>

Answer Source

You need to have thead and tbody

$(function() {
  $('#keywords').tablesorter();
});
<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>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download