Replies

• FredButters Posts: 3Questions: 0Answers: 0

  September 2012

  Nevermind. It looks like this might work for me:
  
  http://rantdriven.com/post/Using-Datatablesnet-JQuery-Plug-in-with-WCF-Services.aspx
• FredButters Posts: 3Questions: 0Answers: 0

  September 2012 edited September 2012

  In case anyone is wondering, this is how I implemented DataTables.net with a WCF REST Service. I'm using the code found in a post by KJM (http://datatables.net/forums/discussion/828/keyvalue-json-serialization/p1) rather than the link I have in the post above. However I changed the return type to System.IO.Stream so I can return an actual JSON object (rather than a string of JSON).
  
  It was a pretty lengthy process to get this working because of the JSON format issue, but it works great now. I wouldn't mind if DataTables.net would work with JSON containing name/value pairs *hint hint* :) but this is working pretty well, doesn't require a ton of extra code and overall this plugin is amazing so I can't complain!
  
  [code]
  [ServiceContract]
  public interface IMyInterface
  {
  [OperationContract]
  [WebInvoke(
  Method = "GET",
  BodyStyle = WebMessageBodyStyle.Bare,
  RequestFormat = WebMessageFormat.Json,
  ResponseFormat = WebMessageFormat.Json,
  UriTemplate = "getmytable?value1={val1}&value2={val2}")]
  Stream GetMyTable(int val1, int val2);
  }
  [/code]
  
  [code]
  public class MyService : IMyInterface
  {
  public Stream GetMyTable(int val1, int val2)
  {
  string returnValue = string.Empty;
  try
  {
  List list = new List();
  // populate your List<> object here however you want.
  // list = myController.GetMyTableList(val1, val2)
  
  var jsonObj = new
  {
  sEcho = 1,
  iTotalRecords = list.Count,
  iTotalDisplayRecords = list.Count,
  aaData = new List()
  };
  foreach (ITableDataSource ds in list)
  {
  jsonObj.aaData.Add(ds.GetTableData());
  }
  JavaScriptSerializer jScriptSerializer = new JavaScriptSerializer();
  returnValue = jScriptSerializer.Serialize(jsonObj);
  }
  catch (Exception ex)
  {
  throw new WebFaultException(HttpStatusCode.ServiceUnavailable);
  }
  
  //returns a JSON object, rather than a string of JSON
  WebOperationContext.Current.OutgoingResponse.ContentType = "application/json; charset=utf-8";
  MemoryStream memoryStream = new MemoryStream(Encoding.UTF8.GetBytes(returnValue));
  
  return memoryStream;
  }
  }
  [/code]
  
  
  [code]
  public interface ITableDataSource
  {
  IList GetTableData();
  }
  
  public class MyTableFields : ITableDataSource
  {
  public string FullName { get; set; }
  public string Position { get; set; }
  public int UserID { get; set; }
  public DateTime? DateOfBirth { get; set; }
  
  public IList GetTableData()
  {
  return new List()
  {
  this.FullName,
  this.Position,
  this.UserID.ToString(),
  this.DateOfBirth.ToShortDateFormat() //extension method
  };
  }
  }
  [/code]
  
  [code]
  var oTable;
  
  $(document).ready(function () {
  var val1 = $('#tbMyvalue1').val();
  var val2 = $('#tbMyvalue2').val();
  var url = "http://mysite.com/MyService.svc/getmytable?value1=" + val1 + "&value2=" + val2 + "";
  
  oTable = $('#example').dataTable({
  "bProcessing": true,
  "sAjaxSource": url
  });
  });
  [/code]
• allan Posts: 63,394Questions: 1Answers: 10,451 Site admin

  September 2012

  Thanks for sharing your code with us :-)
  
  > I wouldn't mind if DataTables.net would work with JSON containing name/value pairs
  
  It does. DataTables can work with almost any data feed through the use of the mData and sAjaxDataProp options - see: http://datatables.net/blog/Extended_data_source_options_with_DataTables
  
  Allan
