jQuery DataTable and Server Side Data issue with webservice

Question

I am trying to create datatable but I am not in success. Kindly somebody can help me.

This is my stored procedure:

CREATE PROCEDURE [dbo].[pr_SearchMember]   
    @FilterTerm nvarchar(250) = NULL --parameter to search all columns by  
    , @SortIndex INT = 1 -- a one based index to indicate which column to order by  
    , @SortDirection CHAR(4) = 'ASC' --the direction to sort in, either ASC or DESC  
    , @StartRowNum INT = 1 --the first row to return  
    , @EndRowNum INT = 10 --the last row to return  
    , @TotalRowsCount INT OUTPUT  
    , @FilteredRowsCount INT OUTPUT  
AS  
BEGIN  
 --Wrap filter term with % to search for values that contain @FilterTerm  
 SET @FilterTerm = '%' + @FilterTerm + '%'  
 DECLARE @Person TABLE  
(  
        CivilID     NVARCHAR(12),
        FirstName NVARCHAR(50)  
, LastName  NVARCHAR(50)  
, Mobile        NVARCHAR(20)
    , ParentID  NVARCHAR(12)
, RowNum INT  
)  
INSERT INTO @Person(CivilID
                     , FirstName  
         , LastName  
         , Mobile
                     , ParentID
         , RowNum)  
SELECT CivilID
         , FirstName
   , LastName  
   , Mobile
         , ParentID
   , Row_Number() OVER (  
   ORDER BY  
   /*VARCHAR, NVARCHAR, CHAR ORDER BY*/  
   CASE @SortDirection  
    WHEN 'ASC' THEN  
     CASE @SortIndex  
      WHEN 1 THEN CivilID  
      WHEN 2 THEN FirstName  
      WHEN 3 THEN LastName
                WHEN 4 THEN Mobile
                WHEN 5 THEN ParentID  
     END         
   END ASC,  
   CASE @SortDirection  
    WHEN 'DESC' THEN   
     CASE @SortIndex  
      WHEN 1 THEN CivilID  
      WHEN 2 THEN FirstName  
      WHEN 3 THEN LastName
                WHEN 4 THEN Mobile
                WHEN 5 THEN ParentID  
     END  
   END DESC  
   ) AS RowNum  
 FROM  dbo.Hierarchy  
 WHERE  @FilterTerm IS NULL   
    OR CivilID LIKE @FilterTerm
            OR FirstName LIKE @FilterTerm  
    OR LastName LIKE @FilterTerm  
    OR Mobile LIKE @FilterTerm
            OR ParentID LIKE @FilterTerm  
   SELECT CivilID
         , FirstName  
   , LastName  
   , Mobile
         , ParentID
         , RowNum
  FROM  @Person  
   WHERE  RowNum BETWEEN @StartRowNum AND @EndRowNum  
   SELECT @TotalRowsCount = COUNT(*)  
   FROM  dbo.Hierarchy  
   SELECT @FilteredRowsCount = COUNT(*)  
   FROM  @Person  
 END

This is my web service

