Click here to Skip to main content
11,437,397 members (35,142 online)
Click here to Skip to main content
Add your own
alternative version

Implement CRUD Operations using RESTful WCF Service and JavaScript

, 15 Sep 2011 CPOL
Easy way to consume WCF REST services through JQuery and perform CRUD (Create Retrieve Update Delete) operations
DbSchema-SQLServer2005.zip
QGridDemo.zip
QGridDemo
QGridDemo
Account
App_Data
sample.mdf
sample_log.ldf
App_Logics
Business Entities
Data Access Layer
Entity Model
DatabaseContext.edmx
bin
QGridDemo.dll
QGridDemo.pdb
Global.asax
Properties
QGridDemo.csproj.user
Scripts
Grid
arrow_down.png
arrow_up.png
cycle_five.gif
globalheader.png
pre-loader.gif
sprite.png
Jquery-UI
Services
EFService.svc
Styles
var totalCount = 0;
var pageSize = 10;
var currentPageIndex = 0;
var sortItem = null;
var sortIDirection = "desc";
$(document).ready(function () {

    $("#dataTable thead th").click(function () {
        sortItem = $(this).attr("sort-data");
        ResetSortDirection($(this), sortItem);
        currentPageIndex = 0;
        LoadData(currentPageIndex);
    });

    $(".grid-pager a").click(function (event) {

        var isValidPage = true;
        var totalPage = Math.ceil(totalCount / pageSize);
        var pageitem = $(this).attr("data-page");
        if (pageitem == "first") {
            currentPageIndex = 0;
        }
        else if (pageitem == "prev") {
            if (currentPageIndex + 1 > 1) {
                currentPageIndex = currentPageIndex - 1;
            }
            else {
                isValidPage = false;
            }
        }
        else if (pageitem == "next") {

            if (currentPageIndex + 1 < totalPage) {
                currentPageIndex = currentPageIndex + 1;
            }
            else {
                isValidPage = false;
            }
        }
        else if (pageitem == "last") {
            currentPageIndex = totalPage - 1;
        }
        else {
            // Do Nothing
        }

        if (isValidPage == true) {
            SetPager(currentPageIndex);
            LoadData(currentPageIndex);
            ResetButtonStyles(currentPageIndex, totalPage);
        }
        else {
            // Do nothing
        }

        
        return false;
    });

    ResetPager();
    LoadPager();
    LoadData(0);

});

function ResetButtonStyles(currentPageIndex, pageSize) {
   
    if (currentPageIndex+1 == pageSize) {
        $("a.pager-last").removeClass('button small blue pager-last').addClass('button small gray pager-last');
    }
    else {
        $("a.pager-last").removeClass('button small gray pager-last').addClass('button small blue pager-last');
    }

    if (currentPageIndex + 1 == pageSize) {
        $("a.pager-next").removeClass('button small green pager-next').addClass('button small gray pager-next');
    }
    else {
        $("a.pager-next").removeClass('button small gray pager-next').addClass('button small green pager-next');
    }

    if (currentPageIndex == 0) {
        $("a.pager-first").removeClass('button small blue pager-first').addClass('button small gray pager-first');
    }
    else {
        $("a.pager-first").removeClass('button small gray pager-first').addClass('button small blue pager-first');
    }

    if (currentPageIndex - 1 < 0) {
        $("a.pager-prev").removeClass('button small green pager-prev').addClass('button small gray pager-prev');
    }
    else {
        $("a.pager-prev").removeClass('button small gray pager-prev').addClass('button small green pager-prev');
    }

}
function ResetSortDirection(component, item) {

    if (item == sortItem) 
    {
        if (sortIDirection == "desc") 
        {
            sortIDirection = "asc";
            component.attr("class", "grid-header-desc");
        }
        else 
        {
            sortIDirection = "desc";
            component.attr("class", "grid-header-asc");
        }
    }
}

function ResetPager() 
{
    if (sortItem == null) 
    {
        sortItem = $("#dataTable thead th:first").attr("sort-data");
        sortIDirection = "desc";
    }
}

function SetPager(currentIndex) 
{
    $(".totalRecords").text(totalCount);
    $(".current").text(currentIndex + 1);
    var totalPage = Math.ceil(totalCount / pageSize);
    $(".total").text(totalPage);

}

By viewing downloads associated with this article you agree to the Terms of Service and the article's licence.

If a file you wish to view isn't highlighted, and is a text file (not binary), please let us know and we'll add colourisation support for it.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Shahriar Iqbal Chowdhury/Galib
Chief Technology Officer
Bangladesh Bangladesh
I am a Software Engineer and Microsoft .NET technology enthusiast. Professionally I worked on several business domains and on diverse platforms. I love to learn and share new .net technology and my experience I gather in my engineering career. You can find me from here

Personal Site
Personal Blog
FB MS enthusiasts group
About Me

| Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.150428.2 | Last Updated 16 Sep 2011
Article Copyright 2011 by Shahriar Iqbal Chowdhury/Galib
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid