通过ajax生成内容时，tablesorter JS无法正常工作 [英] tablesorter JS not working when content generated via ajax

问题描述

我不希望添加/添加现有表.我的表是空的，直到通过AJAX返回结果.我正在尝试通过javascript插件tablesorter.js对表格数据进行排序. 我已经对表格进行了排序，所以它在标题和正文之间进行了拆分.我似乎无法通过

I'm not looking to add to / append an existing table. My table is empty until results are returned via AJAX. I'm trying to sort my tables data via the javascript plugin, tablesorter.js. I have sorted my table so It's split between header and body. I can't seem to get the table rows to change though

我的AJAX代码是;

My Code for the AJAX is;

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


               <script>  
              $(document).ready(function(){ 
           $.datepicker.setDefaults({  
                dateFormat: 'yy-mm-dd'   
           });  
           $(function(){  
                  $("#to_date").datepicker(); 
                  });  
           var to_date = $('#to_date').val(); 

$( "#genre" ).val();
    {
var value = $(this).val();          

$( "#price" ).val();
    {
var value = $(this).val();



       $('#filter').click(function(){  

              var to_date = $('#to_date').val(); 
              var request = $("#genre").val(); 
              var request1 = $("#price").val(); 

              var data = 'to_date'+'request'+'request1';
                if(to_date != '' )  
                {  
                     $.ajax({  
                          url:"filter.php",  
                          method:"POST",  
                          data: { to_date:to_date, request:request,request1:request1 }, 
                          success:function(data)  
                          {  


                               $('#results').html(data);  
                          $('#results').trigger("update");



                          }  
                     });  
                }  
                else  
                {  
                     alert("Please Select Date");  
                }  
           });  
      }; 
       }; 

        });  
           </script>






        and my code for the html / PHP is;

         <table id="results" class="tablesorter"> 
    <thead>
        <tr>  
            <th>Event</th>  
            <th>Venue</th>  
            <th>Genre</th>  
            <th>Date</th> 
            <th>Price</th>  
        </tr>  
         </thead>
               <tbody>
                  <?php  

             while($row = mysqli_fetch_array($result))  
             {  
             ?>  
                  <tr>  

                       <td><?php echo $row["event_name"]; ?></td>  
                       <td><?php echo $row["venue_name"]; ?></td>  
                       <td><?php echo $row["genre"]; ?></td>  
                       <td><?php echo $row["event_date"]; ?></td>  
                  </tr>  
             <?php  
             }  

             ?>  
                   </tbody>
                          </table>  

推荐答案

您从未真正调用过该插件: $(结果").tablesorter() 每当您更新数据时，都应该对tablesorters更新触发器进行全部处理，以使它的引用更新.

you never actually called to the plugin: $("results").tablesorter() Everytime you get your data updated you should make a all to the tablesorters update trigger so it gets its references updated.

success:function(data)  
                      {  
                          $('#results').html(data);  
                          $('#results').trigger("update");
                      }  

应该可以解决的问题

这篇关于通过ajax生成内容时，tablesorter JS无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！