Question

我有一个php网站。在这里，我在div中列出了数据库表中的更多内容，我的结构是

<table width="100%" border="0"  cellspacing="0">
  <tr bgcolor="#fbf2d8" >
    <td width="9%" height="31" class="flight_heading"><a href="#">Nmae</a></td>
    <td width="27%" class="flight_heading"><a href="#">Stop</a></td>
    <td width="11%"  class="flight_heading"><a href="#">Depart</a></td>
    <td width="10%"  class="flight_heading"><a href="#">Arrive</a></td>
    <td width="20%" class="flight_heading"><a href="#">Duration</a></td>
    <td width="13%" class="flight_heading"><a href="#">Price</a></td>
    <td width="10%" >&nbsp;</td>
  </tr>
  <tr style="border:0px;">
    <td height="148" colspan="7">

    <div id="airline"><!--  starts here -->
    <table width="100%" height="136" border="0" cellpadding="5" cellspacing="5" style="font-size:12px; color:#333333;">
      <tr >
        <td width="8%" height="35"><div align="center">Name</div></td>
        <td width="29%" ><div align="left">BLR → HYD (0)</div></td>
        <td width="11%" ><div align="left">08 : 55</div></td>
        <td width="10%" ><div align="left">12 : 55</div></td>
        <td width="18%" ><div align="left">1h 25m</div></td>
        <td width="14%" ><h2 align="center">Rs. 3,805</h2></td>
        <td width="10%"><div id="book_now1"><a href="#">Book</a><a href="#" class="detail">Details</a>
        </div>        </td>
      </tr>
      <tr >
        <td height="81" colspan="7" align="center">
        <div id="airline_detail">
        <table width="100%" height="69" border="0" cellspacing="5">
  <tr>
    <td height="18" colspan="4">GOING THERE: Tuesday, 06 March, 2012</td>
    </tr>
  <tr>
    <td width="7%" height="36"><div align="center">Name</div></td>
    <td width="19%">Kingfisher Red<br /> 
      IT 2817</td>
    <td width="50%"><p><strong>Dep:</strong>    08:55   Bengaluru International, Bangalore (BLR)<br />
        <strong>Arr:</strong>   10:20   Rajiv Gandhi International, Hyderabad (HYD) </p>      </td>
    <td width="24%">    1h 25m    ECONOMY     Non Refundable</td>
  </tr>
</table>
        </div>        </td>
        </tr>
    </table>
    </div><!-- ends here -->
    </td>
    </tr>
    </table>

我不想改变我的设计。但是我想在用户点击名称，或停止或定价等

时对字段进行排序

如果没有刷新页面也没有任何改变设计的方法吗？

我知道在表内容中进行排序，但它不适用于该情况。

我尝试使用Ajax提交页面，但在提交后需要采用排序值（名称）以便我可以从表中获取数据

先谢谢

Answer 1

你需要JavaScript才能在前端执行此操作...如果您不使用jQuery，那么我建议TinyTable ...如果您使用的是jQuery，那么我建议DataTables

但我认为这些嵌套表中的任何一个都将是你最大的绊脚石！

Answer 2

您可以使用JQuery插件对表进行排序。其中有很多，例如this one (SortTable)

还有this page, which shows 16 techniques

从数据库中对页面中的内容进行排序而不刷新页面

2 个答案: