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);
    })
}

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

2 个答案: