Paginating grid on button click

Question

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>