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 }

Types Of Join In SQL

Sql joins are used to fetch/retrieve data from two or more data tables, based on a join condition. A join condition is a relationship among some columns in the data tables that take part in Sql join. Basically data tables are related to each other with keys. We use these keys relationship in sql joins. Inner Join Outer Join Cross Join Cross Join