更新：下面的代碼不能按照我想要的方式作業，就像我在下面提到的那樣，當用戶單擊按鈕時，它應該一次顯示五個專案。
我正在嘗試使用 javascript slice 方法（如果這不是正確的使用方法，請提出建議），陣列串列一次顯示五個陣列項，我創建了 codepen 示例來顯示我正在嘗試做的事情
假設我有 20 條記錄，如果用戶第一次點擊，我應該得到 1-5 個陣列項，如果用戶第二次點擊，我應該得到 5-10 .....依此類推。
https://codepen.io/TLJens/pen/NPZyYR
這里的代碼：
$('#loading').hide();
var counts = 0;
var displayCount = 5;
var starting = 0;
var data = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16];
function slicemydata(sstart, totalsize, eend) {
var items = []; debugger;
if (totalsize <= data.length) {
if (eend == 0) {
items = data.slice(sstart,totalsize);
} else {
if (sstart > eend) {
eend = data.length;
}
items = data.slice(sstart, eend);
sstart = displayCount 5;
}
}
console.log(items);
$('.js-lazy-load-data').append(items);
}
$('.js-lazy-load').click(function () {
counts ;
slicemydata(starting,data.length,displayCount);
$('.js-lazy-load').fadeOut();
// Minor timeout before showing loader
// setTimeout(function () {
// $('#loading').fadeIn();
// }, 400);
// Simulate server call by showing loading gif
// for 2.5 seconds before displaying results
//setTimeout(function () {
// $('#loading').fadeOut();
//}, 2600);
// Display results after 3 seconds
setTimeout(function () {
//$('.js-lazy-load-data').append(data);
$('.js-lazy-load').show();
}, 1000);
});
uj5u.com熱心網友回復：
這是我將如何處理它。
將需要更新的資料和元素傳入函式。
該函式初始化索引，并回傳一個充當偵聽器處理程式的新函式。
在該函式的主體中，您可以使用切片資料撰寫新的 HTML，然后更新元素。
const data = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16];
// Cache the elements
const div = document.querySelector('div');
const button = document.querySelector('button');
// Call `slicer` with the data, and the element to be updated.
// `slicer`returns a new function that is assigned to the listener
button.addEventListener('click', slicer(data, div), false);
// `slicer` accepts some data, and the
// element to be updated
function slicer(data, div) {
// Initialises the `index` which is
// scoped to the returning function. No
// need for global variables!
let index = 0;
// Returns a function that keeps a record
// of index so it can update it
return function () {
if (index < data.length) {
// `slice` the data from the current
// index, `map` over that array to create
// some HTML, and then join it up
const html = data
.slice(index, index 5)
.map(el => `<span>${el}</span>`)
.join(', ');
// Add that to the element that needs updating
div.innerHTML = `<div>${html}</div>`;
// Finally increase the index
index = 5;
} else {
console.log('No more data');
}
}
}<button>Click me!</button>
<div></div>附加檔案
閉包
map模板/字串文字
uj5u.com熱心網友回復：
所以我認為如果你想要做的只是對資料進行分頁，你可以通過跟蹤你當前所在的“pageIndex”以及每個“頁面”的長度來做到這一點。這樣，您在陣列中的起始位置是 justpageIndex * pageSize并且您在陣列中的結束位置是 just start pageSize。然后，您需要做的就是獲取下一頁或上一頁相應地增加/減少您的頁面索引。我將把顯示資料的練習留給您，因為這與您需要幫助的內容無關。希望這可以幫助！
let data = [1,2,3,4,5,6,7,8,9,10,11,12,13];
let currentPage = 0;
let pageSize = 5;
function getPage(data, pageSize, pageIndex) {
let start = pageSize * pageIndex;
return data.slice(start, start pageSize)
}
console.log(getPage(data, pageSize, currentPage));
currentPage ;
console.log(getPage(data, pageSize, currentPage));
currentPage ;
console.log(getPage(data, pageSize, currentPage));
currentPage ;
console.log(getPage(data, pageSize, currentPage));
currentPage ;uj5u.com熱心網友回復：
這可能是Generators 和generator 函式的用例；OP的任務至少是一個很好的實踐練習......
function* createPaginator(itemList = [], pageItemCount = 1, pageNumber = 0) {
pageItemCount = Math.max(pageItemCount, 1);
while (itemList.length >= 1) {
pageNumber;
yield {
pageNumber,
itemList: itemList.splice(0, pageItemCount),
};
}
}
let paginator = createPaginator(
[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13], 5
);
let pagination;
console.log('...automatically tiggered `next` based iteration...');
while (pagination = paginator.next().value) {
const { pageNumber, itemList } = pagination;
console.log({ pageNumber, itemList });
}
paginator = createPaginator(
[1, 2, 3, 4, 5, 6, 7, 8], 6
);
console.log('...explicitly (e.g. event) triggered `next` based iteration...');
console.log(
paginator.next()
);
console.log(
paginator.next()
);
console.log(
paginator.next()
);
console.log(
paginator.next()
);.as-console-wrapper { min-height: 100%!important; top: 0; }轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/459206.html
標籤：javascript
上一篇：是否可以在JavaScript中使用來自動態陣列的字串鍵來索引物件？
下一篇：過濾來自json物件的值范圍