javascript - 如何在Fuelux上设置分页

我尝试使用FUELUX reperater，并且所有数据都能正常工作。
现在，我的问题是：

如何正确设置分页？原因目前，它在一个页面中显示所有结果，并且控制台中出现最大调用堆栈超出错误。

这是我的代码：

  function getCheckinData(options, callback) {
        $.ajax({
            type: 'POST',
            url: "../wp-content/plugins/hg-reports/includes/checkin_page/JSON_data.php",
            data: {
                filter: options.filter.value,
                search: (typeof options.search != 'undefined') ? options.search : "",
                sort_property: (typeof options.sortProperty != 'undefined') ? options.sortProperty : "",
                sort_direction: (typeof options.sortDirection != 'undefined') ? options.sortDirection : ""
            }
        })
            .done(function (data, result, jqXHR) {
                var checkinData = JSON.parse(data).data;

                _.templateSettings.variable = "badNode";
                var template = _.template(
                    $("script.template").html()
                );

                _.each(checkinData, function (row) {
                    row.badNodesHTML = "";
                    var HG_action_login = '<a class="btn btn-default btn-sm" target="_blank" href="#"><i class="fa fa-external-link"></i> APP</a>';

                    row.HG_actions = HG_action_login;
                    if (row.badNodes.length) {
                        _.each(row.badNodes, function (badNode) {
                            [badNode.address].toString()
                            badNode.address = /:(.+)/.exec(badNode.address)[1];
                            row.badNodesHTML += template(badNode);
                            row.HG_actions;
                        });
                    }
                });


                var resp = {
                    columns: [
                        {label: "Actions", property: "HG_actions", sortable: false, className: "actions", width: 70},
                        {label: "User", property: "customer", sortable: true, width: 200, className: "userCell"},
                        {label: "Description", property: "description", sortable: false, width: 180, className: "editableDescription"},
                        {label: "Flag", property: "flag", sortable: false, width: 60, className: "editableFlag"},
                        {label: "Build", property: "build", sortable: false, width: 150},
                        //    {label: "TimeStamp", property: "ts", sortable: true, width: 180},
                        {label: "Checkin", property: "checkin", sortable: true, width: 250},
                        {label: "MAC", property: "site", sortable: true, width: 200, className: "macAddressColumn"},
                        // {label: "Address", property: "address", sortable: false, width: 150},
                        {label: "Boiler", property: "boiler", sortable: false, width: 150},
                        {label: "Nodes", property: "nodes", sortable: false, width: 80},
                        {label: "BadNodes", property: "badNodesHTML", sortable: false, className: "badNodes"}
                    ],
                    count: checkinData.length,
                    items: checkinData,
                    page: options.pageIndex,
                    pages: Math.ceil(checkinData.length / (options.pageSize || 50))
                };

                var items = checkinData;

                var pageIndex = options.pageIndex;
                var pageSize = options.pageSize;
                var data = items;

                var totalItems = data.length;
                var totalPages = Math.ceil(totalItems / pageSize);
                var startIndex = (pageIndex * pageSize) + 1;
                var endIndex = (startIndex + pageSize) - 1;
                if (endIndex > data.length) {
                    endIndex = data.length;
                }

                data = data.slice(startIndex - 1, endIndex);

                var dataSource = {
                    page: pageIndex,
                    pages: totalPages,
                    count: totalItems,
                    start: startIndex,
                    end: endIndex,
                    columns: columns,
                    items: data
                };

                callback(resp, dataSource);
                var statusColumnSuccess = $(".macAddressColumn span.success");
                var statusColumnWarning = $(".macAddressColumn span.warning");
                var statusColumnDanger = $(".macAddressColumn span.danger");

                $(statusColumnSuccess).closest("tr").addClass("hg-systems-success")
                $(statusColumnWarning).closest("tr").addClass("hg-systems-warning")
                $(statusColumnDanger).closest("tr").addClass("hg-systems-danger")

            }
        ).
            fail(function (jqXHR, textStatus, errorThrown) {
                console.error(
                    "The following error occured: " +
                        textStatus, errorThrown
                );
            });

    };
    $('#myRepeater').repeater({dataSource: getCheckinData});

这是HTML标记：

    <div class="fuelux">
<div class="repeater" id="myRepeater">
<div class="repeater-header">
    <div class="repeater-header-left">
        <div class="repeater-search">
            <div class="search input-group">
                <input type="search" class="form-control" placeholder="Search" id="fueluxSearchBox"/>
            <span class="input-group-btn">
              <button class="btn btn-default" type="button" id="searchButton">
                  <span class="glyphicon glyphicon-search"></span>
                  <span class="sr-only">Search</span>
              </button>
                 <button id="enableEdit" class="btn btn-success">Enable Edit</button>
            </span>
            </div>

        </div>
    </div>
    <div class="repeater-header-right">
        <div class="btn-group selectlist repeater-filters" data-resize="auto">
            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                <span class="selected-label">&nbsp;</span>
                <span class="caret"></span>
                <span class="sr-only">Toggle Filters</span>
            </button>
            <ul class="dropdown-menu" role="menu">
                <li data-value="all" data-selected="true"><a href="#">All</a></li>
                <li data-value="notRegistered"><a href="#">Not Registered</a></li>
                <li data-value="nodeIssues"><a href="#">Node Issues</a></li>
                <li data-value="checkinIssues"><a href="#">Checkin Issues</a></li>
                <li data-value="oldSoftware"><a href="#">Old Software</a></li>
            </ul>
            <input class="hidden hidden-field" name="filterSelection" readonly="readonly" aria-hidden="true"
                   type="text"/>
        </div>
    </div>
</div>
<div class="repeater-viewport">
    <div class="repeater-canvas"></div>
    <div class="loader repeater-loader"></div>
</div>
<div class="repeater-footer">
<div class="repeater-footer-left">
    <div class="repeater-itemization">
        <span><span class="repeater-start"></span> - <span class="repeater-end"></span> of <span
                class="repeater-count"></span> items</span>

        <div class="btn-group selectlist" data-resize="auto">
            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                <span class="selected-label">&nbsp;</span>
                <span class="caret"></span>
                <span class="sr-only">Toggle Dropdown</span>
            </button>
            <ul class="dropdown-menu" role="menu">
                <li data-value="5"><a href="#">5</a></li>
                <li data-value="10" data-selected="true"><a href="#">10</a></li>
                <li data-value="20"><a href="#">20</a></li>
                <li data-value="50" data-foo="bar" data-fizz="buzz"><a href="#">50</a></li>
                <li data-value="100"><a href="#">100</a></li>
            </ul>
            <input class="hidden hidden-field" name="itemsPerPage" readonly="readonly" aria-hidden="true" type="text"/>
        </div>
        <span>Per Page</span>
    </div>
</div>
<div class="repeater-footer-right">
    <div class="repeater-pagination">
        <button type="button" class="btn btn-default btn-sm repeater-prev">
            <span class="glyphicon glyphicon-chevron-left"></span>
            <span class="sr-only">Previous Page</span>
        </button>
        <label class="page-label" id="myPageLabel">Page</label>

        <div class="repeater-primaryPaging active">
            <div class="input-group input-append dropdown combobox">
                <input type="text" class="form-control" aria-labelledby="myPageLabel">

                <div class="input-group-btn">
                    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                        <span class="caret"></span>
                        <span class="sr-only">Toggle Dropdown</span>
                    </button>
                    <ul class="dropdown-menu dropdown-menu-right"></ul>
                </div>


            </div>
        </div>
        <input type="text" class="form-control repeater-secondaryPaging" aria-labelledby="myPageLabel">
        <span>of <span class="repeater-pages"></span></span>


        <button type="button" class="btn btn-default btn-sm repeater-next">
            <span class="glyphicon glyphicon-chevron-right"></span>


            <span class="sr-only">Next Page</span>
        </button>
    </div>

任何帮助将非常感激！

非常感谢

最佳答案

您可以在数据源中设置分页，以便仅向中继器提供应在一页上的项目。发送到数据源中的回调的数据应仅是当前正在查看的数据，然后，如果数据源中的可用选项说它是第二页，则将数据更改为第二页的数据。

像过滤器一样对待数据源。

关于javascript - 如何在Fuelux上设置分页，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/27422374/