JQuery Datatables и разметка ascx

Question

Я работаю над веб-приложением Sharepoint, и я пытаюсь позиционировать элемент внутри веб-части. В веб-части есть сетка 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

Wrap пролет с идентификатором «ExportFullReport» внутри DIV с шириной 100% и дать стиль как поплавок: право на пролет

Answer 2

Вы можете добиться этого с JQuery. Сразу после запуска библиотеки datatables используйте команду .prependTo, чтобы переместить ссылку перед кнопкой excel.

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

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