将(键,值)中的对象数组的值上载到DataTables

时间:2015-10-28 05:09:10

标签: jquery datatables

请您查看this demo并告诉我如何将values对象数组安全地加载到DataTable中。基本上我所拥有的是这种格式的数据集

var dataSet = {
    1: {
        AnnualFirmEnergy: "91.2335550",
        CostOfEnergy: "183.835765",
        CostPerYear: "16771990.38",
        Footprint: "182.3077770",
        InstalledCapacity: "31.320802",
        Penstock: "5000.000000",
    },
    2: {
        AnnualFirmEnergy: "91.2335550",
        CostOfEnergy: "183.835765",
        CostPerYear: "16771990.38",
        Footprint: "182.3077770",
        InstalledCapacity: "31.320802",
        Penstock: "5000.000000",
    },
    3: {
        AnnualFirmEnergy: "91.2335550",
        CostOfEnergy: "183.835765",
        CostPerYear: "16771990.38",
        Footprint: "182.3077770",
        InstalledCapacity: "31.320802",
        Penstock: "5000.000000",
    }
} 

我只想将对象的值加载到表中,就像这样

$(document).ready(function() {
    $('#example').DataTable( {
        data: dataSet,
        columns: [
            { title: "Name" },
            { title: "Position" },
            { title: "Office" },
            { title: "Extn." },
            { title: "Start date" },
            { title: "Salary" }
        ]
    } );
} );

由于

1 个答案:

答案 0 :(得分:2)

  

<强>解

您需要在传递给jQuery DataTable之前预处理数据。请考虑使用以下代码:

function preprocData(dataIn){
   var dataOut = [];
   for(id in dataIn){
      if(dataIn.hasOwnProperty(id)){         
         dataOut.push(dataIn[id]);
         dataOut[dataOut.length - 1].Id = id;
      }
   }
   return dataOut;
}

$(document).ready(function() {
    $('#example').DataTable( {
        data: preprocData(dataSet),
        columns: [
            { data: "Id", title: "Id" },
            { data: "AnnualFirmEnergy", title: "AnnualFirmEnergy" },
            { data: "CostOfEnergy", title: "CostOfEnergy" },
            { data: "CostPerYear", title: "CostPerYear" },
            { data: "Footprint", title: "Footprint" },
            { data: "InstalledCapacity", title: "InstalledCapacity" },
            { data: "Penstock", title: "Penstock" }
        ]
    } );
} );
  

<强>样本

请参阅this jsFiddle以获取代码和演示。