Tablesorter 插件在搜索表单中不起作用答案

【问题标题】：Tablesorter plugin not working in search formTablesorter 插件在搜索表单中不起作用
【发布时间】：2014-06-07 18:09:52
【问题描述】：

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

搜索页面.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>

搜索.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();我在哪里可以添加？

谢谢

【问题讨论】：

标签： javascript jquery ajax search tablesorter

【解决方案1】：

不要在 DOM 上调用 tablesorter() 准备好，您必须在页面中附加 ajax 响应数据后调用 table sorter $("#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;
  });

【讨论】：