Post
Ask Question
Gunjan Manan

Gunjan Manan

  • NA
  • 46
  • 9k

Paginating grid on button click

Sep 2 2016 6:44 AM
Hi I have a html table with both grid view and list view my pagination jquery works on list view but not on grid view may i know how can I achieve it
here is my jquery and code
 
@model ExternalUI.Models.ProductCatalog.ProductsViewModel
@{
Layout = string.Empty;
bool row = true;
ExternalUI.Models.ProductCatalog.PaginationSettings paginationSettings = new ExternalUI.Models.ProductCatalog.PaginationSettings();
//passing itemsperpage between postbacks
var data1 = ViewBag.dataquantity;
if (data1 == "10")
{
paginationSettings.paginationPageAmount = 10;
}
else if (data1 == "25")
{
paginationSettings.paginationPageAmount = 25;
}
else
{
paginationSettings.paginationPageAmount = 50;
}
var data = paginationSettings.paginationPageAmount;
}
<div id="productMenu" class="row" style="padding-top:5px;">
<text>Items per Page:</text>
<select id="itemsPerPage" onchange="SendItemsPerPage()" style="padding-left: 3px; padding-right: 3px; ">
@if (Model.itemsPerPageFilter != null && @data == 50)
{
<option value="50" selected>50</option>}
else
{
<option value="50">50</option>
}
@if (Model.itemsPerPageFilter != null && @data == 25)
{
<option value="25" selected>25</option>}
else
{
<option value="25">25</option>
}
@if (Model.itemsPerPageFilter != null && @data == 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" 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>
<script>
$(function () {
var pageParts = $('#gridView');
// 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();
var windowHeight = $(window).height();
}
});
});
</script>
 

Answers (2)