JQueryデータ型とascxマークアップ

Question

Sharepoint Webアプリケーションで作業していますが、Webパーツ内に要素を配置しようとしています。 WebパーツにはjQuery Datatablesグリッドがあり、そのグリッドのExcelダウンロードを起動するボタンが正常に機能します。また、別のレポートをダウンロードするためにコードの呼び出しを呼び出すリンクを組み込む必要があります。理想的には、私はそのリンクとボタンを隣り合わせにする方法を見つけたいと思いますが、これが可能かどうかはわかりません。事前に

<div ID="dFundingSummary" class="dashboardMainDiv"> 

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

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

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

      <tfoot> 
       <tr style="padding-bottom: 10px;"> 
        <td style="padding-left:0px; border: none"><b>Total(s)</b></td> 
        <td style="text-align:right; padding-right:10px; border: none"><b><asp:Label ID="lblTotalFunding" runat="server" /></b></td> 
        <td style="text-align:right; padding-right:10px; border: none"><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> 

<span id="ExportFullReport" runat="server"> 
    <a OnServerClick="ExportToExcel" id="aFullExport" runat="server">Export Full Report</a> 
    <img alt="" src="/_layouts/15/images/ICXLSX.PNG" /> 
</span> 

</div> 

    <script type="text/javascript"> 
     $(document).ready(function() { 

      var table = $('#itemPlaceholderContainer').dataTable(
       { 
        "scrollY": "300px", 
        "scrollX": true, 
        "scrollCollapse": true, 
        "paging": false, 
        "autowidth": true, 

        dom: '<"toolbar"><"filterPad"f>rti<"floatRight"B><"clear">', 
        buttons: { 
         buttons: [ 
          { extend: 'excel', text: 'Save as Excel', exportOption: { page: 'current' }, footer: true } 
         ] 
        } 

       }); 

      $("div.toolbar").html('<h2>Funding Summary</h2>'); 

     }); 
</script> 

ありがとう：

はここにスクリーンショットです！

Answer 1

ラップ100％の幅のdivの内側のid「ExportFullReport」とスパンとfloatとしてのスタイルを与える：右スパン

Answer 2

あなたはjQueryを使ってこれを達成することができますし。 datatablesライブラリを開始した直後に、.prependToコマンドを使用して、Excelのボタンの前にリンクを移動します。

$("#ExportFullReport").prependTo("#IdOfContainerContainingSaveAsExcelButton"); 

$("div.toolbar").html('<h2>Funding Summary</h2>');