我正在为报告学习jquery表。我正在获得api响应，但是我无法将其绑定到jquery datatable.Look了许多与此类似的问题/示例。我从ajax调用中获取json数据。就我而言，我正在将三个参数传递给我的Web服务。
网络服务
[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public void GetDepositAccountStatement(long accountNumberId,
string fromDate, string toDate)
{
var frmDate = DatabaseLayer.Core.DateConversion.GetEnglishDate(fromDate).ToDateTime();
var tDate = DatabaseLayer.Core.DateConversion.GetEnglishDate(toDate).ToDateTime();
var res = BusinessLayer.Deposit.DepositAccountStatement.GetDepositAccountStatementViews(accountNumberId,
frmDate,
JavaScriptSerializer js = new JavaScriptSerializer();
Context.Response.Write(js.Serialize(res));
}
此Web服务返回此 Json
[{"TranId":null,"TranDate":"\/Date(1492107300000)\/","ValueDate":"\/Date(1492107300000)\/","StatementReference":"Balance B/d.","Collector":null,"Debit":null,"Credit":17252.08,"Balance":17252.08,"CheckNumber":null},{"TranId":null,"TranDate":null,"ValueDate":null,"StatementReference":"Total","Collector":null,"Debit":0,"Credit":17252.08,"Balance":null,"CheckNumber":null}]
就我而言，我想在单击按钮时将数据绑定到数据表。 Js代码
$('#ShowInGridButton').on('click', function () {
var accountNumberId = $('#DepositAccountNumberIdHiddenField').val();
var fromDate = $("input[name*='FromDateControl']").val();
var toDate = $("input[name*='ToDateControl']").val();
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
dataType: "json",
url: "/WebMethods/Deposit.asmx/GetDepositAccountStatement",
data: JSON.stringify({ accountNumberId: accountNumberId, fromDate: fromDate, toDate: toDate }),
success: function (data) {
$('#reportTable').DataTable({
data: data,
sort: true,
searching: true,
columns: [
{ 'data': 'tran_id' },
{ 'data': 'tran_date' },
{ 'data': 'value_date' },
{ 'data':'statement_reference'},
{ 'data': 'collector' },
{ 'data': 'debit' },
{ 'data': 'credit' },
{ 'data': 'balance' },
{ 'data': 'check_number' }
]
});
}
});
});
还有html
<%@ Page Title="" Language="C#" MasterPageFile="~/EverestMaster.Master" AutoEventWireup="true" CodeBehind="DepositAccountStatement.aspx.cs" Inherits="Everest.Net.Web.Report.Customer.DepositAccountStatement" %>
<%@ Register Src="~/UserControls/DepositAccount.ascx" TagPrefix="uc1" TagName="DepositAccount" %>
<%@ Register Src="~/UserControls/DateControl.ascx" TagPrefix="uc1" TagName="DateControl" %>
<asp:Content ID="Content1" ContentPlaceHolderID="TopScriptContentPlaceholder" runat="server">
<script src="/Scripts/datatables.js"></script>
<link href="/Content/datatables.css" rel="stylesheet" />
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="PageTitleContentPlaceHolder" runat="server">
Deposit Account Statement
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="FormContentPlaceholder" runat="server">
<asp:ScriptManager runat="server" ID="ScriptManager1"></asp:ScriptManager>
<div class="row">
<div class="col-sm-12">
<div id="ParameterDiv" runat="server" class="box box-primary">
<div class="box-body">
<div class="form-horizontal">
<uc1:DepositAccount runat="server" ID="DepositAccount" ShowIbtOption="True" ShowDeadAccount="True" />
<div class="form-group">
<label class="control-label col-sm-2">
From Date
</label>
<div class="col-sm-3">
<uc1:DateControl runat="server" ID="FromDateControl"/>
</div>
<label class="control-label col-sm-2">
To Date
</label>
<div class="col-sm-3">
<uc1:DateControl runat="server" ID="ToDateControl"/>
</div>
</div>
<small class="col-sm-offset-2 text-warning pvInfo"></small>
</div>
</div>
<div class="box-footer">
<div class="col-xs-offset-2">
<%-- <asp:LinkButton ID="ShowInGridButton" runat="server"
CssClass="btn btn-success btn-sm" OnClientClick="return false;">
<i class="glyphicon glyphicon-th-list"></i> Show Report
</asp:LinkButton>--%>
<asp:LinkButton ID="ShowReport" runat="server" OnClick="PrintButton_Click"
CssClass="btn btn-primary btn-sm">
<i class="glyphicon glyphicon-th-list"></i> Show Report
</asp:LinkButton>
</div>
</div>
<%-- <div class="form-group col-md-12">
<div id="DataDiv" class="tab-pane">
<div class="row form-group">
<table id="CfDataTable" class="table table-striped">
</table>
</div>
</div>
</div>--%>
</div>
</div>
<asp:LinkButton ID="ShowInGridButton" runat="server"
CssClass="btn btn-success btn-sm" OnClientClick="return false;">
<i class="glyphicon glyphicon-th-list"></i> Show Report
</asp:LinkButton>
<div style="padding: 10px; border: 5px solid black; margin-top: 50px" class="container-fluid">
<br />
<table id="reportTable" class="display table table-responsive table-hover">
<thead>
<tr>
<th>TranId</th>
<th>TranDate</th>
<th>ValueDate</th>
<th>StatementReference</th>
<th>Collector</th>
<th>Debit</th>
<th>Credit</th>
<th>Balance</th>
<th>CheckNumber</th>
</tr>
</thead>
</table>
</div>
<div class="col-sm-12">
<div class="box box-primary" id="ReportDiv" runat="server" visible="False">
<div class="box-body">
<div class="panel">
<iframe runat="server" id="PrintFrame" style="width: 100%;" frameborder="0" visible="False"></iframe>
</div>
</div>
<div class="box-footer"></div>
</div>
</div>
</div>
</asp:Content>
<asp:Content ID="Content4" ContentPlaceHolderID="BottomScriptContentPlaceholder" runat="server">
<script type="text/javascript">
$('#ShowInGridButton').on('click', function () {
var accountNumberId = $('#DepositAccountNumberIdHiddenField').val();
var fromDate = $("input[name*='FromDateControl']").val();
var toDate = $("input[name*='ToDateControl']").val();
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
dataType: "json",
url: "/WebMethods/Deposit.asmx/GetDepositAccountStatement",
data: JSON.stringify({ accountNumberId: accountNumberId, fromDate: fromDate, toDate: toDate }),
success: function (data) {
$('#reportTable').DataTable({
data: data,
columns: [
{ 'title': 'TranId' },
{ 'title': 'TranDate' },
{ 'title': 'ValueDate' },
{ 'title': 'StatementReference' },
{ 'title': 'Collector' },
{ 'title': 'Debit' },
{ 'title': 'Credit' },
{ 'title': 'Balance' },
{ 'title': 'CheckNumber' }
]
});
}
});
});
</script>
</asp:Content>
单击按钮后，我无法获取数据并绑定到数据表。 请帮忙。
答案 0 :(得分：0)
您在jQuery数据表中指定的列名与收到的实际响应不同。
将源传递到数据表时，它必须与源中的列名匹配。
更改列定义将解决您的问题。
尝试
columns: [
{ 'data': 'TranId' },
{ 'data': 'TranDate' },
{ 'data': 'ValueDate' },
{ 'data':'StatementReference'},
{ 'data': 'Collector' },
{ 'data': 'Debit' },
{ 'data': 'Credit' },
{ 'data': 'Balance' },
{ 'data': 'CheckNumber' }
]