Post
Ask Question
Gunjan Manan

Gunjan Manan

  • NA
  • 46
  • 8.3k

Pagination as Data coming in Chunks

Aug 26 2016 9:20 AM
Hi,
 
I am using simple pagination plugin in my page however the problem is that data is coming in chunks. So I am not able to see the pages when I am clicking on items per page tab
below is my code. Please help
 
@model ExternalUI.Models.ProductCatalog.ProductsViewModel
@{
Layout = string.Empty;
bool row = true;
ExternalUI.Models.ProductCatalog.PaginationSettings paginationSettings = new ExternalUI.Models.ProductCatalog.PaginationSettings();
paginationSettings.paginationPageAmount = 50;
var data = paginationSettings.paginationPageAmount;
}
<div id="productMenu" class="row" style="padding-top:5px;">
<text>Show up to:</text>
<select id="itemsPerPage" onchange="SendItemsPerPage()" style="padding-left: 3px; padding-right: 3px; ">
@if (Model.itemsPerPageFilter != null && Model.itemsPerPageFilter == "50")
{
<option value="50" selected>50</option>}
else
{
<option value="50">50</option>
}
@if (Model.itemsPerPageFilter != null && Model.itemsPerPageFilter == "25")
{
<option value="25" selected>25</option>}
else
{
<option value="25">25</option>
}
@if (Model.itemsPerPageFilter != null && Model.itemsPerPageFilter == "10")
{
<option value="10" selected>10</option>}
else
{
<option value="10">10</option>
}
</select>
<text style="padding-left: 30px" >Order By:</text>
<select id="orderBy" onchange="SendOrderBy()" style="padding-left: 1px; padding-right: 3px;padding-bottom: 6px;">
<option value="dismiss">Select Order By</option>
@foreach (var item in Model.productOrderByValues)
{
if (Model.orderByFilter != null && Model.orderByFilter == item.Key)
{
<option value="@item.Key" selected>@item.Value</option>
}
else
{
<option value="@item.Key">@item.Value</option>
}
}
</select>
@*<input type="button" value="Create Product" onclick="window.top.location.href='@System.Web.Configuration.WebConfigurationManager.AppSettings["CeltrinoExpressURL"]/ViewDocument.aspx?documentId=@System.Web.Configuration.WebConfigurationManager.AppSettings["CreateNewProductFileId"]' ;" />*@
<input type="button" value="Create Product" onclick="window.top.location.href='@System.Web.Configuration.WebConfigurationManager.AppSettings["CeltrinoExpressURL"]/[email protected]' ;" style="padding-left: 3px; padding-right: 3px; "/>
<input type="button" value="Switch to Grid" onclick="SwitchGridList()" style="padding-left: 3px; padding-right: 3px;" />
</div>
<div id="productInfo">
<div id="gridView" hidden>
@foreach (var product in Model.productViewModels)
{
if (row)
{
@:<div class="row">
}
<a href="@System.Web.Configuration.WebConfigurationManager.AppSettings["CeltrinoExpressURL"]/[email protected]["documentId"]"
target="_top">
<div class="six columns">
<div class="panel">
<div class="panel-title">@product.productData[Model.productTitleField.Value]</div>
<div>
@foreach (KeyValuePair<string, string> bodyField in Model.productBodyFields)
{
<div class="row panel-field">
<div class="six columns">@bodyField.Key</div>
<div class="six columns">
@if (product.productData.Keys.Contains(@bodyField.Value))
{
if (bodyField.Key == "Status")
{
if (product.productData[bodyField.Value] == "41")
{
@: Buyer Review
}
else if (product.productData[bodyField.Value] == "53")
{
@: Product Info Change Review
}
}
else
{
@product.productData[bodyField.Value]
}
}
else
{
@: --
}
</div>
</div>
}
</div>
</div>
</div>
</a>
if (!row)
{
@:</div>
}
{
row = !row;
}
}
@if (!row)
{
@:</div>
}
</div>
<div id="listView">
<table class="u-full-width">
<thead>
<tr>
<th>@Model.productTitleField.Key</th>
@foreach (KeyValuePair<string, string> bodyField in Model.productBodyFields)
{
<th>@bodyField.Key</th>
}
</tr>
</thead>
<tbody>
@foreach (var product in Model.productViewModels)
{
<tr onclick="window.top.location.href = '@System.Web.Configuration.WebConfigurationManager.AppSettings["CeltrinoExpressURL"]/[email protected]["documentId"]';">
<td>@product.productData[Model.productTitleField.Value]</td>
@foreach (KeyValuePair<string, string> bodyField in Model.productBodyFields)
{
<td> @if (product.productData.Keys.Contains(@bodyField.Value))
{
if (bodyField.Key == "Status")
{
if (product.productData[bodyField.Value] == "41")
{
@: Buyer Review
}
else if (product.productData[bodyField.Value] == "53")
{
@: Product Info Change Review
}
}
else
{
@product.productData[bodyField.Value]
}
}
else
{
@: --
}
</td>
}
</tr>
}
</tbody>
</table>
<div id="productMenu1" class="row" style="padding-top:10px;">
</div>
<div><input type="button" id="prvsPage" value="<" onclick="SendExtraFilter('PaginationAction', -1)" />
<input type="button" id="nextPage" value=">" onclick="SendExtraFilter('PaginationAction', 1)" /></div>
</div>
<script>
$(function () {
var pageParts = $("table tbody tr");
// How many parts do we have?
var numPages = pageParts.length;
// How many parts do we want per page?
var perPage = @data;
// When the document loads we're on page 1
// So to start with... hide everything else
pageParts.slice(perPage).hide();
$('#productMenu1').pagination({
items: numPages,
itemsOnPage: perPage,
cssStyle: "light-theme",
// We implement the actual pagination
// in this next function. It runs on
// the event that a user changes page
onPageClick: function (pageNum) {
// Which page parts do we show?
var start = perPage * (pageNum - 1);
var end = start + perPage;
// First hide all page parts
// Then show those just for our page
pageParts.hide()
.slice(start, end).show();
}
});
});
</script>