ASP.NET Web API + jQuery DataTable ( GET ) 方法

ASP.NET Web API + jQuery DataTable ( GET ) 方法

 
   < select id="Nation_SelBox" style="margin-bottom:10px; margin-top:10px;" >
      <option value=""></option>
 
      @{
         foreach (jQueryDataTableDAO.NATION item in ViewBag.NationList)
         {
            if (item.NATION_NAME != "N/A")
            {
               <option value="@(item.NATION_NAME)">@(item.NATION_NAME)</option>
            }
         }
      }
 
   < /select >
 
   < div id="ResultPanel" style="display:none; margin-top:10px;" >
 
   < table id="myTable" width="100%" >
 
      <thead>
 
         <tr>
            <th>PLAYER_ID</th>
            <th>PLAYER_NAME</th>
            <th>POSITION</th>
            <th>NATION</th>
            <th>TEAM</th>
            <th>AGE</th>
         </tr>
 
      </thead>
 
      <tbody>
 
      </tbody>
 
   < /table >
 
   < /div >
 
 
   @section scripts {
 
   < script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js" >< /script >
   < script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js" >< /script >
   < script >
 
      var table = null;
 
      $(document).ready(function () {
 
         table = DataTable_Init("");
 
         $("#Nation_SelBox").change(function () {
 
            table.destroy();
 
            $("#ResultPanel").show();
            table = DataTable_Init($(this).val());
 
         });
 
      });
 
      function DataTable_Init(nation)
      {
         return $("#myTable").DataTable({
            "ajax": {
               "url": "/rest/playerrest?nation=" + nation,
               "type": "GET"
            },
            "columns": [
               { "data": "PLAYER_ID" },
               { "data": "PLAYER_NAME" },
               { "data": "POSITION" },
               { "data": "NATION" },
               { "data": "TEAM" },
               { "data": "AGE" }
            ]
         });
      }
 
   < /script >
 
   }
 
   Restful Service : Web API Controller – Get Function
 
   using jQueryDataTableDAO;
   using Newtonsoft.Json.Linq;
 
   public class PlayerRestController : ApiController
   {
      private SoccerEntities entities;
 
      public PlayerRestController()
      {
         this.entities = new SoccerEntities();
      }
 
      public JObject Get(string nation)
      {
         List<jQueryDataTableDAO.PLAYER_VIEW> list = null;
 
         if (nation != null && nation.ToString() != "")
         {
            list = entities.PLAYER_VIEW.Where(p => p.NATION == nation.ToString()).OrderBy(p => p.PLAYER_ID).ToList();
         }
         else
         {
            list = entities.PLAYER_VIEW.OrderBy(p => p.PLAYER_ID).OrderBy(p => p.PLAYER_ID).ToList();
         }
 
         JObject obj = new JObject();
         obj.Add("data", JArray.FromObject(list));
 
         return obj;
      }
 
   }
 


Remarks :

The Restful Service from ASP.NET Web API would be fired during jQuery DataTable Object Create.

The Search Feature or the Paging Feature is executed from Client Side ( JavaScript – jQuery Database Code ) on the Collected DataSet.

You can preform the Test about this through Debug Mode with Break Point from the Restful Controller.

jQuery DataTable also have the Search Feature or the Paging Feature from Restful,
but the above Sample is not covered this …