Using Jquery JTable (believe me its the best jquery tool i came across)

JTable Basics : (DownLoad Code)

Hai Guys Welcome again and in this you going to learn about Jquery Jtable.

First Things First:  1) You need to have a database table created in ur Database
2) Data Entity Model for that Table(look for my first Topic(gridview) if u donno how to add Data Entity Model    and
3)You need to have some Jquery Files to achieve this and here they are: you can download all of them from here..

https://www.dropbox.com/s/mav3pdbwgtgxq6k/assets.rar

Now Open the Visual Studio 2013 or 2012. i have started using 2013 since yesterday it was Awesome.
Create a project as usual and  Name it as JTableDemo and ad a webform 

Now Add a Class File And name it as Member.cs

Now Add Some properties to our class 

           public int MemberId { get; set; }

         public string Name { get; set; }

                     public string EmailAddress { get; set; }

               public string Password { get; set; }

            public string Gender { get; set; } 

              public string Location { get; set; }

Add Entity Model and add our TblMembers to our Project

Select database Name 

By Clicking Finish  Butoon it will create something like this for us 

  

Okay now you all set to write Some code for Jtable.


1. Create a div and name its ID property to "JTableDemo" or what ever you may like 
Now add Some Scripts in the Head Section of ur web-form  

    <link href="assets/jquery-ui.css" rel="stylesheet" />
    <link href="assets/jtable.2.3.1/themes/jqueryui/jtable_jqueryui.css" rel="stylesheet" />
    <link href="assets/jtable.2.3.1/themes/metro/green/jtable.css" rel="stylesheet" />
    <script src="assets/jquery-1.9.1.js"></script>
    <script src="assets/jquery-ui.js"></script>

    <script src="assets/jtable.2.3.1/jquery.jtable.js"></script>
    <script src="assets/jtable.2.3.1/external/json2.js"></script>

    <script src="assets/jtable.2.3.1/extensions/jquery.jtable.aspnetpagemethods.js"></script>

Now let me explain Something important to you. Its about the scripts that we have used above 

First of all you dont need to write them just you can find them in assets folder which ihave giiven download link and then you can just Drag and Drop whats required and the important thing is 

1. You have select the style files i mean .CSS files first and then you need to load .JS Files (May be the other ways work but its just an Advice)


Now its time to write some J Query(JQ) Code. For that we need a script tag which looks like 

<script type="text/JavaScript">  </script>

in that Tag we need to write our JQ Code 


<script type="text/javascript">
        debugger;
        $(document).ready(function () {
            $("#JTableDemo").jtable({
                title: 'The JTable Demo',
                paging: true, //Enables paging
                pageSize: 10, //Actually this is not needed since default value is 10.
                sorting: true, //Enables sorting
                defaultSorting: 'Name ASC', //Optional. Default sorting on first load.
                actions:
                {

                    listAction: '/JTablePractice.aspx/MembersList',
                    createAction: '/Home/CreateNewMember',
                    updateAction: '/GettingStarted/UpdatePerson',
                    deleteAction: '/GettingStarted/DeletePerson'

                },
                fields:
                {
                    MemberId:
                    {
                        title: 'MemberId',
                        key: true,

                    },
                    Name:
                    {
                        title: 'Name',
                        width: '13%'
                    },
                    EmailAddress:
                    {
                        title: 'Email-Id',
                        width: '15%'
                    },
                    Pasword:
                    {
                        list: false
                    },
                    Gender:
                    {
                        title: 'Gender',
                        width: '8%'
                    },
                    Location:
                    {
                        title: 'Location',
                        width: '12%'
                    },


                },




            });

            $('#JTableDemo').jtable('load');
        });
    </script>



Now lemme Explain those things for you (note these are Case-Sensitive)


1.       title :  As we all know its the title of our JTable
2.   actions :  This is the coolest part of Jtable in which we define the Function                     or action that needs to be taken when we add or delete or                             update records in JTable. Cool ah?

3.      fields:     This is responsible for  the column names and the data that                         will be appeared in those columns.( name the field as it is in                         database or in the data where U'r loading the table from.


Now we are all set Run our App. Click F5 or Ctrl+F5. 

       Okay "no data Available because we haven't send any Data to the Table. See  we haven't written any classes or methods for retrieving Data from Db.

                  listAction: '/JTablePractice.aspx/MembersList',
                    createAction: '/Home/CreateNewMember',

And one thing we can even add an update and delete buttons for our Jtable and even sorting and paging implementations now that the cool thing about Jtable.  All u need to do is adding them to "actions" field.

 SEE              updateAction: '/GettingStarted/UpdatePerson',
                    deleteAction: '/GettingStarted/DeletePerson'

Note listAction, createAction, updateAction, deleteAction are predefined action names for jtable so use them as it is.


Now we will write code for retrieving Data From Database.

[WebMethod(EnableSession = true)]
        public static object MembersList()
        {
            try
            {
                //Get data from database
                using (var db = new ASPPracticesEntities())
                {
                    var MembResult = (from MemList in db.TblMembers select MemList).ToList();
                    if (MembResult.Count != 0)
                        return new { Result = "OK", Records = MembResult };
                        else return 0;
                }
            }
            catch (Exception ex)
            {
                return new { Result = "ERROR", Message = ex.Message };
            }

        }


Now Run Program and we will get the desired output

Whoa! Thats cool right 

See there You can Find delete button and Edit Button and also u can select noof rows and can goto another pages all u need to do is to write some code. Which i will update in few days.

That's all for the Gotta Go. Indians are being Demolished by South Africans. 
Had to see it. 

Bubbye