Ajax 在 PHP 中排序 Table

Question

如何在点击图片时对表格进行排序（升序和降序）？

 <div id= "list_head" onmouseover="this.style.background='gray'"; onmouseout="this.style.background='#FFF0D1'";>
                             <div style="width:50px;float:left;text-align:center;">
                             <img id='INVESTIGATION_SL_NO.ASC' type="submit" src='images/up.png' onClick="sortBy(this.id);"title="View Description Ascending" width="25" height="21" />
                             <b>Slno</b>
                              <img id='INVESTIGATION_SL_NO.DESC'  src='images/down2.png' onClick="sortBy(this.id);" title="View Description Descending" width="25" height="21" />
                             </div>
                             <div style="width:50px;float:left;text-align:center;"><b>Type</b></div>
                             <div style="width: 300px;float:left;padding-left: 5px;">
                                    <img id='DESCRIPTION.ASC' type="submit" src='images/up.png' onClick="sortBy(this.id);"title="View Description Ascending" width="25" height="21" />
                                    <b>Description</b>
                                    <img id='DESCRIPTION.DESC'  src='images/down2.png' onClick="sortBy(this.id);" title="View Description Descending" width="25" height="21" />
                             </div>
                             <div style="width: 300px;float:left;text-align:center;">
                                      <img id='NAME.ASC'  src='images/up.png'  onClick="sortBy(this.id);" title="View Department Ascending" width="25" height="21" />
                                     <b> Department Doing Test</b>
                                     <img id='NAME.DESC' src='images/down2.png' onClick="sortBy(this.id);" title="View Department Descending" width="25" height="21" />
                             </div>

                       </div> 
      <div style="width: 300px;float:left;text-align:center;">
        <img id='NAME.ASC'  src='images/up.png'   title="View Department Ascending" width="25" height="21" />
        <b> Department Doing Test</b>
        <img id='NAME.DESC' src='images/down2.png' title="View Department Descending" width="25" height="21" />
      </div>                         
    </div>

点击这张图片可以排序吗？

i use this java script fuction bt it doesnot work

函数排序（btn） {

       var a = btn.split(".");

       var b ="";
       (a[1]=="ASC")?b="DESC":b="ASC";
       var c =a[0]+"."+b;

       //c=document.getElementById(btn).id;


      // document.getElementById("data_loaded").value;

       var hr=new XMLhttpRequest();

       var url="view_investigation_charges.php";
       hr.open("POST",url,true);
       hr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
       hr.onreadystatechange = function()

       {

       if(hr.readyState == 4 && hr.status == 200)
           {

           var return_data = hr.responseText;
            document.getElementByid("data_loaded").innerHTML=return_data;

           }
       }
      hr.send("sorter="+btn);

      }

this function doesnot sorted the records that has been loaded.

Answer 1

我建议您使用 Tablesorter。 mottie 的叉子很棒。文档中有很多关于如何使用它的示例。

Ajax 在 PHP 中排序 Table

Ajax Sorting Table in PHP

html

javascript

php

jquery