Question

我有搜索页面searchpage.php和search.php。结果将以表格格式显示，我想对功能进行排序，但它不起作用。

searchpage.php

<script type="text/javascript">

$(document).ready(function()
{
  $("#keywords").keyup(function()
  {
    var kw = $("#keywords").val();
    //alert(kw);
    if(kw != '')
     {
      $.ajax
      ({
         type: "POST",
         url: "search.php",
         data: "kw="+ kw,
         success: function(option)
         {
           $("#results").html(option);
         }
      });
     }
     else
     {
       $("#results").html("");
     }
    return false;
  });


   $(".overlay").click(function()
   {
     $(".overlay").css('display','none');
     $("#results").css('display','none');
   });
   $("#keywords").focus(function()
   {
     $(".overlay").css('display','block');
     $("#results").css('display','block');
   });
});

</script>
<script>
$(document).ready(function() 
    { 
        $("#myTable").tablesorter(); 
    } 
); 
</script>

</head>
<body>
 <form class="white-pink org">
<div>
    <div id="textspan"><span>Enter Number :</span>&nbsp;&nbsp;</div>
    <div id="inputbox">
        <input type="text" id="keywords" name="keywords" value="" />

</div>
<div id="results"></div>
<div></div>
</form>

的search.php

<?php

if(isset($_POST['kw']) && $_POST['kw'] != '')
{

  $kws = $_POST['kw'];
  $kws = mysql_real_escape_string($kws);
  $query = "select id, message from test where message like '%".$kws."%' like '%".$kws."%' limit 5" ;


  $res = mysql_query($query);
  //Here we count the number of returned rows. If it returned nothing then it will store 0.
  $count = mysql_num_rows($res);
  $i = 0;

  if($count > 0)
  {



echo '<div id=content>
          <table id="myTable" class="tablesorter"> 
        <thead>
            <tr>
                <th>id</th>
                <th>message</th>


            </tr>
        </thead>';
    while($row = mysql_fetch_array($res))
    {




      echo "<tbody><tr>";
      echo "<td>".$row['id']."</td><td>".$row['message']."</td>";
      echo "</tr>";
      $i++;
      if($i == 10) break;
    }
    echo "</tbody></table></div>";
    if($count > 10)
    {
      echo "<div id='view_more'><a href='#'>View more results</a></div>";
    }
  }
  else
  {
    echo "<div id='no_result'>No result found !</div>";
  }
}
?>

我不确定$（“＃myTable”）。tablesorter（）;我可以在哪里添加？

由于

Answer 1

请勿在 DOM 上准备好tablesorter()，在页面中附加ajax响应数据后，您必须调用表格排序器$("#myTable").tablesorter();，因为tablesorter()是在数据在页面上之前初始化，因此它将无法工作。

这样做：

$("#keywords").keyup(function()
  {
    var kw = $("#keywords").val();
    //alert(kw);
    if(kw != '')
     {
      $.ajax
      ({
         type: "POST",
         url: "search.php",
         data: "kw="+ kw,
         success: function(option)
         {
           $("#results").html(option);
         }
      });
     }
     else
     {
       $("#results").html("");
     }
    $("#myTable").tablesorter(); <-------------
    return false;
  });

Tablesorter插件无法以搜索形式工作

1 个答案: