I'm try to use FUELUX reperater, and I have all the data working fine. Now, my question is:
How can I set up properly the paging? cause at the moment it displays all the results in one single page and I have a maximum call stack exceeded error in the console.
This is the code that I have:
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});
and here's the HTML markup:
<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"> </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"> </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>
any help would be really appreciated!
Thanks a lot
