2016-08-22 50 views
0

我想在asp.net webform中使用jQuery數據表使用服務器端分頁,但無法調用在URL中傳遞的後端方法。無法執行服務器端分頁使用DataTable在asp.net web窗體

TestServerSidePaging.aspx頁面下面的html:

<div > 
<table id="example"> 
    <thead> 
     <tr style="text-align:left;"> 
      <th>Name</th> 
      <th>Age</th> 
      <th>DoB</th> 
     </tr> 
    </thead> 

    <tfoot> 
     <tr style="text-align:left;"> 
      <th>Name</th> 
      <th>Age</th> 
      <th>DoB</th> 
     </tr> 
    </tfoot> 
</table> 

腳本:

$('#example').DataTable({ 
      "processing": true, 
      "serverSide": true, 
      "ajax":{ 
       "url": "TestServerSidePaging.aspx/Test", 
       "type": "GET", 
       "data": "" 
      } 
     }); 

後端TestServerSidePaging.aspx.cs:

[WebMethod] 
    public string Test() 
    { 
     // returns data 
    } 

Test()方法未觸發。有什麼我丟失..

+0

你必須把你的腳本代碼在'$(文件)。就緒()' –

+0

並檢查控制檯瀏覽器,你有錯誤嗎? –

回答

0

嘗試添加static您的方法。例如

[WebMethod] 
public static string Test() { 
    return "test"; 
} 
+0

對不起,我忘了包括靜態,但現在包括靜態仍然我無法觸發測試() – jayanta

0

無法得到它與DataTable ajax:參數工作,所以我創作的作品,你周圍的使用$.ajax它調用[WebMethod],並結合到DataTable()的響應。

後面的代碼:

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

    } 

    [WebMethod] 
    public static List<Data> Test() 
    { 
     var d1 = new Data { Name = "Name1", Age = 1, DOB = "27/10/1988" }; 
     var d2 = new Data { Name = "Name2", Age = 2, DOB = "27/10/1988" }; 
     var d3 = new Data { Name = "Name3", Age = 3, DOB = "27/10/1988" }; 
     return new List<Data> { d1, d2, d3 }; 
    } 
} 

public class Data 
{ 
    public string Name { get; set; } 
    public int Age { get; set; } 
    public string DOB { get; set; } 
} 

.ASPX:

<head runat="server"> 
    <title></title> 
    <link href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css" rel="stylesheet" /> 
    <script src="//code.jquery.com/jquery-1.12.3.min.js"></script> 
    <script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script> 
    <script type="text/javascript"> 
     $(function() { 

      $.ajax({ 
       type: "POST", 
       url: "TestServerSidePaging.aspx/Test", 
       contentType: "application/json;charset=utf-8", 
       success: function (data) { 
        var example = $('#example').DataTable({ 
         data: data.d, 
         columns: [ 
          { data: "Name" }, 
          { data: "Age" }, 
          { data: "DOB" } 
         ] 
        }); 
       }, 
       error: function (errordata) { 
        console.log(errordata); 
       } 
      }); 
     }); 
    </script> 
</head> 
<body> 
    <form id="form1" runat="server"> 
     <table id="example"> 
      <thead> 
       <tr style="text-align:left;"> 
        <th>Name</th> 
        <th>Age</th> 
        <th>DoB</th> 
       </tr> 
      </thead> 
      <tfoot> 
       <tr style="text-align:left;"> 
        <th>Name</th> 
        <th>Age</th> 
        <th>DoB</th> 
       </tr> 
      </tfoot> 
     </table> 
    </form> 
</body>