Sharepoint Web部件中的JQuery数据表

Question

I'm trying to implement jQuery Datatables in a Sharepoint solution. I'm pretty confident that I have the HTML and the function in place correctly but what I'm confused about is how to call the method in the code behind. Here's the code:

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();

 });

Code behind of the Web Part ascx

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;
    }
}}

I don't think I'm calling the URL correctly, but any insight would be appreciated.

Answer 1

Figured out an easy fix. I implemented a Listview control and then just referenced the table 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>