如何用WebMethods实现Datatables？

几乎所有在C＃中使用数据表的例子都是通过服务或MVC。我如何在已经使用WebMethods的情况下使用Datatable？如何用WebMethods实现Datatables？

2017-07-31 hogarth45

一个简单的例子。 ajax调用中的dataSrc是通常会让人们上去的东西。

前端

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
    <title></title> 
     <script src="/js/jquery-2.1.3.min.js"></script> 
    <script src="/js/jquery-ui.js"></script> 
    <script src='https://cdn.datatables.net/1.10.14/js/jquery.dataTables.min.js' ></script> 
    <script src='https://cdn.datatables.net/buttons/1.3.1/js/dataTables.buttons.min.js' ></script> 
    <script src='https://cdn.datatables.net/select/1.2.2/js/dataTables.select.min.js' ></script> 

     <script> 
      $(document).ready(function() { 
       $('#exampletable').DataTable({ 
        bFilter: false, 
        scrollX: true, 
        dom: "Bfrtip", 
        ajax: { 
         url: '/DataTablesLoad.aspx/LoadData', 
         type: 'POST', 
         contentType: 'application/json;charset=utf-8', 
         dataType: "json", 
         dataSrc: function (data) { 
          var obj = JSON.parse(data.d); 
          return obj.data; 
         } 
        }, 
        order: [], 
        columns: [ 
         { data: "name" }, 
         { data: "age"}, 
         { data: "lunch" }, 
         { data: "id", visible: false, readonly: true }, 
        ], 
        select: { 
         style: 'os', 
         selector: 'td:first-child' 
        }, 
        buttons: [ 
        ], 
       }); 
      }); 
     </script> 
</head> 
<body> 
    <form id="form1" runat="server"> 
    <div> 
      <table id="exampletable" class="display" cellspacing="0" width="100%"> 
       <thead> 
        <tr> 
         <th style='text-align: center;'>Name</th> 
         <th style='text-align: center;'>Age</th> 
         <th style='text-align: center;'>Lunch</th> 
        </tr> 
       </thead> 
      </table> 
    </div> 
    </form> 
</body> 
</html>

后端

using Newtonsoft.Json.Linq; 
using System; 
using System.Collections.Generic; 
using System.Linq; 
using System.Web; 
using System.Web.Services; 
using System.Web.UI; 
using System.Web.UI.WebControls; 

public partial class DataTablesLoad : System.Web.UI.Page 
{ 
    protected void Page_Load(object sender, EventArgs e) 
    {} 

    [WebMethod] 
    public static string LoadData() 
    { 
     JObject returnObject = new JObject(new JProperty("options", new List<JObject>()), 
         new JProperty("files", new List<JObject>())); 

     List<JObject> data = new List<JObject>(); 

     JObject datum = new JObject(new JProperty("DT_RowId", "row_" + 1), 
       new JProperty("name", "Hogarth Fortith"), 


     new JProperty("age", 34), 
      new JProperty("lunch", "Apple"), 
      new JProperty("id", 123)); 

    data.Add(datum); 

    datum = new JObject(new JProperty("DT_RowId", "row_" + 2), 
      new JProperty("name", "Keely Kline"), 
      new JProperty("age", 23), 
      new JProperty("lunch", "Orange"), 
      new JProperty("id", 124)); 

    data.Add(datum); 

    datum = new JObject(new JProperty("DT_RowId", "row_" + 3), 
      new JProperty("name", "John Owen"), 
      new JProperty("age", 54), 
      new JProperty("lunch", "Sandwich"), 
      new JProperty("id", 125)); 

    data.Add(datum); 

    returnObject.Add(new JProperty("data", data)); 

    return returnObject.ToString(); 
} 
}

来源

2017-07-31 18:14:42 hogarth45

如何用WebMethods实现Datatables？

回答

相关问题