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 ▼ </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> <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 ▼ </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 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>
Comments
Post a Comment