javascript - jQuery table sorter is not working -

javascript function , files sorting function

don't know why not working.

these files inside 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 js function:

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

this flight table not sorting data has 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 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 cart </button>       </td>      </tr>     </table> 

you need have thead , 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 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 cart</button>        </td>      </tr>    </tbody>  </table>