[WebMethod]
[ScriptMethod(UseHttpGet = true)]
public static string getData()
{
  string connString = ConfigurationManager.ConnectionStrings["ConnectionString"].ToString();
  List<paluwagan> lstPaluwagans = new List<paluwagan>();
  int TotalRowsCount = 0, FilteredRowsCount = 0;
  string data = "", sSearch = HttpContext.Current.Request.Params["sSearch"], sSortDir_0 = HttpContext.Current.Request.Params["sSortDir_0"];
  int? iSortCol_0 = ToInt(HttpContext.Current.Request.Params["iSortCol_0"]);
  int? iDisplayStart = ToInt(HttpContext.Current.Request.Params["iDisplayStart"]);
  int? iDisplayLength = ToInt(HttpContext.Current.Request.Params["iDisplayLength"]); 
  int? sEcho = ToInt(HttpContext.Current.Request.Params["sEcho"]); ;

  using (SqlConnection cn = new SqlConnection(connString))
  {
    using (SqlCommand cmd = new SqlCommand("pr_SearchMember", cn))
    {
      try
      {
        cmd.CommandType = CommandType.StoredProcedure;
        cmd.Parameters.AddWithValue("@FilterTerm", sSearch);
        cmd.Parameters.AddWithValue("@SortIndex", iSortCol_0);
        cmd.Parameters.AddWithValue("@SortDirection", sSortDir_0);
        cmd.Parameters.AddWithValue("@StartRowNum", iDisplayStart);
        cmd.Parameters.AddWithValue("@EndRowNum", iDisplayStart + iDisplayLength);

        cmd.Parameters.Add("@TotalRowsCount", SqlDbType.Int);
        cmd.Parameters["@TotalRowsCount"].Direction = ParameterDirection.Output;
        cmd.Parameters.Add("@FilteredRowsCount", SqlDbType.Int);
        cmd.Parameters["@FilteredRowsCount"].Direction = ParameterDirection.Output;

        cn.Open();
        using (SqlDataReader dr = cmd.ExecuteReader())
        {
          if (dr.HasRows)
          {
            while (dr.Read())
            {
              paluwagan lstPaluwagan = new paluwagan();
              lstPaluwagan.civilID = dr["CivilID"].ToString();
              lstPaluwagan.firstName = dr["FirstName"].ToString();
              lstPaluwagan.lastName = dr["LastName"].ToString();
              lstPaluwagan.mobile = dr["Mobile"].ToString();
              lstPaluwagan.parentID = dr["ParentID"].ToString();
              lstPaluwagan.rowNum = int.Parse(dr["RowNum"].ToString());

              lstPaluwagans.Add(lstPaluwagan);
            }
            dr.Close();
            TotalRowsCount = Convert.ToInt32(cmd.Parameters["@TotalRowsCount"].Value.ToString());
            FilteredRowsCount = Convert.ToInt32(cmd.Parameters["@FilteredRowsCount"].Value.ToString());
          }
        }
        JavaScriptSerializer serializer = new JavaScriptSerializer();
        data += "{\"sEcho\":\"" + sEcho + "\",";
        data += "\"aaData\":" + serializer.Serialize(lstPaluwagans) + ",";
        data += "\"iTotalRecords\":\"" + TotalRowsCount.ToString() + "\",";
        data += "\"iTotalDisplayRecords\":\"" + FilteredRowsCount.ToString() + "\"";
        data += "}";
      }
      catch (Exception ex)
      {
        throw ex.InnerException ;
      }
      if (cn.State == System.Data.ConnectionState.Open) cn.Close();
      return data;
    }
  }

}

This is my javascript code

<script type="text/javascript">
$(document).ready(function () {
  $("#org").jOrgChart({
    chartElement: '#chart',
    dragAndDrop: false
  });
  $('#members').dataTable({
    "bServerSide": true,
    "sAjaxSource": "CivilID.aspx/getData",
    "sAjaxDataProp": "",
    "bProcessing": true,
    "bDestroy": true,
    "fnServerData": function (sSource, aoData, fnCallback) {
      $.ajax({
        "dataType": 'json',
        "contentType": "application/json; charset=utf-8",
        "type": "GET",
        "url": sSource,
        "data": aoData,
        "success": function (msg) {
          var json = jQuery.parseJSON(msg.d);
          fnCallback(json);
          //$("#members").show();
        }
      });
    },
    "aoColumns": [
                    { "sName": "civilID" },
        { "sName": "firstName" },
                    { "sName": "lastName" },
                    { "sName": "mobile" },
                    { "sName": "parentID" },
        { "sName": "rowNum" }
    ]
  });
});
</script>

I don't know but I am getting always TypeError. Please note that I don't have any jSON error

BElow is my json data

{"sEcho":"1","aaData":[{"civilID":"123456789012","firstName":"Adel","lastName":"Alshammeri","mobile":"99466444","parentID":"","rowNum":1},{"civilID":"267122700454","firstName":"Adel","lastName":"S","mobile":"99466444","parentID":"","rowNum":2},{"civilID":"275030107784","firstName":"Mahfuz","lastName":"S","mobile":"66390129","parentID":"267122700454","rowNum":3},{"civilID":"265103002897","firstName":"Antonio","lastName":"S","mobile":"99073592","parentID":"267122700454","rowNum":4},{"civilID":"272110203967","firstName":"Reco","lastName":"S","mobile":"50956026","parentID":"267122700454","rowNum":5},{"civilID":"259061403367","firstName":"Eliseo","lastName":"S","mobile":"50956026","parentID":"275030107784","rowNum":6},{"civilID":"265020307919","firstName":"Liza","lastName":"S","mobile":"66642749","parentID":"275030107784","rowNum":7},{"civilID":"244101000772","firstName":"AlAsmar","lastName":"S","mobile":"99089648","parentID":"275030107784","rowNum":8},{"civilID":"273100700825","firstName":"Alhadad","lastName":"S","mobile":"60993977","parentID":"265103002897","rowNum":9},{"civilID":"268082304389","firstName":"AILEEN","lastName":"s","mobile":"66481975","parentID":"265103002897","rowNum":10}],"iTotalRecords":"42","iTotalDisplayRecords":"42"}

Answer 1

It worked with changing sName to mData in aoColumns and sAjaxDataProp with aoData

Answer 2

In jOrgChart plugin you need to construct a nest unordered list that represents your node nesting. which show in the following link.

https://github.com/wesnolte/jOrgChart

The problem may be with the nested unordered list structure. use the developer version of jOrgChart then you can find the exact problem.