122 lines
3.6 KiB
JavaScript
122 lines
3.6 KiB
JavaScript
var state = {
|
|
'querySet': [{"clientUUID":"436c4774-038f-4540-9c18-2691ca9b53d4","mockedResponseId":1908998,"mediaType":"application/xml","messageBody":"body","httpHeaders":null,"httpStatus":200}],
|
|
|
|
'page': 1,
|
|
'rows': 10,
|
|
'window': 5,
|
|
}
|
|
|
|
state.querySet = mockedMessageDtoList;
|
|
buildTable();
|
|
|
|
function pagination(querySet, page, rows) {
|
|
|
|
var trimStart = (page - 1) * rows
|
|
var trimEnd = trimStart + rows
|
|
var trimmedData = querySet.slice(trimStart, trimEnd)
|
|
var pages = Math.ceil(querySet.length / rows);
|
|
|
|
return {
|
|
'querySet': trimmedData,
|
|
'pages': pages,
|
|
}
|
|
}
|
|
|
|
|
|
function pageButtons(pages) {
|
|
var wrapper = document.getElementById('pagination-wrapper');
|
|
|
|
wrapper.innerHTML = ``;
|
|
var maxLeft = (state.page - Math.floor(state.window / 2))
|
|
var maxRight = (state.page + Math.ceil(state.window / 2))
|
|
if (maxLeft < 1) {
|
|
maxLeft = 1
|
|
maxRight = state.window
|
|
}
|
|
|
|
if (maxRight > pages) {
|
|
maxLeft = pages - (state.window - 1)
|
|
|
|
if (maxLeft < 1) {
|
|
maxLeft = 1
|
|
}
|
|
maxRight = pages
|
|
}
|
|
|
|
for (var page = maxLeft; page <= maxRight; page++) {
|
|
if(page === state.page){
|
|
wrapper.innerHTML += `<button value=${page} class="page btn btn-sm btn-info" name="allMessagesClicked">${page}</button>`
|
|
}
|
|
else{
|
|
wrapper.innerHTML += `<button value=${page} class="page btn btn-sm btn-info">${page}</button>`
|
|
}
|
|
}
|
|
|
|
if (state.page != 1) {
|
|
wrapper.innerHTML = `<button value=${1} class="page btn btn-sm btn-info">« First</button>` + wrapper.innerHTML
|
|
}
|
|
|
|
if (state.page != pages) {
|
|
wrapper.innerHTML += `<button value=${pages} class="page btn btn-sm btn-info">Last »</button>`
|
|
}
|
|
|
|
$('.page').on('click', function() {
|
|
$('#table-body').empty()
|
|
|
|
state.page = Number($(this).val())
|
|
|
|
buildTable()
|
|
})
|
|
|
|
}
|
|
|
|
|
|
function buildTable() {
|
|
var table = $('#table-body')
|
|
|
|
var data = pagination(state.querySet, state.page, state.rows)
|
|
var myList = data.querySet
|
|
for(var i = 1; i<=myList.length; i++){
|
|
var j = i + (state.page-1) * 10;
|
|
if(i%2 === 0){
|
|
var row = `<tr bgcolor="#b3ffff">
|
|
<td>` + j + `</td>
|
|
<td>${myList[i-1].mockedResponseId}</td>
|
|
<td>${myList[i-1].mediaType}</td>
|
|
<td>${myList[i-1].httpStatus}</td>
|
|
<td>
|
|
<button type="submit" name="updateMessage" value="${myList[i-1].mockedResponseId}">
|
|
<img src="/img/update-button.png" style="width: 20px;"/>
|
|
</button>
|
|
</td>
|
|
<td>
|
|
<button type="submit" name="removeMessage" value="${myList[i-1].mockedResponseId}">
|
|
<img src="/img/icons8-cancel-64.png" style="width: 20px;"/>
|
|
</button>
|
|
</td>
|
|
`
|
|
}else{
|
|
var row = `<tr bgcolor="#e6ffff">
|
|
<td>` + j + `</td>
|
|
<td>${myList[i-1].mockedResponseId}</td>
|
|
<td>${myList[i-1].mediaType}</td>
|
|
<td>${myList[i-1].httpStatus}</td>
|
|
<td>
|
|
<button type="submit" name="updateMessage" value="${myList[i-1].mockedResponseId}">
|
|
<img src="/img/update-button.png" style="width: 20px;"/>
|
|
</button>
|
|
</td>
|
|
<td>
|
|
<button type="submit" name="removeMessage" value="${myList[i-1].mockedResponseId}">
|
|
<img src="/img/icons8-cancel-64.png" style="width: 20px;"/>
|
|
</button>
|
|
</td>
|
|
`
|
|
}
|
|
|
|
table.append(row)
|
|
}
|
|
|
|
pageButtons(data.pages)
|
|
}
|