jQuery的阿贾克斯，把手然后清除表重新填充(JQuery, Ajax, Handlebars c

构建熄灭，并抓住数据，然后填充使用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”与类按钮被点击它填充表..（如上所述）。现在好了，当您更改日期选择另一个日期，点击“是”带班按钮也不会重新填充表。

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

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 clear table then repopulate