In js file :
var _currentPageID = 1;
var _pageSize = 10;
var _sortExpression = '';
var _sortDirection = 1;
var _accessUrl = '';
var _gridDivId = 'ajaxGrid';
var _searchBoxDivId = 'searchFilter';
var _searchParameters = [];
function asynList()
{
var jsonParameters = { "CurrentPageID": _currentPageID, "PageSize": _pageSize, "SortingColumn": _sortExpression, "SortingOrder": _sortDirection, "SearchParameter": _searchParameters };
$.ajax({
type: 'POST',
contentType: 'application/json',
data: JSON.stringify({ TablePaging: jsonParameters }),
url: _accessUrl,
success: function (result)
{
$('#' + _gridDivId).html(result);
$('.sort-icon').removeClass('sort-asc');
$('.sort-icon').removeClass('sort-desc');
$('.sort-icon').each(function (index)
{
if ($(this).attr('onclick') == "sortRequest('" + _sortExpression + "')") {
if (_sortDirection == 1) {
$(this).addClass('sort-asc');
}
else {
$(this).addClass('sort-desc');
}
}
});
},
error: function (request, status, error)
{
// look for status of 401 and redirect to login
if (status == 403) {
window.location = "/";
}
}
});
}
$(document).ready(function ()
{
$('#selectPageSize').live("change", function ()
{
_pageSize = parseInt(this.value);
_currentPageID = 1;
asynList();
});
});
function pageRequest(pageid)
{
_currentPageID = parseInt(pageid);
asynList();
}
function searchRequest()
{
_searchParameters.splice(0, _searchParameters.length);
$('#' + _searchBoxDivId).find('input:text').each(function ()
{
if ($(this).val() != '' && $(this).val() != null) {
var parameter = { Key: $(this).attr('name'), Value: $(this).val() }
_searchParameters.push(parameter);
}
});
$('#' + _searchBoxDivId).find('input:checkbox').each(function ()
{
var parameter = { Key: $(this).attr('name'), Value: $(this).is(':checked') }
_searchParameters.push(parameter);
});
$('#' + _searchBoxDivId).find('select').each(function ()
{
if ($(this).val() != '' && $(this).val() != null) {
var parameter = { Key: $(this).attr('name'), Value: $(this).val() }
_searchParameters.push(parameter);
}
});
_currentPageID = 1;
asynList();
}
function sortRequest(sortColumn)
{
if (_sortExpression == sortColumn) {
if (_sortDirection == 1) {
_sortDirection = 2;
}
else {
_sortDirection = 1;
}
}
else {
_sortDirection = 1;
}
_currentPageID = 1;
_sortExpression = sortColumn;
asynList();
}
--------------------------------------------------------------------------------------
Partial View :
@{
Layout = null;
}
@if (ViewBag.DataPagingModel != null)
{
StudyUncle.Models.Control.DataPagingModel PagingModel = (StudyUncle.Models.Control.DataPagingModel)ViewBag.DataPagingModel;
if (PagingModel.TotalRecords > 0)
{
PagingModel.TotalPages = (PagingModel.TotalRecords / PagingModel.PageSize) + ((PagingModel.TotalRecords % PagingModel.PageSize == 0) ? 0 : 1);
PagingModel.StartRecord = (PagingModel.TotalRecords == 0) ? 0 : (((PagingModel.CurrentPageID - 1) * PagingModel.PageSize) + 1);
PagingModel.EndRecord = (PagingModel.TotalPages == PagingModel.CurrentPageID || PagingModel.TotalRecords == 0) ? PagingModel.TotalRecords : (((PagingModel.CurrentPageID - 1) * PagingModel.PageSize) + PagingModel.PageSize);
PagingModel.StartPageNumber = 1;
PagingModel.EndPageNumber = PagingModel.TotalPages;
if (PagingModel.TotalPages > 8 && PagingModel.CurrentPageID > 4)
{
PagingModel.StartPageNumber = PagingModel.CurrentPageID - 3;
PagingModel.EndPageNumber = PagingModel.StartPageNumber + 7;
if (PagingModel.EndPageNumber > PagingModel.TotalPages)
{
PagingModel.EndPageNumber = PagingModel.TotalPages;
PagingModel.StartPageNumber = PagingModel.EndPageNumber - 7;
}
}
else if (PagingModel.CurrentPageID < 5)
{
PagingModel.EndPageNumber = PagingModel.TotalPages < 8 ? PagingModel.TotalPages : 8;
}
<div class="widget-paging">
<div class="page-status">
<span class="fl margin-right10" style="display: none;">
<select id="selectPageSize" class="pagination_pagesize select">
<option value="10">10</option>
<option value="20">20</option>
<option value="50">50</option>
<option value="100">100</option>
</select>
</span>Showing @PagingModel.StartRecord - @PagingModel.EndRecord of @PagingModel.TotalRecords
</div>
@if (PagingModel.TotalPages > 1)
{
<div class="page-no">
@if (PagingModel.CurrentPageID == 1)
{
<span class="button orange disabled">First</span>
<span class="button orange disabled">Previous</span>
}
else
{
<span class="button orange" onclick="pageRequest('1')">First</span>
<span class="button orange" onclick="pageRequest('@(PagingModel.CurrentPageID - 1)')">
Previous</span>
}
<span>
@for (int TStart = PagingModel.StartPageNumber; TStart <= PagingModel.EndPageNumber && TStart <= PagingModel.TotalPages; TStart++)
{
if (TStart == PagingModel.CurrentPageID)
{
<span class='button active'>@TStart</span>
}
else
{
<span class='button orange' onclick="pageRequest('@TStart')">@TStart</span>
}
}
</span>
@if (PagingModel.CurrentPageID == PagingModel.TotalPages)
{
<span class='button disabled'>Next</span>
<span class='button disabled'>Last</span>
}
else
{
<span class='button orange' onclick="pageRequest('@(PagingModel.CurrentPageID + 1)')">
Next</span>
<span class='button orange' onclick="pageRequest('@PagingModel.TotalPages')">Last</span>
}
</div>
}
</div>
<script type="text/javascript">
$(document).ready(function () {
$('#selectPageSize').val('@PagingModel.PageSize');
});
</script>
}
else
{
<span class="no-record">No Record Found</span>
}
}
var _currentPageID = 1;
var _pageSize = 10;
var _sortExpression = '';
var _sortDirection = 1;
var _accessUrl = '';
var _gridDivId = 'ajaxGrid';
var _searchBoxDivId = 'searchFilter';
var _searchParameters = [];
function asynList()
{
var jsonParameters = { "CurrentPageID": _currentPageID, "PageSize": _pageSize, "SortingColumn": _sortExpression, "SortingOrder": _sortDirection, "SearchParameter": _searchParameters };
$.ajax({
type: 'POST',
contentType: 'application/json',
data: JSON.stringify({ TablePaging: jsonParameters }),
url: _accessUrl,
success: function (result)
{
$('#' + _gridDivId).html(result);
$('.sort-icon').removeClass('sort-asc');
$('.sort-icon').removeClass('sort-desc');
$('.sort-icon').each(function (index)
{
if ($(this).attr('onclick') == "sortRequest('" + _sortExpression + "')") {
if (_sortDirection == 1) {
$(this).addClass('sort-asc');
}
else {
$(this).addClass('sort-desc');
}
}
});
},
error: function (request, status, error)
{
// look for status of 401 and redirect to login
if (status == 403) {
window.location = "/";
}
}
});
}
$(document).ready(function ()
{
$('#selectPageSize').live("change", function ()
{
_pageSize = parseInt(this.value);
_currentPageID = 1;
asynList();
});
});
function pageRequest(pageid)
{
_currentPageID = parseInt(pageid);
asynList();
}
function searchRequest()
{
_searchParameters.splice(0, _searchParameters.length);
$('#' + _searchBoxDivId).find('input:text').each(function ()
{
if ($(this).val() != '' && $(this).val() != null) {
var parameter = { Key: $(this).attr('name'), Value: $(this).val() }
_searchParameters.push(parameter);
}
});
$('#' + _searchBoxDivId).find('input:checkbox').each(function ()
{
var parameter = { Key: $(this).attr('name'), Value: $(this).is(':checked') }
_searchParameters.push(parameter);
});
$('#' + _searchBoxDivId).find('select').each(function ()
{
if ($(this).val() != '' && $(this).val() != null) {
var parameter = { Key: $(this).attr('name'), Value: $(this).val() }
_searchParameters.push(parameter);
}
});
_currentPageID = 1;
asynList();
}
function sortRequest(sortColumn)
{
if (_sortExpression == sortColumn) {
if (_sortDirection == 1) {
_sortDirection = 2;
}
else {
_sortDirection = 1;
}
}
else {
_sortDirection = 1;
}
_currentPageID = 1;
_sortExpression = sortColumn;
asynList();
}
--------------------------------------------------------------------------------------
Partial View :
@{
Layout = null;
}
@if (ViewBag.DataPagingModel != null)
{
StudyUncle.Models.Control.DataPagingModel PagingModel = (StudyUncle.Models.Control.DataPagingModel)ViewBag.DataPagingModel;
if (PagingModel.TotalRecords > 0)
{
PagingModel.TotalPages = (PagingModel.TotalRecords / PagingModel.PageSize) + ((PagingModel.TotalRecords % PagingModel.PageSize == 0) ? 0 : 1);
PagingModel.StartRecord = (PagingModel.TotalRecords == 0) ? 0 : (((PagingModel.CurrentPageID - 1) * PagingModel.PageSize) + 1);
PagingModel.EndRecord = (PagingModel.TotalPages == PagingModel.CurrentPageID || PagingModel.TotalRecords == 0) ? PagingModel.TotalRecords : (((PagingModel.CurrentPageID - 1) * PagingModel.PageSize) + PagingModel.PageSize);
PagingModel.StartPageNumber = 1;
PagingModel.EndPageNumber = PagingModel.TotalPages;
if (PagingModel.TotalPages > 8 && PagingModel.CurrentPageID > 4)
{
PagingModel.StartPageNumber = PagingModel.CurrentPageID - 3;
PagingModel.EndPageNumber = PagingModel.StartPageNumber + 7;
if (PagingModel.EndPageNumber > PagingModel.TotalPages)
{
PagingModel.EndPageNumber = PagingModel.TotalPages;
PagingModel.StartPageNumber = PagingModel.EndPageNumber - 7;
}
}
else if (PagingModel.CurrentPageID < 5)
{
PagingModel.EndPageNumber = PagingModel.TotalPages < 8 ? PagingModel.TotalPages : 8;
}
<div class="widget-paging">
<div class="page-status">
<span class="fl margin-right10" style="display: none;">
<select id="selectPageSize" class="pagination_pagesize select">
<option value="10">10</option>
<option value="20">20</option>
<option value="50">50</option>
<option value="100">100</option>
</select>
</span>Showing @PagingModel.StartRecord - @PagingModel.EndRecord of @PagingModel.TotalRecords
</div>
@if (PagingModel.TotalPages > 1)
{
<div class="page-no">
@if (PagingModel.CurrentPageID == 1)
{
<span class="button orange disabled">First</span>
<span class="button orange disabled">Previous</span>
}
else
{
<span class="button orange" onclick="pageRequest('1')">First</span>
<span class="button orange" onclick="pageRequest('@(PagingModel.CurrentPageID - 1)')">
Previous</span>
}
<span>
@for (int TStart = PagingModel.StartPageNumber; TStart <= PagingModel.EndPageNumber && TStart <= PagingModel.TotalPages; TStart++)
{
if (TStart == PagingModel.CurrentPageID)
{
<span class='button active'>@TStart</span>
}
else
{
<span class='button orange' onclick="pageRequest('@TStart')">@TStart</span>
}
}
</span>
@if (PagingModel.CurrentPageID == PagingModel.TotalPages)
{
<span class='button disabled'>Next</span>
<span class='button disabled'>Last</span>
}
else
{
<span class='button orange' onclick="pageRequest('@(PagingModel.CurrentPageID + 1)')">
Next</span>
<span class='button orange' onclick="pageRequest('@PagingModel.TotalPages')">Last</span>
}
</div>
}
</div>
<script type="text/javascript">
$(document).ready(function () {
$('#selectPageSize').val('@PagingModel.PageSize');
});
</script>
}
else
{
<span class="no-record">No Record Found</span>
}
}
-------------------------------------------------------------------------------------------------------
Paging Model :
public enum SortingOrder
{
Ascending = 1,
Descending = 2
}
public class DataPagingModel
{
public DataPagingModel()
{
CurrentPageID = 0;
PageSize = 10;
TotalRecords = 0;
TotalPages = 0;
PageUrl = "";
SearchText = "";
SortingColumn = "";
SortingOrder = SortingOrder.Ascending;
}
public int CurrentPageID { get; set; }
public int TotalPages { get; set; }
public int StartPageNumber { get; set; }
public int EndPageNumber { get; set; }
public int TotalRecords { get; set; }
public int StartRecord { get; set; }
public int EndRecord { get; set; }
public int PageSize { get; set; }
public string PageUrl { get; set; }
public string AjaxUrl { get; set; }
public string SortingColumn { get; set; }
public SortingOrder SortingOrder { get; set; }
public string SearchText { get; set; }
public bool ShowAllRecord { get; set; }
private Dictionary<string, string> _SearchParameter = new Dictionary<string, string>();
public Dictionary<string, string> SearchParameter { get { return _SearchParameter; } set { _SearchParameter = value; } }
}
Comments
Post a Comment