Question

我们使用jQuery，jQuery模板和Wufoo jQuery API来显示表单中的数据，使用以下代码：

<div id="people">           
    <ul>
        <script id="attendeeTemplate" type="text/x-jquery-tmpl">
            <li>
                <h4>${Field1}</h4>
                ${Field3} minutes
            </li>
             </script>
    </ul>
</div>

这很好用，但我们希望将其限制为只显示前10个条目。现在它显示数据库中的每个条目（使用下面的JavaScript和API进行排序）。请注意，我们只是尝试显示前10名，按最高分钟数排序到最低。

这是JavaScript：

<script>
    function processEntries(data) {
        $.each(data.Entries, function(entriesIndex, entriesObject) {
            // Make sure this entry has all the required bits
            if (entriesObject.Field1 && entriesObject.Field3) {
                $("#attendeeTemplate").tmpl(entriesObject).appendTo("#people ul");  
            }
        });
    };

    $.wufooAPI.getEntries({
        "callback"   : processEntries,             // Name of custom function declared above
        "formHash"   : "BLAH",                   // Found by clicking "Code" button from the Form Manager, then the "API Information" button
        "sortID"   : "Field3",                   // Found by clicking "Code" button from the Form Manager, then the "API Information" button
        "sortDirection"   : "DESC",                   // Found by clicking "Code" button from the Form Manager, then the "API Information" button

    });
</script>

关于如何将其限制在前10名的任何想法都会非常有用！

Answer 1

这应该有效：

data.Entries.slice(0,9);

Answer 2

如果您无法使用数据库强加限制，您仍然可以进行如下修复：

function processEntries(data) {
    var i = 0;
    $.each(data.Entries, function(entriesIndex, entriesObject) {
        // Make sure this entry has all the required bits
        if (entriesObject.Field1 && entriesObject.Field3 && i<10) {
            $("#attendeeTemplate").tmpl(entriesObject).appendTo("#people ul");
            i++;
        }
    });
};

注意：这假设您之前以某种方式订购了entires

Answer 3

假设data.Entries是一个数组，您可以使用Array.slice()：

$.each(data.Entries.slice(0, 9), function(entriesIndex, entriesObject) {

在jQuery模板中仅显示前10名

3 个答案: