jQuery table sorter is not working

Question

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 1

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>