Bind jquery datatable from dropdownlist selection using AJAX webmethod

See more:

C#

SQL

jQuery

I have a list of items populated in a dropdownlist which is coming from my database(sql Server), However I want to select some of the items based on the item selected and bind the datatable . I know doing it with asp.net Gridview server control but not with a Jquery DataTable.

What I have tried:

Here What I tried:
1. Jquery:

$("#<%=ddlReservationStatus.ClientID %>").live("change", function (e) {//when u change the value of Category dropdown
            e.preventDefault();
            $.checkSessionExists(function (event, data) {//.live( events, data, handler(eventObject) ):event:A string containing a JavaScript event type, such as "click" or "keydown." data:A map of data that will be passed to the event handler.handler(eventObject)A function to execute at the time the event is triggered.
                if (data.sessionExists) {
                    showloading();
                    // PageMethods this is allow you to refer the page where the method is defined(eg.: PageMethods.GetSubCategory(GetSubCategory find it inside MyProduct.aspx.cs).)
                    PageMethods.GetSubCategory($("#<%=ddlReservationStatus.ClientID %>").val(), function (response) {//response is the value return by pagemethod
                        $("#<%=ddlReservationStatus.ClientID %>").html(''); //clear the html of dropdown ddlsubcategory
                        var result = eval("(" + response + ")"); //converts the string to json format
                        hideloading();
                    });
                }
                });
            });

2. c# : Here is how am populating the dropdownlist:

ReservationInfo _ReservationInfo = new ReservationInfo();
           List<reservationinfo> _ReservationInfoList = _ReservationInfo.GetReservationStatus().ToList<reservationinfo>();
           ddlReservationStatus.DataSource = _ReservationInfoList;
           ddlReservationStatus.DataValueField = "ReservationId";
           ddlReservationStatus.DataTextField = "ReservationType";
           ddlReservationStatus.DataBind();

3. C# here am trying to get reservation status by Id and bind the Jquery Datable:

[WebMethod(EnableSession = true)]
    public static string GetReservationStatus(int ReservationTypeID)
    {
        HelperFunctions.InitializeCulture();//initialize culture is required in every ajax call methods
        ReservationInfo _ReservationInfo = new ReservationInfo();
        _ReservationInfo.ReservationTypeID = ReservationTypeID;
        List<reservationinfo> _ReservationInfoList = _ReservationInfo.GetReservationStatusById().ToList<reservationinfo>();//List<subcategoryinfo> this can store multiple SubCategoryInfo objects
        //_ReservationInfoList.Insert(0, new ReservationInfo { SubCategoryId = 0, SubCategoryName = Resources.Language.Select });
        var serializer = new System.Web.Script.Serialization.JavaScriptSerializer();
        return serializer.Serialize(_ReservationInfoList);
    }

4. Query: And this is my procedure

ALTER proc [dbo].[getReservationStatusById]
@ReservationTypeId int
as
begin
   select RS.ReservationId, RS.ReservationTypeId, 
   RIGHT(ReservationType, LEN(ReservationType) - 2) AS ReservationType
   from Reservation RS 
   inner join Room R on R.RoomId = RS.RoomId
   inner join ReservationType RST on RST.ReservationTypeID = RS.ReservationTypeId
   where RS.ReservationTypeId = @ReservationTypeId
end</subcategoryinfo></reservationinfo></reservationinfo></reservationinfo></reservationinfo>