• pptty Posts: 2Questions: 0Answers: 0

  April 2013

  I get the data from wcf service:
  
  {"sEcho":1,"iTotalRecords":5,"iTotalDisplayRecords":5,"aaData":[{"Title":"Task1","Detail":"Do Something 1","CreatedDate":"\/Date(1365682773875)\/"},{"Title":"Task2","Detail":"Do Something 2","CreatedDate":"\/Date(1365682773875)\/"},{"Title":"Task3","Detail":"Do Something 3","CreatedDate":"\/Date(1365682773875)\/"},{"Title":"Task4","Detail":"Do Something 4","CreatedDate":"\/Date(1365682773875)\/"},{"Title":"Task5","Detail":"Do Something 5","CreatedDate":"\/Date(1365682773875)\/"}]}
  
  How can I binding to the datatables?
  
  Thansks!
• allan Posts: 63,394Questions: 1Answers: 10,451 Site admin

  April 2013

  Use the mData option: http://datatables.net/blog/Extended_data_source_options_with_DataTables
  
  Allan
• pptty Posts: 2Questions: 0Answers: 0

  April 2013

  Allan, thank you !
  
  I use the mData, but cannot slove it !
  
  I slove it by return string and change the webget attribute .
  
  The WebGet setting:
  
  [WebGet(BodyStyle = WebMessageBodyStyle.WrappedRequest, RequestFormat = WebMessageFormat.Json, ResponseFormat = WebMessageFormat.Json)]
  
  
  The method :
  [code]
  public string GetTaskInfoToStr(Task task1,
  int sEcho)
  {
  
  
  JavaScriptSerializer serialiser = new JavaScriptSerializer();
  return serialiser.Serialize(new
  {
  sEcho,
  iTotalRecords = 2,
  iTotalDisplayRecords = 2,
  aaData = GetData()
  });
  
  }
  
  private static List GetData()
  {
  return new List
  {
  new Task { Title="Task1", Detail="Do Something 1", CreatedDate=DateTime.Now },
  new Task { Title="Task2", Detail="Do Something 2", CreatedDate=DateTime.Now },
  new Task { Title="Task3", Detail="Do Something 3", CreatedDate=DateTime.Now },
  new Task { Title="Task4", Detail="Do Something 4", CreatedDate=DateTime.Now },
  new Task { Title="Task5", Detail="Do Something 5", CreatedDate=DateTime.Now }
  };
  }
  
  [/code]
  
  I capture the return data by HttpWatch tool.
  If I want to binding to the datatables, The data format return from wcf must correct! For example:
  
  The error return data:
  [code]
  
  jQuery18206780284146947606_1365733052536("{\"sEcho\":0,\"iTotalRecords\":2,\"iTotalDisplayRecords\":2,\"aaData\":[{\"Title\":\"Task1\",\"Detail\":\"Do Something 1\",\"CreatedDate\":\"\\\/Date(1365733052703)\\\/\"},{\"Title\":\"Task2\",\"Detail\":\"Do Something 2\",\"CreatedDate\":\"\\\/Date(1365733052703)\\\/\"},{\"Title\":\"Task3\",\"Detail\":\"Do Something 3\",\"CreatedDate\":\"\\\/Date(1365733052703)\\\/\"},{\"Title\":\"Task4\",\"Detail\":\"Do Something 4\",\"CreatedDate\":\"\\\/Date(1365733052703)\\\/\"},{\"Title\":\"Task5\",\"Detail\":\"Do Something 5\",\"CreatedDate\":\"\\\/Date(1365733052703)\\\/\"}]}");
  
  [/code]
  
  
  
  The correct return data:
  [code]
  
  {"sEcho":1,"iTotalRecords":5,"iTotalDisplayRecords":5,"aaData":[{"Title":"Task1","Detail":"Do Something 1","CreatedDate":"\/Date(1365682773875)\/"},{"Title":"Task2","Detail":"Do Something 2","CreatedDate":"\/Date(1365682773875)\/"},{"Title":"Task3","Detail":"Do Something 3","CreatedDate":"\/Date(1365682773875)\/"},{"Title":"Task4","Detail":"Do Something 4","CreatedDate":"\/Date(1365682773875)\/"},{"Title":"Task5","Detail":"Do Something 5","CreatedDate":"\/Date(1365682773875)\/"}]}
  
  [/code]
• allan Posts: 63,394Questions: 1Answers: 10,451 Site admin

  April 2013

  Your 'error' example is JSONP, not plain JSON.
  
  Allan