Sharepoint WebパーツのJQueryデータ型

Question

SharepointソリューションでjQuery Datatableを実装しようとしています。私はHTMLと関数を正しく配置していると確信していますが、私が混乱しているのは、コードの中でメソッドを呼び出す方法です。ここでは、コードです：

HTML

<table 
ID="tbl_FundingSummary" 
style="width: 95%"> 
<tr> 
<th style="width: 65%; text-align:left; padding-bottom:10px;">Research Area</th> 
<th style="width: 15%; text-align:right; padding-bottom:10px;">Gross</th> 
<th style="text-align:right; padding-bottom:10px;">All Gross</th> 
</tr>    
</table> 

jQueryの

<script> 
$(document).ready(function() { 
    if ($.fn.dataTable.isDataTable('#tbl_FundingSummary')) { 
     t.destroy(); 
    } 
    t = $("#tbl_FundingSummary").DataTable({ 
     processing: true, 
     serverSide: true, 
     info: true, 
     ajax: { 
      url: '../DashboardJQD/DashboardJQDUserControl/GetFundingData', 
      data: function (data) { 
       delete data.columns; 
      } 
     }, 
     columns: [ 
        { "data": "PlName" }, 
        { "data": "FundingGross" }, 
        { "data": "AllGross" } 
     ], 
     order: [[0, 'desc']], 
     select: true, 
     dom: 'lfrtip', 
     responsive: true, 
     buttons: true 
    }); 
    t.on('order.dt search.dt', function() { 
     t.column(0, { search: 'applied', order: 'applied' }).nodes().each(function (cell, i) { 
      cell.innerHTML = i + 1; 
     }); 
    }).draw(); 

}); 

namespace DashboardJQD 
{ 
public partial class DashboardJQDUserControl : UserControlWithControllerBase<DashboardController> 
{ 
     private string GetFundingData() 
    { 
     var methodStart = DateTime.Now; 
     const string methodName = "GetFundingData"; 
     var year = 0; 

     MyFundingResponse fundingData = null; 

     //TEST STUB 
     //year = DateTime.Now.Year; 
     year = 2015; 

     fundingData = Controller.GetFundingData(CurrentUser.UserId, CompanyGroupCode, year.ToString()); 

     if (fundingData == null) 
     { 
      RaiseMessage("No data found for this combination"); 
      return null; 
     } 

     var serializer = new JavaScriptSerializer(); 
     var serializedResult = serializer.Serialize(fundingData.Summary); 

     return serializedResult; 
    } 
}} 

私は私は考えていないWebパーツASCXの背後

コードURLを正しく呼び出すしかし、どんな洞察も認められるだろう。

Answer 1

簡単に修正しました。私はListviewコントロールを実装し、テーブルIDを参照したばかりです

<asp:ListView 
    ID="lvFundingSummary" 
    OnItemDataBound="lvFundingSummary_ItemDataBound" 
    runat="server" > 
    <ItemTemplate> 
     <tr> 
      <td style="width: 65%; text-align:left; padding-top: 5px; padding-bottom:5px;"> 
       <asp:Label ID="lblResearchArea" runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "PlName")%>' /> 
      </td> 
      <td style="width: 15%; text-align:right; padding-top: 5px; padding-bottom:5px;"> 
       <asp:Label ID="lblFundingGross" runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "FundingGross", "{0:c}")%>' /> 
      </td> 
      <td style="text-align:right; padding-top: 5px; padding-bottom:5px;"> 
       <asp:Label ID="lblGross" runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "AllGross", "{0:c}")%>' /> 
      </td> 
     </tr> 
    </ItemTemplate> 

    <LayoutTemplate> 
     <table 
      ID="itemPlaceholderContainer" 
      style="width: 100%"> 

      <thead> 
       <tr> 
        <th style="width: 65%; text-align:left; padding-bottom:10px;">Research Area</th> 
        <th style="width: 15%; text-align:right; padding-bottom:10px;">Gross</th> 
        <th style="text-align:right; padding-bottom:10px;">All EPRI Gross</th> 
       </tr> 
      </thead> 

      <tfoot> 
       <tr> 
        <td style="width: 65%; text-align:left; padding-bottom:10px;"><b>Total(s)</b></td> 
        <td style="width: 15%; text-align:right; padding-bottom:10px;"><b><asp:Label ID="lblTotalFunding" runat="server" /></b></td> 
        <td style="text-align:right; padding-bottom:10px;"><b><asp:Label ID="lblTotalEpriGross" runat="server" /></b></td> 
       </tr>   
      </tfoot> 

      <tbody runat="server"> 
       <asp:PlaceHolder ID="itemPlaceholder" runat="server" /> 
      </tbody> 

     </table>        
    </LayoutTemplate>   
</asp:ListView> 

</div> 

    <script type="text/javascript"> 
     $(document).ready(function() { 
      var table = $('#itemPlaceholderContainer').dataTable(
       { 
        "scrollY": "300px", 
        "scrollX": true, 
        "scrollCollapse": true, 
        "paging": false, 
        "autowidth": true, 

        dom: 'frti<"floatRight"B><"clear">', 
        buttons: [ 
         'copy', 'csv', 'excel', 'pdf', 'print' 
        ] 
       }); 

     }); 
</script>