I'm struggling to implement pagination on another developer's existing code. I've tried implementing some of the solutions explained in a previous SO Post: Pagination on a list using ng-repeat
The code takes a two-dimensional array, parses through it converting to an object of strings, and then displays that on the page. Each object key is used as a column.
Not sure how to utilize Angular's builtin Limit filter with this setup. I think that would be the ideal solution. But I'm open to just a JS solution as well. (I've started it out as a JS solution below towards bottom of post.)
var data = [["c1","blah","yup","halted","bacon", "blue"],
["c2","blank","everything","nothing test"],
["c3","test","vista","xp, 7 "],
["c4","true"],
["c5","do","something else really long text", "and more"]
]
$rootScope.resultsObject = parseResults(data);
var columnSize = ["twelve", "six", "four", "three", "two", "two"]
$rootScope.columnCountShow = columnSize[columnCounter($rootScope.resultsObject)-1]
factory('parseResults', function(){
return function(resultsData){
var resultsObject = {};
var column;
for(var i = 0; resultsData.length > i; i++){
column = "column" +i;
resultsObject[column] = resultsData[i].toString().replace(/[\,]/g, "<br>")
}
return resultsObject;
}
})
HTML:
<div class="{{columnCountShow}} columns results-column" ng-repeat="resultsObject in resultsObject">
<div ng-bind-html-unsafe="resultsObject">
</div>
How would I go about doing a show more style of pagination? It'll go through and display the first 2 results from each array, they click show more, and it loads the next 2, etc.
The current method that I'm using to try and do this: Take the data (before parsed) and slice off a section, and parse only that bit. Then when they select show more, it'll take the next few lines, etc.
var limit = 3;
var start = 0;
for (var i = 0; i < data.length; i++) {
var ndata = [[]];
ndata = data[i].slice(start,limit);
console.log(ndata);
}
Issue with this, it seems thatdata remains intact. slice doesn't seem to actually remove that portion from the array?
Update
slice was definitely not working out for me. Realized JS has a splice method. (for some reason I didn't think it existed. My current way of splicing up the data is:
$scope.submitWords = function(){
event.preventDefault();
var columnCount = columnCounter($scope.keywords);
var sendObject = keyWordSplit($scope.keywords, columnCount)
var limit = 2;
var start = 0;
var ndata = [[]];
for (var i = 0; i < $scope.testData.length; i++) {
ndata[i] = $scope.testData[i].splice(start,limit);
console.log(ndata);
console.log("original data <br>" + $scope.testData);
$rootScope.resultsObject = parseResults(ndata);
}
var columnSize = ["twelve", "six", "four", "three", "two", "two"];
$rootScope.columnCountShow = columnSize[columnCounter($rootScope.resultsObject)-1];
}
This correctly splits up the data. Now I just need to have it updating my model. When selecting show_more() it replaces the existing data rather than appending to it.
