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 }

HTTP errors

HTTP errors are sent to your web browser from a website if a problem is encountered when trying to view a webpage. If the webpage cannot be displayed, Internet Explorer will display either the actual error page sent by the website or a friendly error message built into Internet Explorer. Below you will find some of the most common errors and ideas for how to solve the problem that's causing them. The following table lists the most common HTTP errors that Internet Explorer will display. For information about HTTP protocols, error codes, and causes, visit the World Wide Web Consortium (W3C) website. You can also search the web for specific error codes. HTTP error message What it means What you can do The webpage cannot be found (HTTP 400) Internet Explorer is able to connect to the web server, but the webpage cannot be found because of a problem with the web address (URL). This error message often happen...