Skip to main content

Jquery Paging in MVC

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>
    }
}
-------------------------------------------------------------------------------------------------------
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

Popular posts from this blog

Change Key Dynamically in Web.Config

System.Xml; private void SetConfigSettings() { string path = Server.MapPath("Web.config"); string newConnectionString = @"Server=local;Database="+txtDatabaseName.Text+";Trusted_Connection=true"; XmlDocument xDoc = new XmlDocument(); xDoc.Load(path); XmlNodeList nodeList = xDoc.GetElementsByTagName("appSettings"); XmlNodeList nodeAppSettings = nodeList[0].ChildNodes; XmlAttributeCollection xmlAttCollection = nodeAppSettings[0].Attributes; xmlAttCollection[0].InnerXml = txtKey.Text; // for key attribute xmlAttCollection[1].InnerXml = newConnectionString; // for value attribute xDoc.Save(path); // saves the web.config file }

ASP.Net Page Life Cycle

The ASP.Net life cycle could be divided into two groups: Application Life Cycle Page Life Cycle ASP.Net Application Life Cycle: The application life cycle has the following stages: User makes a request for accessing application resource, a page. Browser sends this request to the web server. A unified pipeline receives the first request and the following events take place: An object of the ApplicationManager class is created. An object of the HostingEnvironment class is created to provide information regarding the resources. Top level items in the application are compiled. Response objects are created . the application objects: HttpContext, HttpRequest and HttpResponse are created and initialized. An instance of the HttpApplication object is created and assigned to the request. The request is processed by the HttpApplication class. Different events are raised by this class for processing the request. ASP.Net Page Life Cycle: When a page is requested, it is loaded...