JQuery，Ajax，把手清除表然后重新填充

Question

构建一个出去并抓取数据然后使用handlebars.js填充表的表单。如果数据发生变化，那么在第一次执行时会很好地工作，然后不会再次填充。任何想法如何让这个工作？

$('a.button').on("click", function(e){ 
     e.preventDefault(); 

     var date = $('#datepicker').val(); 
     var func = "get_all_swo_by_date"; 
     //$('table.output').empty(); 

     $.ajax({ 
      url: "../includes/db_functions.inc.php", 
      type: "post", 
      data: ({ p : date, f : func }), 
      dataType: "json", 
      success: function(results) { 
       var source = $("#entry-template").html(); 
       var template = Handlebars.compile(source); 
       $('table.output').empty(); 
       if(results.length > 0) 
       { 
        $.each(results, function(i, context){ 
         $('table.output').append(template(context)); 
        }); 
       } else { 
        $('table.output').append("There is no data to return."); 
       } 

      } 
     }); 
    }); 

当点击一个按钮类的“a”时，它填充表（如上所述）。确定现在，当你将datepicker更改为另一个日期，并用一类按钮单击“a”时，它不会重新填充表格。

如果有人有一个合法的想法，为什么它不起作用，请让我知道。请不要只是编造东西。我可以自己做很多.. :)

Answer 1

好吧，这里是答案，以防有人在路上寻找它。

我想要做的是明确的出表我附加更改的数据之前，所以当我设置：追加前

$('table.output').empty(); 

我认为这可能会奏效。然而，我很懒，并没有把我的handlebars.js模板带到另一个文件中，所以我所做的只是清理掉我的模板，所以无法重新填充。实质上它并不存在..

因此，创建一个名为yourtemplate.handlebars的外部文件并将其添加到其中。在我的情况下，它是swooutput.handlebars：

<tr> 
<td>{{id}}</td> 
<td>{{item_no}}</td> 
<td>{{swo}}</td> 
<td>{{team_number}}</td> 
<td>{{employee_payrate}}</td> 
<td>{{customer_number}}</td> 
<td>{{customer_name}}</td> 
<td>{{customer_number}}</td> 
<td>{{week_ending}}</td> 
</tr> 

然后创建一个JS文件夹中的文件templates.js像这样：

Handlebars.getTemplate = function(name) { 
if (Handlebars.templates === undefined || Handlebars.templates[name] === undefined) { 
    $.ajax({ 
     url : name + '.handlebars', 
     success : function(data) { 
      if (Handlebars.templates === undefined) { 
       Handlebars.templates = {}; 
      } 
      Handlebars.templates[name] = Handlebars.compile(data); 
     }, 
     async : false 
    }); 
} 
return Handlebars.templates[name]; 
}; 

我是从什么地方，但不能在那里记此时此刻。如果我这样做，我会发布链接。无论如何，不​​是在页面中使用模板，而是使用该函数来获取模板（使其比在运行时编译更快）。或者你可以使用预编译模板，我只是觉得这个方法更简单。

因此，这里是最后的jquery ajax调用与修改后的代码：

$('a.button').on("click", function(e){ 
      e.preventDefault(); 

      var date = $('#datepicker').val(); 
      var func = "get_all_swo_by_date"; 
      //$('table.output').empty(); 

      $.ajax({ 
       url: "../includes/db_functions.inc.php", 
       type: "post", 
       data: ({ p : date, f : func }), 
       dataType: "json", 
       success: function(results) { 
        $('table.output').empty(); 

        var template = Handlebars.getTemplate('swooutput'); 

        $.each(results, function(i, context){ 
          $('table.output').append(template(context)); 
        }); 

       } 
      }); 
     }); 

我希望这有助于该出现的下一个人。

Answer 2

只需添加

<thead> 

和

<tbody> tags. So your table will look something like: 

<table id="tblUsers"> 

<tr> 
     <th> 
      ID 
     </th> 
     <th> 
      Name 
     </th> 
     <th> 
      Last name 
     </th> 
     <th class="header"> 
      Username 
     </th> 
     <th> 

      &nbsp; &nbsp;</th> 
     <th> 
      &nbsp;&nbsp;</th> 
    </tr> 
    </thead> 
    <tbody> 

    </tbody>  

和你的jQuery：

function _onSuccess(data) { 
    console.log(data.d); 
    $('#tblUsers > tbody').empty(); //HERE'S WHERE YOU CLEAN THE TABLE'S BODY OR TBODY 
    $.map(data.d, function (item) { 
     var rows = "<tr>" 
      + "<td style='border:2px solid black; cursor: default;'>" + item.id_user + "</td>" 
      + "<td style='border:2px solid black; cursor: default;'>" + item.name + "</td>" 
      + "<td style='border:2px solid black; cursor: default;'>" + item.last_name + "</td>" 
      + "<td style='border:2px solid black; cursor: default;'>" + item.username + "</td>" 
      + "<td style='border:2px solid black; cursor: pointer;'><input type='button' class='btEdit' id='e" + item.id_user + "' ></td>" 
      + "<td style='border:2px solid black; cursor: pointer;'><input type='button' class='btDel' id='d" + item.id_user + "'></td>" 
      + "</tr>"; 
     $('#tblUsers tbody').append(rows); 
    }) 
}