如何使用 jQuery DataTables 在表中绑定 JSON 数据答案

【问题标题】：How to bind JSON data in a table using jQuery DataTables如何使用 jQuery DataTables 在表中绑定 JSON 数据
【发布时间】：2015-10-06 07:30:49
【问题描述】：

我想使用 jQuery DataTables 将数据绑定到表。

我正在使用操作结果返回数据并将其转换为视图中的 JSON，数据未显示在表格中，仅显示空白列。

这是视图部分

  @model Guardian.Core.Model.Models.PatientMedicationsCollection
    @{
        var ModelJsonData = Newtonsoft.Json.JsonConvert.SerializeObject(Model);
        Layout = null;
    }

    <script type="text/javascript">

        var MedicationMasterData = JSON.parse(@Html.Raw(Json.Encode(ModelJsonData)));
        var CCDAChecked;
        var LatestCCDA;
        var AllCCDA;
        var CLaimsChecked;
        var AllClaims;
        var Last6Month;
        var OneYear;
        var FilteredData = [];

        $(document).ready(function () {
            debugger;

            $.each(MedicationMasterData, function (idx, obj) {
                FilteredData.push(this);

            });
            FilterTable(MedicationMasterData);
});
        function FilterTable(FilteredData) {
            debugger;
            FData = JSON.stringify(FilteredData)
            $('#PatientMedications').DataTable({
                "scrollX": 100,
                "paging": true,
                "pagingType": "full_numbers",
                "dom": '<"toolbar">frtip',
                "aaData": FData,

                columns: [
                    { title: "PatientID" },
                    { title: "FirstName" },
                    { title: "LastName" },
                    { title: "DOB." },
                    { title: "Gender" },
                    { title: "Source" },
                    { title: "SourceCreatedDate" },
                    { title: "SourceKeyID" },
                    { title: "LatestCCDA" },
                    { title: "Code" },
                    { title: "CodeType" },
                    { title: "DrugName" },
                    { title: "DrugDecriptionsM" },
                    { title: "StartDate" },
                    { title: "StopDate" },
                    { title: "Instructions" },
                    { title: "Status" },
                    { title: "DoseQuantity" },
                    { title: "RateQuantity" },
                    { title: "RateQuantityUnit" },
                    { title: "DrugDecriptionsM" },
                    { title: "ClaimLineFromDate" },
                    { title: "DaysSupply" },
                    { title: "DOSAGEFORMNAME" },
                    { title: "ROUTENAME" },
                    { title: "ST" }

                ]

            });

我们使用操作结果返回数据的控制器部分

public ActionResult PatientMedications(int patientID)
            {
                return PartialView(patientrepository.PatientMedications(patientID));
            }

【问题讨论】：

几个问题 - 为什么返回“PartialView”？你为什么不返回一个 json 对象而不是做所有的客户端处理使用return Json(new { aaData=
我没有清楚地听到您的问题，但我想您的列名应该匹配。然后它将显示数据

标签： jquery asp.net-mvc asp.net-mvc-3 asp.net-mvc-4 datatables

【解决方案1】：

$('#PatientMedications').dataTable({
  "aaData": data,   //this is your JSON object, which is what is showing in your post above with console.log(data)
  "aoColumns": [{
    "mDataProp": "PatientID"
  }, {
    "mDataProp": "FirstName"
  }]
});

【讨论】：

【解决方案2】：

使用columns.data 选项而不是columns.title 从行的数据对象定义列的数据源。
不要将 JSON 字符串传递给 aaData，而是需要数组。删除带有JSON.stringify() 的行。
使用 data 选项名称而不是已停用的 aaData。我假设FilteredData 是一个对象数组。

$('#PatientMedications').DataTable({
    "scrollX": 100,
    "pagingType": "full_numbers",
    "dom": '<"toolbar">frtip',
    "data": FilteredData,
    "columns": [
        { data: "PatientID" },
        { data: "FirstName" },
        { data: "LastName" },
        { data: "DOB." },
        { data: "Gender" },
        { data: "Source" },
        { data: "SourceCreatedDate" },
        { data: "SourceKeyID" },
        { data: "LatestCCDA" },
        { data: "Code" },
        { data: "CodeType" },
        { data: "DrugName" },
        { data: "DrugDecriptionsM" },
        { data: "StartDate" },
        { data: "StopDate" },
        { data: "Instructions" },
        { data: "Status" },
        { data: "DoseQuantity" },
        { data: "RateQuantity" },
        { data: "RateQuantityUnit" },
        { data: "DrugDecriptionsM" },
        { data: "ClaimLineFromDate" },
        { data: "DaysSupply" },
        { data: "DOSAGEFORMNAME" },
        { data: "ROUTENAME" },
        { data: "ST" }
    ]
});

【讨论】：

是的，它是对象数组，但如果我们使用数据，它将无法工作，所以我使用 aaData 和 mData 并且它工作正常
@AdeshGaonkar，您使用的是哪个 DataTables 版本？
我们使用的是 1.10.4 版本的 DataTables

【解决方案3】：

我使用了 aaData 和 mData 并且工作正常

 function FilterTable(FilteredData) {

        $('#PatientMedications').DataTable({
            "bDestroy": true,
            "bRetrieve": true,
            "scrollX": 100,
            "paging": true,
            "pagingType": "full_numbers",
            "dom": '<"toolbar">frtip',
            "aaData": FilteredData,

            "aoColumns": [
                { "mData": "PatientID" },
                { "mData": "FirstName" },
                { "mData": "LastName" },
                { "mData": "DateOfBirth" },
                { "mData": "Gender" },
                { "mData": "Source" },
                { "mData": "SourceCreatedDate" },
                { "mData": "SourceKeyID" },
                { "mData": "LatestCCDA" },
                { "mData": "Code" },
                { "mData": "CodeType" },
                { "mData": "DrugName" },
                { "mData": "Drug Descriptions" },
                { "mData": "StartDate" },
                { "mData": "StopDate" },
                { "mData": "Instructions" },
                { "mData": "Status" },
                { "mData": "DoseQuantity" },
                { "mData": "RateQuantity" },
                { "mData": "RateQuantityUnit" },
                { "mData": "ClaimLineFromDate" },
                { "mData": "QuantityDispensed" },
                { "mData": "DaysSupply" },
                { "mData": "DosageFormName" },
                { "mData": "ROUTENAME" },
                { "mData": "ST" }

            ]

        });

【讨论】：